/* ============================================================
   NOVIX TECHNOLOGIES — Design Tokens
   Identity: "Copper & Patina"
   Reusable across the website, Bendo, and future ventures.
   ============================================================ */

:root {
  /* ---------- Brand constants (theme-independent) ---------- */
  --brand-copper:     #C9622C;
  --brand-verdigris:  #5E9E92;
  --brand-brass:      #D9A13C;
  --brand-petrol:     #0A1416;
  --brand-bone:       #F3F5F2;

  /* ---------- Type ---------- */
  --font-display: "Archivo", "Archivo Expanded", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Newsreader", Georgia, "Iowan Old Style", serif;
  --font-ui:      "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Martian Mono", "DM Mono", Consolas, ui-monospace, monospace;

  --display-width: 118%;

  /* Type scale — 1.28 ratio, fluid at the top end */
  --t-mono:   0.688rem;  /* 11px  labels, eyebrows */
  --t-xs:     0.75rem;   /* 12px */
  --t-sm:     0.875rem;  /* 14px */
  --t-base:   1rem;      /* 16px */
  --t-md:     1.125rem;  /* 18px */
  --t-lg:     1.375rem;  /* 22px */
  --t-xl:     clamp(1.5rem,  1.1rem + 1.4vw, 2rem);
  --t-2xl:    clamp(1.75rem, 1.25rem + 1.8vw, 2.6rem);
  --t-3xl:    clamp(2.1rem,  1.45rem + 2.3vw, 3.25rem);
  --t-4xl:    clamp(2.5rem,  1.6rem + 3.2vw, 4.15rem);

  --lead-tight:  0.98;
  --lead-snug:   1.14;
  --lead-body:   1.62;

  --track-display: -0.022em;
  --track-mono:    0.14em;

  /* ---------- Space (4px base) ---------- */
  --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;

  --section-y: clamp(80px, 9vw, 136px);
  --shell:     1240px;
  --gutter:    clamp(20px, 5vw, 56px);
  --rail-w:    78px;
  --measure:   64ch;

  /* ---------- Radii — deliberate and small ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 10px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-mid:  340ms;
  --dur-slow: 720ms;

  /* ---------- Light theme (default) ---------- */
  color-scheme: light;

  --bg:          #F3F5F2;
  --bg-sunk:     #EAEEE9;
  --surface:     #FFFFFF;
  --surface-2:   #ECEFEA;
  --line:        #DBE0DA;
  --line-strong: #BFC8C0;

  --text:        #101A19;
  --text-2:      #4C5A58;
  --text-3:      #75837F;

  --accent:      #C9622C;  /* graphic / large */
  --accent-ink:  #A34A1B;  /* text-safe on --bg */
  --accent-soft: #F6E6DC;
  --accent-glow: rgba(201, 98, 44, 0.16);

  --second:      #4A8C80;
  --second-ink:  #35766B;
  --second-soft: #E2EEEB;

  --brass-ink:   #8F6510;

  --ok:      #35766B;
  --warn:    #8F6510;
  --stealth: #6B7A78;

  --focus:  #A34A1B;
  --shadow-1: 0 1px 2px rgba(16, 26, 25, 0.05), 0 8px 24px -12px rgba(16, 26, 25, 0.12);
  --shadow-2: 0 2px 4px rgba(16, 26, 25, 0.06), 0 24px 56px -24px rgba(16, 26, 25, 0.22);

  --grid-line: rgba(16, 26, 25, 0.055);
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:          #0A1416;
    --bg-sunk:     #071011;
    --surface:     #0F1D20;
    --surface-2:   #14262A;
    --line:        #1E353A;
    --line-strong: #2E4C52;

    --text:        #DDE6E4;
    --text-2:      #94A7A6;
    --text-3:      #6D8081;

    --accent:      #E27C3E;
    --accent-ink:  #EE9861;
    --accent-soft: #2A1810;
    --accent-glow: rgba(226, 124, 62, 0.22);

    --second:      #6FB3A6;
    --second-ink:  #8AC6BA;
    --second-soft: #0E2422;

    --brass-ink:   #D9A13C;

    --ok:      #6FB3A6;
    --warn:    #D9A13C;
    --stealth: #7C8F90;

    --focus:  #EE9861;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 28px 60px -24px rgba(0, 0, 0, 0.8);

    --grid-line: rgba(221, 230, 228, 0.05);
  }
}

/* ---------- Explicit overrides — must beat the media query both ways ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0A1416;
  --bg-sunk:     #071011;
  --surface:     #0F1D20;
  --surface-2:   #14262A;
  --line:        #1E353A;
  --line-strong: #2E4C52;

  --text:        #DDE6E4;
  --text-2:      #94A7A6;
  --text-3:      #6D8081;

  --accent:      #E27C3E;
  --accent-ink:  #EE9861;
  --accent-soft: #2A1810;
  --accent-glow: rgba(226, 124, 62, 0.22);

  --second:      #6FB3A6;
  --second-ink:  #8AC6BA;
  --second-soft: #0E2422;

  --brass-ink:   #D9A13C;

  --ok:      #6FB3A6;
  --warn:    #D9A13C;
  --stealth: #7C8F90;

  --focus:  #EE9861;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 28px 60px -24px rgba(0, 0, 0, 0.8);

  --grid-line: rgba(221, 230, 228, 0.05);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #F3F5F2;
  --bg-sunk:     #EAEEE9;
  --surface:     #FFFFFF;
  --surface-2:   #ECEFEA;
  --line:        #DBE0DA;
  --line-strong: #BFC8C0;

  --text:        #101A19;
  --text-2:      #4C5A58;
  --text-3:      #75837F;

  --accent:      #C9622C;
  --accent-ink:  #A34A1B;
  --accent-soft: #F6E6DC;
  --accent-glow: rgba(201, 98, 44, 0.16);

  --second:      #4A8C80;
  --second-ink:  #35766B;
  --second-soft: #E2EEEB;

  --brass-ink:   #8F6510;

  --ok:      #35766B;
  --warn:    #8F6510;
  --stealth: #6B7A78;

  --focus:  #A34A1B;
  --shadow-1: 0 1px 2px rgba(16, 26, 25, 0.05), 0 8px 24px -12px rgba(16, 26, 25, 0.12);
  --shadow-2: 0 2px 4px rgba(16, 26, 25, 0.06), 0 24px 56px -24px rgba(16, 26, 25, 0.22);

  --grid-line: rgba(16, 26, 25, 0.055);
}