/* ============================================================================
   DRAGONEYE — DESIGN TOKENS  (two-tier: primitives → semantic roles)
   The single shared visual language for the product site, ecosystem site,
   investor deck — AND the foundation for the app's premium dark/light revamp.

   TIER 1 — PRIMITIVES: raw palette values, theme-independent. Never used
            directly by components; they're the library.
   TIER 2 — SEMANTIC ROLES: what components actually reference (--surface,
            --text, --accent, --hairline-tool …). These FLIP by [data-theme].

   Dark  = gold glowing on charcoal.      Light = deep bronze-gold on warm bone.
   Same jewel, opposite lighting. Gold is a jewel, not paint.

   Gold is grounded in the app:
     dark  ramp #a8772a (TOOLBAR_GOLD) · #e8c068 · #ffd86b
     light ramp deepens to bronze so it holds on paper (#7a5212 · #9a6b1e · #b8851f)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Rethink+Sans:ital,wght@0,400..800;1,400..600&display=swap');

/* ───────────────────────── TIER 1 · PRIMITIVES ─────────────────────────── */
:root {
  /* Charcoal (dark base) — neutral, faintly warm */
  --ink-900: #0b0d0c;  --ink-850: #0f1211;  --ink-800: #141817;
  --ink-750: #191e1c;  --ink-700: #1f2523;  --ink-600: #2a312e;  --ink-500: #3a423f;

  /* Bone (light base) — warm paper, never clinical #fff */
  --bone-50: #fffdf8;  --bone-100: #faf7ef;  --bone-200: #f1ede3;
  --bone-300: #e6e0d1;  --bone-400: #d6cfbc;  --bone-500: #bdb4a0;

  /* Gold — dark (glow) */
  --gold-deep:   #a8772a;
  --gold:        #e8c068;
  --gold-bright: #ffd86b;

  /* Gold — light (deep bronze, holds contrast on paper) */
  --bronze-deep:   #6b4710;
  --bronze:        #9a6b1e;
  --bronze-strong: #7a5212;
  --bronze-lift:   #b8851f;

  /* Ink for text on light */
  --char-900: #14110a;  --char-600: #5b5750;  --char-400: #8a857b;
  --warm-white: #f3f1ec;

  /* Data / semantic (echo the reports' cut/fill language) */
  --data-cut: #d9534f;  --data-fill: #4a90d9;
  --ok: #4caf7d;  --warn: #d8a23a;  --danger: #d9534f;

  /* ───────────── Type / scale / spacing / radius / motion (shared) ──────── */
  --font-wordmark: "Enclave", "Rethink Sans", ui-sans-serif, system-ui, sans-serif; /* LOGO + the word "Dragoneye" ONLY — never running headers */
  --font-display:  "Rethink Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* headings */
  --font-sans:     "Rethink Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* body */
  --font-mono:     "IBM Plex Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, monospace;        /* data */

  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;  --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem;  --text-3xl: 2.25rem; --text-4xl: 3rem;
  --text-5xl: 4rem;    --text-6xl: 5.25rem;
  --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.6;
  --tracking-wide: 0.02em; --tracking-caps: 0.22em;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-8:3rem; --space-10:4rem; --space-12:6rem; --space-16:8rem;

  --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;

  --dur-fast:160ms; --dur-base:320ms; --dur-slow:700ms;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);

  --maxw:1200px; --maxw-prose:68ch;
}

