/* =====================================================================
   Digital Giant — Colors & Type
   Source of truth: tokens/color.json + tokens/typography.json + brand/voice.md
   Brand guidelines: research/brand_guidelines.txt
   ===================================================================== */

/* --- Webfonts --------------------------------------------------------- */

@font-face {
  font-family: "GT Cinetype";
  src: url("./fonts/GT-Cinetype-Light.woff2") format("woff2"),
       url("./fonts/GT-Cinetype-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Cinetype";
  src: url("./fonts/GT-Cinetype-Light-Italic.woff2") format("woff2"),
       url("./fonts/GT-Cinetype-Light-Italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GT Cinetype";
  src: url("./fonts/GT-Cinetype-Regular.woff2") format("woff2"),
       url("./fonts/GT-Cinetype-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Cinetype";
  src: url("./fonts/GT-Cinetype-Regular-Italic.woff2") format("woff2"),
       url("./fonts/GT-Cinetype-Regular-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GT Cinetype";
  src: url("./fonts/GT-Cinetype-Bold.woff2") format("woff2"),
       url("./fonts/GT-Cinetype-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Cinetype";
  src: url("./fonts/GT-Cinetype-Bold-Italic.woff2") format("woff2"),
       url("./fonts/GT-Cinetype-Bold-Italic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "GT Cinetype Mono";
  src: url("./fonts/GT-Cinetype-Mono.woff2") format("woff2"),
       url("./fonts/GT-Cinetype-Mono.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ----------------------------------------------------------- */

:root {
  /* Brand colors — the entire palette per the brand guidelines.
     Black, White, 50% Grey, Yellow (brand surface, PDF p.4). */
  --dg-black:      #0A0A0A;
  --dg-white:      #FFFFFF;
  --dg-grey-50:    #808080;   /* 50% K — logo bar, dividers, second-read */
  --dg-yellow:     #FFE000;   /* Brand surface (page 4). */

  /* Derived greys — for surface ladders. Derived from #0A0A0A / #FFFFFF
     so the system stays inside the documented palette spirit. */
  --dg-grey-05:    #F2F2F2;   /* Page tint, hairline rows */
  --dg-grey-15:    #D9D9D9;   /* Borders on white */
  --dg-grey-25:    #BFBFBF;   /* Disabled glyph */
  --dg-grey-65:    #595959;   /* Body on white (when softer than pure black) */
  --dg-grey-85:    #262626;   /* Near-black surface */

  /* Semantic foreground / background — light surface (default) */
  --fg-1:          var(--dg-black);     /* Primary text */
  --fg-2:          var(--dg-grey-50);   /* Secondary "second read" */
  --fg-3:          var(--dg-grey-25);   /* Tertiary / disabled */
  --fg-accent:     var(--dg-yellow);    /* Accent / emphasis (yellow surface chips, marks) */
  --bg-1:          var(--dg-white);     /* Page */
  --bg-2:          var(--dg-grey-05);   /* Card / inset */
  --bg-inverse:    var(--dg-black);     /* Inverse surface */
  --border-1:      var(--dg-grey-15);   /* Hairline */
  --border-2:      var(--dg-grey-50);   /* Strong */

  /* Type families */
  --font-sans:     "GT Cinetype", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "GT Cinetype Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  --font-display:  var(--font-sans);    /* Same family — weight does the work */

  /* Weights — documented in the brand PDF */
  --w-light:       300;
  --w-regular:     400;
  --w-bold:        700;

  /* Type scale — base 13.5pt body from the PDF, mapped to px for screen.
     13.5pt ≈ 18px @ screen. Scale ratio is pragmatic, mirrors the PDF's
     {9, 11, 13.5, 22, 27, 30, 50} hierarchy. */
  --fs-overline:   11px;   /* Small grey label above body */
  --fs-caption:    12px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;   /* PDF "body" — 13.5pt */
  --fs-h4:         22px;
  --fs-h3:         28px;   /* PDF "page title" — 27pt */
  --fs-h2:         44px;
  --fs-h1:         72px;
  --fs-display:    120px;  /* DG mnemonic lockup scale */

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.45;
  --lh-loose:      1.6;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;     /* For overlines */
  --tracking-mono:  0.02em;

  /* Spacing — 4px base, doubling for major steps */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Radii — DG is hard-edge by default. Radius is used only on
     pill-style interactive controls or rare badges. */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  /* Borders */
  --bw-hairline: 1px;
  --bw-strong:   2px;

  /* Elevation — minimal. DG is flat. Use sparingly. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10,10,10,0.06);
  --shadow-2: 0 8px 24px rgba(10,10,10,0.08);
  --shadow-modal: 0 24px 64px rgba(10,10,10,0.24);

  /* Motion — DG anims are crisp and mechanical, not bouncy */
  --ease-linear:  linear;
  --ease-mech:    cubic-bezier(0.2, 0, 0.2, 1);     /* Default UI */
  --ease-cut:     cubic-bezier(0.7, 0, 0.3, 1);     /* Snap cut */
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     420ms;

  /* Grid — PDF documents 1/4/6 column grids */
  --grid-gutter:  24px;
  --grid-margin:  48px;
  --maxw-text:    65ch;
  --maxw-page:    1280px;
}

/* Dark / inverse surface override — DG runs full-bleed black often */
[data-dg-surface="dark"],
.dg-surface-dark {
  --fg-1:    var(--dg-white);
  --fg-2:    rgba(255,255,255,0.50);   /* "50% white" — PDF */
  --fg-3:    rgba(255,255,255,0.30);
  --bg-1:    var(--dg-black);
  --bg-2:    var(--dg-grey-85);
  --border-1: rgba(255,255,255,0.15);
  --border-2: rgba(255,255,255,0.50);
}

/* --- Base / semantic ------------------------------------------------- */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Bold or Light, never Regular for display.
   PDF: "Page Title Headline = Bold 27pt" or "Light 27pt" */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

/* "Body Headline" — Bold 13.5pt per PDF */
.body-headline {
  font-weight: var(--w-bold);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
}

/* "Body Copy" — Light 13.5pt per PDF */
p, .body {
  font-weight: var(--w-light);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  margin: 0;
  text-wrap: pretty;
}

/* "Body Copy Second Read" — Light 13.5pt @ 50% K */
.body-2 {
  font-weight: var(--w-light);
  color: var(--fg-2);
}

/* Overline — small grey label above body text. From voice.md:
   "small grey label above the body text. short, neutral, factual."
   Cased UPPERCASE w/ wide tracking. This is the DG vernacular. */
.overline, .label {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-overline);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Mono — for captions, code, data-style metadata.
   GT Cinetype Mono shines at small sizes per PDF. */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-mono);
}

/* Accent — emphasis is carried by weight, not color. The .accent class
   inherits the surrounding color so the Bold/Light title pair carries
   meaning structurally. */
.accent { color: inherit; }
mark { background: var(--dg-yellow); color: var(--dg-black); padding: 0 .15em; }

/* Links — underline only; color inherits from surface */
a { color: inherit; text-underline-offset: 0.18em; }
a:hover { opacity: 0.6; transition: opacity var(--dur-fast) var(--ease-mech); }

/* Selection — black inverse */
::selection { background: var(--dg-black); color: var(--dg-white); }

/* Dev helper — mark elements that should not exist (e.g. an old em dash) */
[data-dg-forbidden] { outline: 2px dashed magenta; outline-offset: 2px; }