/*
 * Citium Software design tokens: v2 DRAFT (branch chore/restylebrand)
 * Visual reference: brand/logo-lab.html
 *
 * Usage:
 *   <link rel="stylesheet" href="brand/fonts.css">   (self-hosted, no third-party font requests)
 *   <link rel="stylesheet" href="brand/tokens.css">
 *
 * Neutrals and ink are shared with the Zeno product family (ZenoTunnel tokens v1.0),
 * so Citium and Zeno pages sit together. Citium owns Kition Copper; Zeno products own
 * Tunnel Blue and Stream Cyan.
 *
 * "Midpoint" colours (copper-500, patina-500, aegean-500) are tuned to about 4.3:1
 * against BOTH white and night, so the same hex works in light and dark mode,
 * on screen and in one-colour print.
 *
 * Theming: light by default; dark follows prefers-color-scheme unless the page
 * sets <html data-theme="light"> or <html data-theme="dark">.
 */

:root {
  /* ---------- Raw palette: Kition Copper (masterbrand accent) ---------- */
  --ct-copper-50:  #FBF1EA;
  --ct-copper-100: #F5DCCB;
  --ct-copper-300: #E2A077;
  --ct-copper-500: #BE6029; /* midpoint: 4.29:1 on white, 4.34:1 on night */
  --ct-copper-700: #8F431A;
  --ct-copper-900: #4F240D;

  /* ---------- Raw palette: Patina (oxidised copper; successor to the old teal) ---------- */
  --ct-patina-50:  #E9F5F3;
  --ct-patina-300: #7CC4BA;
  --ct-patina-500: #2F877D; /* midpoint: 4.30:1 on white, 4.33:1 on night */
  --ct-patina-700: #1F5E57;

  /* ---------- Raw palette: Aegean (links and focus; bridges to Zeno blue) ---------- */
  --ct-aegean-300: #8EB5FB;
  --ct-aegean-500: #3A74F0; /* midpoint: 4.25:1 on white, 4.38:1 on night */
  --ct-aegean-600: #1A52D9; /* = Zeno Tunnel Blue 600 */

  /* ---------- Raw palette: ink and whites (shared with Zeno) ---------- */
  --ct-white:   #FFFFFF;
  --ct-snow:    #F6F8FC;
  --ct-mist:    #EDF1F8;
  --ct-line:    #DDE4EF;
  --ct-ink-300: #A3B1CC;
  --ct-ink-500: #5B6782;
  --ct-ink-700: #3D4A66;
  --ct-ink-900: #0B1530;
  --ct-night:   #0A1226;
  --ct-night-2: #111C36;
  --ct-night-3: #1A2747;

  /* ---------- Semantic: LIGHT ---------- */
  --ct-bg:             var(--ct-white);
  --ct-bg-subtle:      var(--ct-snow);
  --ct-surface:        var(--ct-white);
  --ct-border:         var(--ct-line);
  --ct-border-strong:  #C4CFE0;
  --ct-text:           var(--ct-ink-900);
  --ct-text-secondary: var(--ct-ink-500);
  --ct-link:           var(--ct-aegean-600);
  --ct-mark:           var(--ct-ink-900);   /* logo primary */
  --ct-accent:         var(--ct-copper-500); /* logo accent, same in both themes */
  --ct-accent-soft:    var(--ct-copper-50);
  --ct-on-accent:      var(--ct-white);
  --ct-action:         var(--ct-ink-900);   /* primary button */
  --ct-on-action:      var(--ct-white);
  --ct-success:        var(--ct-patina-500);
  --ct-success-soft:   var(--ct-patina-50);
  --ct-product:        var(--ct-aegean-600); /* Zeno product accents on Citium pages */
  --ct-band:           var(--ct-ink-900);   /* inverse band: stats, CTA, code */
  --ct-on-band:        var(--ct-white);
  --ct-on-band-muted:  var(--ct-ink-300);
  --ct-focus-ring:     0 0 0 3px rgba(190, 96, 41, 0.35);

  /* ---------- Typography (self-hosted, OFL) ---------- */
  --ct-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ct-font-text:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ct-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale 1.250, base 16px (same as Zeno) */
  --ct-text-xs: 0.75rem; --ct-text-sm: 0.875rem; --ct-text-base: 1rem; --ct-text-lg: 1.125rem;
  --ct-text-xl: 1.25rem; --ct-text-2xl: 1.5625rem; --ct-text-3xl: 1.953rem; --ct-text-4xl: 2.441rem;
  --ct-text-display: clamp(2.441rem, 1.6rem + 3.6vw, 4.5rem);
  --ct-tracking-display: -0.03em;
  --ct-tracking-eyebrow: 0.14em;

  /* Shape: square-shouldered, small radii. The marks are built from straight cuts. */
  --ct-radius-sm: 4px; --ct-radius-md: 6px; --ct-radius-lg: 10px; --ct-radius-pill: 999px;
  --ct-space-1: 4px; --ct-space-2: 8px; --ct-space-3: 12px; --ct-space-4: 16px; --ct-space-5: 24px;
  --ct-space-6: 32px; --ct-space-7: 48px; --ct-space-8: 64px; --ct-space-9: 96px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ct-bg: var(--ct-night); --ct-bg-subtle: #0D1730; --ct-surface: var(--ct-night-2);
    --ct-border: var(--ct-night-3); --ct-border-strong: #2A3A60;
    --ct-text: #E8EEF9; --ct-text-secondary: var(--ct-ink-300); --ct-link: var(--ct-aegean-300);
    --ct-mark: var(--ct-white); --ct-accent-soft: rgba(190, 96, 41, 0.16);
    --ct-action: var(--ct-white); --ct-on-action: var(--ct-night);
    --ct-success-soft: rgba(47, 135, 125, 0.16); --ct-product: #7EA9FA;
    --ct-band: var(--ct-night-2); --ct-on-band: #E8EEF9; --ct-on-band-muted: var(--ct-ink-300);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ct-bg: var(--ct-night); --ct-bg-subtle: #0D1730; --ct-surface: var(--ct-night-2);
  --ct-border: var(--ct-night-3); --ct-border-strong: #2A3A60;
  --ct-text: #E8EEF9; --ct-text-secondary: var(--ct-ink-300); --ct-link: var(--ct-aegean-300);
  --ct-mark: var(--ct-white); --ct-accent-soft: rgba(190, 96, 41, 0.16);
  --ct-action: var(--ct-white); --ct-on-action: var(--ct-night);
    --ct-success-soft: rgba(47, 135, 125, 0.16); --ct-product: #7EA9FA;
    --ct-band: var(--ct-night-2); --ct-on-band: #E8EEF9; --ct-on-band-muted: var(--ct-ink-300);
  color-scheme: dark;
}