/* tokens/fonts.css */
/* Rethentic — Webfonts
 * Akshar — the single brand face. Confirmed from the source deck (Akshar + Akshar Light),
 *          and its geometric, slightly-condensed construction mirrors the RETHENTIC
 *          wordmark. Used for display, headings, eyebrows, numerals, UI, body — everything.
 *
 * The system is intentionally SINGLE-FAMILY and sans-serif. Typographic distinction comes
 * from scale and color, not from switching to a second (serif or mono) face.
 *
 * NOTE: the font is loaded from the Google Fonts CDN rather than self-hosted. Akshar's
 * PPTX-embedded binaries were subset/obfuscated and not extracted. If you need
 * self-hosted .woff2 files, drop them in assets/fonts/ and swap the 400;500;600;700&display=swap');

/* tokens/colors.css */
/* Rethentic — Color tokens
 * A disciplined monochrome ink ramp + a single hot red-orange accent + paper white.
 * All values transcribed from the source deck (accent #FF4620 used 54×; the ink ramp
 * 0A0A0A / 131313 / 1A1A1A / 282828 / 2A2A2A / 373734 and the neutral greys are the
 * exact hexes present in the slides). Nothing snapped or rounded.
 */
:root {
  /* ---- Base palette ---- */
  --paper:        #FFFFFF;   /* primary light surface */
  --ink:          #0A0A0A;   /* primary near-black */
  --ink-900:      #131313;
  --ink-850:      #1A1A1A;
  --ink-800:      #282828;
  --ink-780:      #2A2A2A;
  --ink-700:      #373734;   /* warm charcoal (note: slightly green-tinted, from source) */

  --grey-600:     #444444;
  --grey-550:     #555555;
  --grey-500:     #666666;
  --grey-400:     #888888;
  --grey-300:     #AAAAAA;
  --grey-200:     #CCCCCC;
  --grey-150:     #DDDDDD;
  --grey-100:     #F5F5F5;

  /* ---- Accent (Rethentic red-orange) ---- */
  --accent:       #FF4620;   /* the brand accent */
  --accent-alt:   #FF461F;   /* the second hex present in the source; visually identical */
  --accent-ink:   #C7300F;   /* darkened accent for pressed / hover on light */
  --accent-tint:  #FFEDE8;   /* faint accent wash for light backgrounds */

  /* ---- Semantic verification states ----
   * Rethentic's product speaks in one binary: Authentic vs Flagged. The accent is
   * reserved for the brand; verification uses a distinct, unambiguous green/red pair. */
  --verified:     #1E9E5A;   /* authentic / verified */
  --verified-tint:#E7F5EE;
  --flagged:      #FF4620;   /* flagged / counterfeit — reuses the brand accent */
  --flagged-tint: #FFEDE8;
  --pending:      #888888;   /* verifying / unknown */

  /* ---- Semantic aliases (use these in components) ---- */
  --bg:                var(--paper);
  --bg-inverse:        var(--ink);
  --surface:           var(--paper);
  --surface-sunken:    var(--grey-100);
  --surface-card:      var(--paper);
  --surface-card-dark: var(--ink);

  --text-primary:      var(--ink);
  --text-secondary:    var(--grey-550);
  --text-tertiary:     var(--grey-400);
  --text-inverse:      var(--paper);
  --text-inverse-dim:  var(--grey-300);
  --text-accent:       var(--accent);

  --border:            var(--grey-150);
  --border-strong:     var(--ink);
  --border-subtle:     var(--grey-100);
  --border-inverse:    #2E2E2E;   /* hairline on dark surfaces */

  --focus-ring:        var(--accent);
}

/* ---- Dark scope ---- */
/* Apply .on-dark to any container rendered on --ink to remap the semantic aliases. */
.on-dark {
  --surface:        var(--ink);
  --surface-card:   var(--ink-900);
  --surface-sunken: var(--ink-850);
  --text-primary:   var(--paper);
  --text-secondary: var(--grey-300);
  --text-tertiary:  var(--grey-400);
  --border:         var(--border-inverse);
  --border-strong:  var(--paper);
  --border-subtle:  var(--ink-800);
  color: var(--text-primary);
  background: var(--surface);
}

/* tokens/typography.css */
/* Rethentic — Typography tokens
 * ONE family. Akshar (sans-serif) carries everything. There is no serif and no mono face:
 * a wide, deliberate type scale plus color is the whole distinction system — sophistication
 * comes from contrast between very large display and small, tracked labels, and from a single
 * accent color for emphasis, not from ornament or a second typeface.
 */
