/* =============================================================================
   AUTOBIOGRAPHY MEDIA — DESIGN TOKENS
   Single source of truth for the front end.
   Derived from: Identity System, Volume One (brand guidelines).

   HOW TO READ THIS FILE
   Every token is tagged:
     [KIT]     value stated or shown directly in the brand kit — do not change.
     [DERIVED] my recommendation, built in the kit's spirit — safe to tune.
     [CONFIRM] the kit implies this but never prints the value. Replace with the
               real value from the supplied vector/source files before launch.

   THREE VALUES YOU MUST CONFIRM (see [CONFIRM] tags): brand red hex,
   secondary-grey hex, and the sans-serif family name. Nothing else is a guess.
   ============================================================================= */

:root {

  /* ==========================================================================
     COLOR
     Ratio discipline (from "Color in application"): ~60% white / 25% black /
     10% grey / 5% red. Red is the lead accent — never two red elements
     competing in the same view. Never red as a large fill behind a car.
     ========================================================================== */

  --color-white:      #FFFFFF;   /* [KIT] backgrounds, infinity-wall imagery, generous margin */
  --color-black:      #000000;   /* [KIT] type, dark-mode surfaces, the MEDIA half of the wordmark
                                    NOTE: if the supplied dark cards use a soft black, match it here */
  --color-red:        #C8102E;   /* [CONFIRM] lead accent. NOT printed in the kit.
                                    Open the red-colorway logo SVG and read its fill, paste it here */
  --color-red-hover:  #A50C24;   /* [DERIVED] primary button hover & pressed (kit shows a darker red) */
  --color-grey:       #555555;   /* [CONFIRM] secondary type, captions, the "10% grey" swatch.
                                    Read the actual value off the ratio bar / source and replace */
  --color-rule:       #E2E2E2;   /* [KIT] nav base rule + all hairline rules (kit states 1px #E2E2E2) */

  /* Semantic aliases — reference THESE in components, not the raw colors above.
     Swapping a brand value later then propagates everywhere automatically. */
  --color-bg:               var(--color-white);
  --color-bg-dark:          var(--color-black);   /* dark cards, dark-mode surfaces */
  --color-text:             var(--color-black);
  --color-text-secondary:   var(--color-grey);
  --color-text-on-dark:     var(--color-white);
  --color-accent:           var(--color-red);
  --color-accent-hover:     var(--color-red-hover);
  --color-border:           var(--color-rule);
  --color-focus:            var(--color-red);      /* [KIT] focused form state uses the brand red rule */


  /* ==========================================================================
     TYPOGRAPHY
     Serif is the voice (Bodoni Moda, mandatory for the wordmark and headlines).
     Sans is the utility face for everything else: nav, labels, body, captions,
     buttons. Setting the wordmark in any face other than Bodoni Moda is
     explicitly prohibited.
     ========================================================================== */

  --font-serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
                                /* [KIT] wordmark + all display/headlines. Load Bodoni Moda (Google Fonts) */
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;
                                /* [CONFIRM] utility face — the kit does not name its sans.
                                   Replace "Inter" with the real family, then keep the fallbacks */

  /* Weights */
  --weight-regular:   400;   /* [DERIVED] body, captions */
  --weight-medium:    500;   /* [DERIVED] labels, nav, buttons */
  --weight-semibold:  600;   /* [DERIVED] emphasis */
  --weight-display:   500;   /* [DERIVED] Bodoni headlines read best mid-weight, not black */

  /* Type scale — anchored on the kit's printed sizes; the rest is a [DERIVED]
     editorial scale you can tune. Root assumed 16px. */
  --text-eyebrow:   0.75rem;   /* [KIT] 12px letterspaced uppercase — section eyebrows, button labels, field labels */
  --text-caption:   0.8125rem; /* [DERIVED] 13px — captions, secondary type */
  --text-body:      1rem;      /* [DERIVED] 16px — body copy */
  --text-lead:      1.25rem;   /* [DERIVED] 20px — intro / standfirst */
  --text-h4:        1.5rem;    /* [DERIVED] 24px */
  --text-h3:        2rem;      /* [DERIVED] 32px */
  --text-h2:        2.75rem;   /* [DERIVED] 44px */
  --text-h1:        4rem;      /* [DERIVED] 64px — Bodoni display headline */

  /* Line height */
  --leading-tight:  1.1;    /* [DERIVED] display headlines */
  --leading-snug:   1.3;    /* [DERIVED] leads */
  --leading-normal: 1.55;   /* [DERIVED] body */

  /* Letter-spacing */
  --tracking-label:  0.12em;  /* [KIT] ~12px letterspaced uppercase labels/eyebrows/buttons */
  --tracking-normal: 0;       /* [KIT] body + Bodoni headlines set normal */

  /* Minimum sizes for reproduced type (from the kit) */
  --type-signature-min: 8pt;  /* [KIT] "Powered by Ted7" signature never below 8pt */


  /* ==========================================================================
     LAYOUT & GRID
     ========================================================================== */

  --layout-max-width: 1440px;  /* [KIT] max content width */
  --grid-columns:     12;      /* [KIT] 12-column grid */
  --grid-gutter:      24px;    /* [KIT] 24px gutter */


  /* ==========================================================================
     SPACING
     8px base rhythm, aligned to the kit's 24px gutter. Clear space around the
     logo mark is defined relationally in the kit (= height of the dashed centre
     line, "X"), so it lives with the logo component, not here.
     ========================================================================== */

  --space-0:   0;
  --space-1:   4px;    /* [DERIVED] */
  --space-2:   8px;    /* [DERIVED] base unit */
  --space-3:   16px;   /* [DERIVED] */
  --space-4:   24px;   /* [KIT] gutter rhythm */
  --space-5:   40px;   /* [DERIVED] */
  --space-6:   64px;   /* [DERIVED] */
  --space-7:   96px;   /* [DERIVED] section spacing — "generous margin" */
  --space-8:   128px;  /* [DERIVED] */


  /* ==========================================================================
     RADIUS & ELEVATION
     Both are effectively constants in this brand. Kept as tokens so the "0 /
     none" rule is enforced by reference rather than remembered per component.
     ========================================================================== */

  --radius:  0;      /* [KIT] corner radius 0 everywhere — no exceptions */
  --shadow:  none;   /* [KIT] no drop shadows anywhere — separation is rules or whitespace only */


  /* ==========================================================================
     COMPONENT TOKENS
     Concrete specs from the "Web components" page, expressed against the
     semantic tokens above so components never hardcode a brand value.
     ========================================================================== */

  /* Navigation — 88px tall, white, 1px #E2E2E2 base rule */
  --nav-height:  88px;                              /* [KIT] */
  --nav-bg:      var(--color-white);                /* [KIT] */
  --nav-border:  1px solid var(--color-border);     /* [KIT] */
  /* active nav item: red text + red underline (see button-tertiary) */

  /* Buttons — 0 radius, 12px letterspaced uppercase label. One primary per view. */
  --btn-radius:          var(--radius);             /* [KIT] */
  --btn-label-size:      var(--text-eyebrow);       /* [KIT] 12px */
  --btn-label-tracking:  var(--tracking-label);     /* [KIT] letterspaced */
  --btn-label-transform: uppercase;                 /* [KIT] */
  --btn-padding:         16px 32px;                 /* [DERIVED] */

  --btn-primary-bg:         var(--color-accent);        /* [KIT] red fill */
  --btn-primary-text:       var(--color-white);         /* [KIT] */
  --btn-primary-bg-hover:   var(--color-accent-hover);  /* [KIT] darker red on hover/pressed */

  --btn-secondary-bg:       transparent;                /* [KIT] outline only */
  --btn-secondary-text:     var(--color-black);         /* [KIT] */
  --btn-secondary-border:   1px solid var(--color-black); /* [KIT] */

  --btn-tertiary-text:      var(--color-black);         /* [KIT] inline link */
  --btn-tertiary-underline: var(--color-accent);        /* [KIT] red underline */

  /* Form fields — underline style, 1px rule, label above, no placeholder-only labels */
  --field-border:        1px solid var(--color-black);  /* [KIT] 1px rule (underline-style input) */
  --field-border-focus:  1px solid var(--color-focus);  /* [KIT] focus uses brand red rule */
  --field-radius:        var(--radius);                 /* [KIT] */
  --field-label-size:    var(--text-eyebrow);           /* [KIT] uppercase letterspaced label above */
  --field-label-tracking:var(--tracking-label);         /* [KIT] */

  /* Cards — no radius, no shadow, separated by a 1px rule or whitespace only */
  --card-radius:  var(--radius);                    /* [KIT] */
  --card-shadow:  var(--shadow);                    /* [KIT] */
  --card-border:  1px solid var(--color-border);    /* [KIT] rule or whitespace only */
  --card-bg:      var(--color-white);               /* [KIT] */
  --card-bg-dark: var(--color-black);               /* [KIT] dark card for film / behind-the-scenes */
}