/* ============================================================
   Stonify Design System — tokens.css
   Source of truth: web/theme.css + web/design-system/tokens.json
   Dark-mode-first. All values pinned to brand book + theme.css.
   ============================================================ */

/* --- Fontface: Fustat (brand) ----------------------------------- */
/* Variable font preferred; static weights provided for tooling that
   doesn't pick up the variable axis. */

@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/Fustat-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/Fustat-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Fustat-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Fustat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Fustat-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Fustat-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Fustat-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Fustat-ExtraBold.ttf') format('truetype');
}

/* Gvonz Thin — display-only mono/stencil face, reserved for art-direction.
   Not used in product UI. Available for posters / large statements. */
@font-face {
  font-family: 'Gvonz';
  font-style: normal;
  font-weight: 100 300;
  font-display: swap;
  src: url('fonts/GvonzThin.otf') format('opentype');
}

/* --- Tokens (dark-mode canonical) ------------------------------- */
:root {
  /* Surface ladder (HSL triplets — mirrors theme.css) */
  --background: 198 31% 6%;     /* #0E1417 — page canvas */
  --section-muted: 198 10% 13%; /* #1E2326 — alternating section */
  --card-bottom: 198 8% 20%;    /* #2F3437 — lower stop of card gradient */
  --card: 198 8% 24%;           /* #393E41 — upper stop (the lifted surface) */

  /* Text */
  --foreground: 60 4% 95%;        /* #F2F2F1 */
  --muted-foreground: 210 2% 75%; /* #BEBFC0 */

  /* Brand pair */
  --primary: 276 91% 38%;     /* #7209B7 purple — primary action */
  --secondary: 198 100% 45%;  /* #009FE3 cyan — selected / focus / current */
  --primary-foreground: 60 4% 95%;
  --secondary-foreground: 198 31% 6%;

  /* State */
  --border: 210 2% 75%;       /* always consumed with opacity */
  --ring: 198 100% 45%;       /* focus outline = cyan */
  --destructive: 0 70% 56%;   /* #D63F3F */
  --muted: 192 2% 52%;

  /* Hex aliases — brand book direct values (used in light-mode print) */
  --stonify-brand-dark: #0b1215;
  --stonify-brand-light: #f2f2f1;
  --stonify-brand-gray-dark: #474c4e;
  --stonify-brand-gray-mid: #828687;
  --stonify-brand-gray-light: #bebfc0;
  --stonify-brand-purple: #7209b7;
  --stonify-brand-blue: #009fe3;

  /* Chamfer (clip-path corner cut depths — NEVER border-radius on brand surfaces).
     The ladder is sm → default → lg → page. Button + pill chamfers are fixed
     numerals; pill encodes single-corner semantics and is NOT substitutable
     for chamfer-sm (which is a full 4-corner cut for small/narrow surfaces). */
  --stonify-chamfer-sm: 0.5rem;       /* 8px — small/narrow surfaces (partner logo cards, frame placeholders) */
  --stonify-chamfer: 1rem;            /* 16px — cards / frames default */
  --stonify-chamfer-lg: 1.25rem;      /* 20px — prominent shapes */
  --stonify-chamfer-page: 2rem;       /* 32px — page-level surfaces */
  --stonify-chamfer-button: 0.7rem;   /* 11.2px — fixed */
  --stonify-chamfer-pill: 0.5rem;     /* 8px — single-corner */

  /* Brand signature gradient */
  --gradient-brand: linear-gradient(90deg, #7209b7 0%, #009fe3 100%);

  /* Type */
  --font-stonify: "Fustat", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display-alt: "Gvonz", "Fustat", ui-sans-serif; /* poster-only */

  /* Spacing scale (Tailwind 4px step — use ONLY these) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;

  /* Layout maxes */
  --layout-section: 1152px;        /* max-w-6xl */
  --layout-section-narrow: 768px;  /* max-w-3xl */
  --layout-display-column: 896px;  /* max-w-4xl */

  color-scheme: dark;
}

/* --- Light mode tokens (opt-in) -------------------------------- */
/* Activate by setting `data-theme="light"` on <html> or <body>.
   Stonify is dark-first; light mode is for print, letterhead, and any
   surface where dark would be heavier than the brand intends.
   The brand colours (purple, cyan) keep their hex values — the brand
   pair is mode-invariant. The surface ladder and text colours invert.
   Borders flip from light-grey-on-dark to dark-grey-on-light, keeping
   the same opacity ladder semantics (/.25 default → /1 active). */
[data-theme="light"] {
  /* Surface ladder — same logical order (background → muted → card),
     but inverted brightness. The card gradient still flows light-at-top
     → darker-at-bottom (light from above metaphor preserved). */
  --background: 60 12% 97%;       /* #F8F8F6 — page canvas, warm white */
  --section-muted: 60 4% 91%;     /* #E9E9E6 — alternating section */
  --card: 60 6% 94%;              /* #F0F0EE — card gradient top (lifted from muted) */
  --card-bottom: 60 4% 88%;       /* #E1E1DE — card gradient bottom (subtle floor shadow) */

  /* Text — invert. Foreground uses brand-dark; muted uses brand-gray-dark. */
  --foreground: 198 31% 6%;       /* #0B1215 — brand dark */
  --muted-foreground: 198 5% 32%; /* #4D5256 — close to brand-gray-dark */

  /* Brand pair — mode-invariant. Same hex in both modes. */
  --primary: 276 91% 38%;         /* #7209B7 — passes AA on white */
  --secondary: 198 100% 45%;      /* #009FE3 — same as dark mode */
  --primary-foreground: 60 4% 95%;
  --secondary-foreground: 198 31% 6%;

  /* Border — dark grey on light surfaces. Same opacity ladder applies. */
  --border: 198 5% 32%;           /* #4D5256 — consumed with opacity */
  --ring: 198 100% 45%;           /* focus = cyan, mode-invariant */
  --destructive: 0 70% 56%;       /* #D63F3F — AA-passing on white at body text */
  --muted: 192 2% 52%;            /* mid-grey, mode-invariant */

  color-scheme: light;
}

/* Light-mode usage notes — for the next agent
   ===============================================
   1. PixelAccent: in light mode, pick `color="dark"` instead of `"white"`
      for the neutral pixel of cluster/corner presets. The "white" cells
      vanish on light surfaces.
   2. BrandMark: pass `tone="dark"` for light-mode surfaces (renders the
      black wordmark/icon variant).
   3. OnLockup: pass `tone="color-black"` (or `tone="black"`) for the
      light-surface variants of ON-* sub-brand lockups.
   4. The cyan `--secondary` does not pass WCAG AA for body text on white.
      Use it for focus rings, decorative outlines, and ≥24px display text;
      use `--foreground` (brand-dark) for state-conveying body text.
   5. Card gradients in light mode are subtle by design — the chamfer +
      border do most of the visual work. Don't compensate with extra
      shadow or stronger fills.
*/

/* --- Body baseline ---------------------------------------------- */
html, body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-stonify);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Semantic type roles ---------------------------------------- */
/* Use these classes when raw HTML is closer-to-hand than the React
   primitives. They map 1:1 to the React components and to tokens.json. */