:root {
  /* ---- Families — single sans family ---- */
  --font-display: 'Akshar', 'Arial Narrow', system-ui, sans-serif; /* headlines, UI, body */
  --font-sans:    'Akshar', system-ui, sans-serif;                 /* alias for body/UI   */
  /* Legacy aliases: kept so older references still render in the brand face. They no longer
     introduce a different family — emphasis is now scale + color (see .t-emphasis). */
  --font-serif:   var(--font-sans);
  --font-mono:    var(--font-sans);                                /* IDs/figures: sans, tabular-nums */

  /* ---- Weights ---- */
  --w-light:    300; /* @kind font */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */

  /* ---- Type scale (px). Editorial, high-contrast. ---- */
  --fs-display-xxl: 128px;  /* hero numerals / one-word statements */
  --fs-display-xl:  88px;
  --fs-display-l:   64px;
  --fs-display-m:   48px;
  --fs-heading-l:   36px;
  --fs-heading-m:   28px;
  --fs-heading-s:   22px;
  --fs-body-l:      18px;
  --fs-body-m:      16px;
  --fs-body-s:      14px;
  --fs-label:       13px;   /* uppercase eyebrows / labels */
  --fs-caption:     12px;
  --fs-micro:       11px;

  /* ---- Line heights ---- */
  --lh-tight:   0.98; /* @kind font */
  --lh-snug:    1.08; /* @kind font */
  --lh-heading: 1.14; /* @kind font */
  --lh-body:    1.5;  /* @kind font */
  --lh-relaxed: 1.62; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-body:     0em;    /* @kind font */
  --ls-label:    0.16em; /* @kind font */
  --ls-label-sm: 0.24em; /* @kind font */
}

/* ---- Type utility classes (optional; components mostly use tokens directly) ---- */
.t-display-xxl { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-display-xxl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-display-xl  { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-display-xl);  line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.t-display-l   { font-family: var(--font-display); font-weight: var(--w-medium);   font-size: var(--fs-display-l);   line-height: var(--lh-snug);  letter-spacing: var(--ls-display); }
.t-display-m   { font-family: var(--font-display); font-weight: var(--w-medium);   font-size: var(--fs-display-m);   line-height: var(--lh-snug);  letter-spacing: var(--ls-heading); }
.t-heading-l   { font-family: var(--font-display); font-weight: var(--w-medium);   font-size: var(--fs-heading-l);   line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-heading-m   { font-family: var(--font-display); font-weight: var(--w-medium);   font-size: var(--fs-heading-m);   line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-heading-s   { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-heading-s);   line-height: var(--lh-heading); }
.t-body-l      { font-family: var(--font-sans); font-weight: var(--w-light);  font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
.t-body        { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body-m); line-height: var(--lh-body); }
.t-body-s      { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body-s); line-height: var(--lh-body); }
.t-label       { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-label); line-height: 1; letter-spacing: var(--ls-label); text-transform: uppercase; }
.t-caption     { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--text-tertiary); }
/* Emphasis without a second face: accent color + a touch more weight, upright. */
.t-emphasis    { color: var(--accent); font-weight: var(--w-medium); font-style: normal; }
.t-mono        { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* tokens/spacing.css */
/* Rethentic — Spacing, radii, borders, shadows, layout, motion
 * Minimal system: mostly hairline borders and flat surfaces. Shadows are rare and soft.
 * Corners are nearly square — the brand reads as precise and engineered, not soft.
 */
:root {
  /* ---- Spacing scale ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii — kept tight; the brand is engineered, not rounded ---- */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;   /* eyebrows, status pills, scan button */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--border);
  --border-ink:      1px solid var(--border-strong);
  --border-w:        1px;

  /* ---- Shadows — used sparingly, always soft & neutral ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(10,10,10,0.05);
  --shadow-md:   0 8px 24px rgba(10,10,10,0.08);
  --shadow-lg:   0 24px 60px rgba(10,10,10,0.12);
  --shadow-focus:0 0 0 3px rgba(255,70,32,0.28);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 24px;
  --gutter:        24px;

  /* ---- Motion — restrained, no bounce ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      200ms; /* @kind other */
  --dur-slow:      360ms; /* @kind other */
}

/* tokens/base.css */
/* Rethentic base — resets & global element defaults.
 * Loaded after tokens so it can consume them. Not a component; foundational only. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links — Rethentic keeps links understated: ink by default, accent on hover. */
a         { color: var(--text-primary); text-decoration: none; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover   { color: var(--accent); }
.on-dark a       { color: var(--paper); }
.on-dark a:hover { color: var(--accent); }

/* Emphasis is carried by the accent color and a little extra weight — never italics or a
   second (serif) face. Keeps the system single-family and sans-serif. */
em, i { font-style: normal; color: var(--accent); font-weight: var(--w-medium); }

::selection { background: var(--accent); color: var(--paper); }

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

h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium); letter-spacing: var(--ls-heading); }
p { margin: 0; }
img { display: block; max-width: 100%; }

/* styles.css */
/* Rethentic Design System — global CSS entry point.
 * Consumers link THIS file only. Keep it a list of