@charset "utf-8";
/* */
/* --- --- --- AlfRome80 Look'n'Feel --- --- --- */
/* Italian motorsport heritage × Retro CRT terminal × Sim-racing gamer */
/* Drop-in Ersatz fuer theme-aam.css: gleiche Variablen-Namen, neue Werte. */
/* */

:root,
.brand-ar80 {
    /* ===== BRAND COLORS — Alfa-Badge + CRT-Phosphor ====== */
    /* Direkt nutzbar in der Webseite, z.B. color: var(--clr-alfa-red) */
    --clr-alfa-navy:        #1a1a6e;   /* Badge-Feld, tiefes Cobaltblau */
    --clr-alfa-navy-deep:   #11114a;   /* schattige 3D-Seite */
    --clr-alfa-red:         #c8202a;   /* Mailaender Kreuz */
    --clr-alfa-green:       #1f7a4d;   /* Biscione */
    --clr-alfa-silver:      #c9ccd1;   /* Chromring + Lettering */
    --clr-alfa-silver-hi:   #ebedef;   /* Chrome-Highlight */
    --clr-alfa-silver-lo:   #7a7e84;   /* Chrome-Schatten */

    --clr-crt-amber:        #ffb000;   /* CRT Primaer-Phosphor */
    --clr-crt-amber-hot:    #ffd24a;   /* Focus / Highlight */
    --clr-crt-amber-glow:   #ff8a00;   /* Halo / Glow */
    --clr-crt-amber-dim:    #8a5c00;   /* Burned-in / Disabled */
    --clr-crt-green:        #33ff66;   /* Alt-Phosphor */

    /* ===== COLOR SETTINGS ====== */
    /* "bluegray" Ramp = warmer Schwarz mit Navy-Tint + Chrome-Silber zur Mitte.
       Namen bleiben fuer AAM-Kompatibilitaet erhalten. */
    --clr-bluegray-900: #0a0a14;   /* near-black mit Navy-Hauch */
    --clr-bluegray-800: #131320;   /* surface */
    --clr-bluegray-700: #1d1d2c;   /* raised */
    --clr-bluegray-600: #3a3a48;   /* hairline */
    --clr-bluegray-500: #5a5a68;   /* muted */
    --clr-bluegray-400: #8a8a99;   /* secondary text */
    --clr-bluegray-300: var(--clr-alfa-silver);     /* Chrome */
    --clr-bluegray-200: var(--clr-alfa-silver-hi);  /* Chrome hi */
    --clr-bluegray-100: #f4efe1;   /* paper — "carbon copy" */
    --clr-bluegray-50:  #faf7ee;   /* paper hi */

    /* Akzent-Slots — jetzt mit allen 3 Badge-Farben besetzt:
       primary  = Amber  (HUD-Dominanz)
       secondary= Navy   (Badge-Feld)
       violet   = Rot    (italienische Bruecke)
       Grün kommt explizit als --clr-success und in den Gradients. */
    --clr-accent-primary:        var(--clr-crt-amber);
    --clr-accent-secondary:      var(--clr-alfa-navy);

    --clr-accent-primary-dark:   var(--clr-crt-amber-glow);
    --clr-accent-primary-light:  var(--clr-crt-amber-hot);
    --clr-accent-violet:         var(--clr-alfa-red);
    --clr-accent-secondary-dark: var(--clr-alfa-navy-deep);
    --clr-accent-secondary-light:#3b3bb0;   /* heller Navy fuer Dark-Mode-Border */

    /* light mode color settings (default) — warmes Off-White, dunkler Text */
    --clr-background-page:    var(--clr-bluegray-100);  /* paper */
    --clr-highlight-background:var(--clr-bluegray-50);
    --clr-highlight-border:   var(--clr-bluegray-300);
    --clr-text-main:          var(--clr-bluegray-800);
    --clr-heading:            var(--clr-bluegray-900);
    --clr-btn-text:           var(--clr-bluegray-800);
    --clr-btn-border:         var(--clr-bluegray-700);
    --clr-light:              var(--clr-bluegray-100);

    /* gradients — komplette Badge-Sequenz: Navy → Rot → Amber → Grün.
       Spiegelt die Brand-Farben (Cobaltfeld, Mailand-Kreuz, CRT, Biscione). */
    --grad-brand:         linear-gradient(135deg,
                            var(--clr-alfa-red)   0%,
                            var(--clr-alfa-green) 50%,
                            var(--clr-alfa-navy)  100%);
    --grad-wide:          linear-gradient(90deg,
                            var(--clr-alfa-navy-deep) 0%,
                            var(--clr-alfa-navy)      20%,
                            var(--clr-alfa-red)       45%,
                            var(--clr-crt-amber)      70%,
                            var(--clr-alfa-green)     100%);
    --grad-accent-fill:   linear-gradient(-45deg,
                            var(--clr-alfa-red),
                            var(--clr-crt-amber));
    --grad-accent-border: linear-gradient(135deg,
                            var(--clr-alfa-navy),
                            var(--clr-alfa-red),
                            var(--clr-crt-amber));
    /* Italienische Flagge — rein als Akzent-Streifen verwendbar */
    --grad-tricolore:     linear-gradient(90deg,
                            var(--clr-alfa-green)  0% 33.3%,
                            var(--clr-alfa-silver-hi) 33.3% 66.6%,
                            var(--clr-alfa-red)    66.6% 100%);

    --glow:                 0.8;

    /* svg specific — IDs muessen in deiner Logo-SVG existieren */
    --logo-stroke-url: url(#stroke-light-gradient);

    /* Status — Renn-Flaggen + Brand-Grün fuer Success */
    --clr-error:   var(--clr-alfa-red);     /* Badge-Rot statt generischem Rot */
    --clr-success: var(--clr-alfa-green);   /* Biscione-Gruen */
}

html.dark-mode,
body.dark-mode,
.card-mode,
html.dark-mode .brand-ar80,
body.dark-mode .brand-ar80 {
    /* Dark Mode = "echter" AR80: schwarzer CRT-Hintergrund, helles Paper als Text */
    --clr-background-page:     var(--clr-bluegray-800);
    --clr-highlight-background:var(--clr-bluegray-700);
    --clr-highlight-border:    var(--clr-bluegray-600);
    --clr-text-main:           var(--clr-bluegray-100);
    --clr-heading:             var(--clr-bluegray-50);
    --clr-dark:                var(--clr-bluegray-800);
    --clr-btn-text:            var(--clr-bluegray-100);
    --clr-btn-border:          var(--clr-bluegray-200);

    --grad-accent-border: linear-gradient(135deg,
                            var(--clr-accent-secondary-light),
                            var(--clr-accent-primary-light));

    /* svg specific */
    --logo-stroke-url: url(#stroke-dark-gradient);
}

/* ===== LAYOUT VARIABLES ====== */

:root {
    /* local stored fonts — Kreon fuer Display+Body, Source Code Pro fuer Mono.
       Poppins wurde durch Kreon ersetzt (AR80 ist Slab-Serif konsequent). */
    --ff-body:    "Kreon", Georgia, serif;
    --ff-heading: "Kreon", "Bookman Old Style", Georgia, serif;
    --ff-mono:    "Source Code Pro", "IBM Plex Mono", Consolas, monospace;
    --ff-script:  "Alfa Owner Script", "Brush Script MT", cursive;

    /* font sizes used by tags */
    --fs-body: var(--fs-400);
    --fs-h1:   var(--fs-800);
    --fs-h2:   var(--fs-700);
    --fs-h3:   var(--fs-600);
    --fs-h4:   var(--fs-500);

    /* font sizes used by different content */
    --fs-nav:    var(--fs-500);
    --fs-button: var(--fs-400);

    /* font weight used by tags */
    --fw-body: var(--fw-regular);
    --fw-h1:   var(--fw-bold);
    --fw-h2:   var(--fw-bold);
    --fw-h3:   var(--fw-semi-bold);
    --fw-h4:   var(--fw-medium);

    /* font sizes used by different content */
    --fw-nav:    var(--fw-medium);
    --fw-button: var(--fw-medium);

    /* Letter-Spacing fuer UPPERCASE Mono-Labels (HUD-Feel).
       Optional verfuegbar, falls deine Stylesheets das nutzen wollen. */
    --ls-overline: 0.22em;
}

body {
    /* mobile header settings */
    --space-top:    1rem;
    --space-right:  2rem;
    --space-bottom: 0.5rem;
    --space-left:   2rem;
    --logo-size:    5rem;

    /* border design settings — AR80 ist hartkantig. Radius kleiner als AAM. */
    --brd-radius-cards: 0.25rem;   /* 4px — AR80 Standard */
    --brd-width-cards:  0.125rem;  /* 2px — schmaler, sauberer Strich */
    --brd-clr-cards:    var(--clr-bluegray-400);

    /* button design settings */
    --clr-btn-background:   rgba(58, 58, 69, 0.5);     /* warmes Halb-Dunkel */
    --brd-radius-button:    0.25rem;                    /* 4px */
    --brd-width-button:     2px;
}

@media screen and (max-width: 65rem) {
    body {
        /* desktop header settings */
        --space-right:  1rem;
        --space-bottom: 0.5rem;
        --space-left:   1rem;
        --logo-size:    3rem;
    }
}