/* ─────────── TIER 2 · SEMANTIC ROLES — DARK (canonical default) ─────────── */
:root, :root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--ink-900);
  --bg-wash:       rgba(232,192,104,0.06);   /* the radial gold breath behind hero */
  --surface:       var(--ink-800);
  --surface-raised:var(--ink-750);
  --card-bg:       var(--ink-800);
  --card-tool-bg:  linear-gradient(180deg, var(--ink-750), var(--ink-800));

  --text:          var(--warm-white);
  --text-muted:    #aba59c;
  --text-faint:    #6f6b63;
  --on-accent:     #1a1407;                  /* text ON a gold fill */

  --border-subtle: var(--ink-600);
  --divider:       var(--ink-600);
  --hairline-tool: rgba(168,119,42,0.55);    /* gold  → "a tool / instrument" */
  --hairline-data: rgba(243,241,236,0.18);   /* white → "data / help"          */
  --grid-line:     rgba(255,255,255,0.025);

  --accent:        var(--gold);
  --accent-strong: var(--gold-bright);       /* hover/active = brighter on dark */
  --accent-deep:   var(--gold-deep);
  --accent-wash:   rgba(232,192,104,0.14);
  --accent-line:   rgba(168,119,42,0.55);
  /* metallic gold — banded for sheen (deep edge → bright highlight → shadow) */
  --metal-1: #8a5e22;  --metal-2: #ffe9a8;  --metal-3: #e8c068;  --metal-4: #a8772a;  --metal-5: #ffd86b;
  --accent-gradient: linear-gradient(135deg, #8a5e22 0%, #e8c068 22%, #fff3c8 40%, #e8c068 52%, #a8772a 68%, #ffd86b 86%, #9a6b1e 100%);
  --accent-cta: linear-gradient(180deg, #ffe6a3 0%, #ecc873 46%, #caa040 100%); /* polished gold pill (dark text) */

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --glow-accent: 0 0 24px rgba(255,216,107,0.28);
}

/* ─────────────── TIER 2 · SEMANTIC ROLES — LIGHT (counterbalance) ───────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            var(--bone-200);
  --bg-wash:       rgba(154,107,30,0.07);    /* warm gold breath, gentler on paper */
  --surface:       var(--bone-50);
  --surface-raised:#ffffff;
  --card-bg:       #ffffff;
  --card-tool-bg:  linear-gradient(180deg, var(--bone-50), var(--bone-100));

  --text:          var(--char-900);
  --text-muted:    var(--char-600);
  --text-faint:    #6f695d;                  /* darkened so small labels hold on bone */
  --on-accent:     #271b06;                  /* DARK ink on a gold pill = premium (not white-on-brown) */

  --border-subtle: var(--bone-300);
  --divider:       var(--bone-300);
  --hairline-tool: rgba(122,82,18,0.55);     /* deep bronze → tool border holds on paper */
  --hairline-data: rgba(20,17,10,0.14);      /* charcoal hairline → data/help */
  --grid-line:     rgba(20,17,10,0.04);

  --accent:        #7e5615;                  /* deepened so small accent text/eyebrows hold on bone */
  --accent-strong: var(--bronze-strong);     /* hover/active = DEEPER on light */
  --accent-deep:   var(--bronze-deep);
  --accent-wash:   rgba(154,107,30,0.10);
  --accent-line:   rgba(122,82,18,0.5);
  /* metallic bronze — banded for sheen on paper */
  --metal-1: #5e3f0e;  --metal-2: #e6c879;  --metal-3: #9a6b1e;  --metal-4: #7a5212;  --metal-5: #c79433;
  --accent-gradient: linear-gradient(135deg, #5e3f0e 0%, #9a6b1e 22%, #e6c879 40%, #b8851f 54%, #7a5212 70%, #c79433 88%, #5e3f0e 100%);
  --accent-cta: linear-gradient(180deg, #e6bd5b 0%, #c8962e 52%, #ac7c1d 100%); /* gold pill on light — lighter top reads gold, not brown */

  --shadow-sm: 0 1px 2px rgba(60,50,20,0.08);
  --shadow-md: 0 10px 30px rgba(60,50,20,0.10);
  --shadow-lg: 0 24px 60px rgba(60,50,20,0.14);
  --glow-accent: 0 1px 2px rgba(60,50,20,0.10);  /* no glow on light — elevation instead */
}

@font-face {
  font-family: "Enclave";
  src: url("./assets/EnclaveRegular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}