.t-eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}
.t-eyebrow--sm { letter-spacing: 0.24em; }
.t-eyebrow--lg { letter-spacing: 0.32em; }

.t-h1 {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.02;
  color: hsl(var(--foreground));
}

.t-h2 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: hsl(var(--foreground));
}

.t-h3 {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: hsl(var(--foreground));
}

.t-body-lg {
  font-size: 18px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .t-body-lg { font-size: 20px; line-height: 1.6; } }

.t-body {
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .t-body { font-size: 16px; } }

.t-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}

.t-stat-value {
  font-size: clamp(48px, 6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: hsl(var(--foreground));
}

.t-tag {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* --- Brand utilities -------------------------------------------- */

/* Text gradient (use sparingly — counts against per-fold density budget) */
.brand-text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Surfaces */
.surface-bg { background: hsl(var(--background)); }
.surface-muted { background: hsl(var(--section-muted)); }
.surface-card {
  background: linear-gradient(
    180deg,
    hsl(var(--card)) 0%,
    hsl(var(--card-bottom)) 100%
  );
}

/* Chamfer presets (clip-path polygons — match the React components) */
.chamfer-full {
  clip-path: polygon(
    0 var(--stonify-chamfer),
    var(--stonify-chamfer) 0,
    calc(100% - var(--stonify-chamfer)) 0,
    100% var(--stonify-chamfer),
    100% calc(100% - var(--stonify-chamfer)),
    calc(100% - var(--stonify-chamfer)) 100%,
    var(--stonify-chamfer) 100%,
    0 calc(100% - var(--stonify-chamfer))
  );
}
.chamfer-frame {
  clip-path: polygon(
    0 var(--stonify-chamfer-lg),
    var(--stonify-chamfer-lg) 0,
    calc(100% - var(--stonify-chamfer-lg)) 0,
    100% var(--stonify-chamfer-lg),
    100% calc(100% - var(--stonify-chamfer-lg)),
    calc(100% - var(--stonify-chamfer-lg)) 100%,
    var(--stonify-chamfer-lg) 100%,
    0 calc(100% - var(--stonify-chamfer-lg))
  );
}
/* Two corners: top-right + bottom-left (Button primary / ChamferedCard accent tier) */
.chamfer-accent {
  clip-path: polygon(
    0 0,
    calc(100% - 0.7rem) 0,
    100% 0.7rem,
    100% 100%,
    0.7rem 100%,
    0 calc(100% - 0.7rem)
  );
}
/* Pill (single bottom-right corner) — Button "pill" variant */
.chamfer-pill {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 0.5rem),
    calc(100% - 0.5rem) 100%,
    0 100%
  );
}

/* Border-opacity ladder (use as `var(--border)` with hsl/) */
/* These are docs values — apply directly:  border-color: hsl(var(--border) / 0.25); */

/* Focus ring */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}