/* ============================================================
   TALLYCENT THEME SYSTEM
   ============================================================
   Layer 1 — Primitives      raw hex values, never referenced outside this file
   Layer 2 — Semantic tokens shape declared here, values set per-theme below
   Layer 3 — Light theme     default; also applied via [data-theme="light"]
   Layer 4 — Dark theme      [data-theme="dark"] and prefers-color-scheme: dark

   These tokens are shared with the Tallycent dashboard and admin apps.
   Do not change the --green-*/--blue-*/--cream-* primitive values without
   updating all three.

   No hex values should appear anywhere outside this file — every other
   stylesheet and component must reference the tokens declared here.
   ============================================================ */

/* ------------------------------------------------------------
   LAYER 1 — Primitives
   ------------------------------------------------------------ */
:root {
  /* Typography */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Green primitive scale (anchor: #ADC655, the brand's "Wealth" color) */
  --green-50:  #F5F8ED;
  --green-100: #E8F0D4;
  --green-200: #D5E5B0;
  --green-300: #C2D98C;
  --green-400: #B4D073;
  --green-500: #ADC655; /* exact brand anchor */
  --green-600: #93AC42;
  --green-700: #758A34;
  --green-800: #566627;
  --green-900: #3D491C;

  /* Blue primitive scale (anchor: #97CAD8, the brand's "Stable" color) */
  --blue-50:  #EFF7F9;
  --blue-100: #DCEEF2;
  --blue-200: #BFDFE7;
  --blue-300: #97CAD8; /* exact brand anchor */
  --blue-400: #7DBBCB;
  --blue-500: #5CA6B9;
  --blue-600: #45889C;
  --blue-700: #366B7B;
  --blue-800: #29505C;

  /* Base/cream scale — replaces the old pure-white background */
  --cream-50:  #F5F4ED; /* exact brand value — primary page background */
  --cream-100: #ECECDC; /* exact brand value — subtle/alternate section background */

  /* Neutral (ink/surface) scale — a cool, slightly teal-tinted gray */
  --gray-0:   #FFFFFF;
  --gray-50:  #F7FAF9;
  --gray-100: #EEF3F2;
  --gray-200: #DFE7E5;
  --gray-300: #C3CFCC;
  --gray-500: #6B7A77;
  --gray-700: #3E4B49;
  --gray-900: #1C2624;
  --gray-950: #0F1615;

  /* Status hues (used sparingly — form validation, alerts) */
  --red-600:   #C0362C;
  --red-100:   #FBE7E5;
  --amber-600: #A15C07;
  --amber-100: #FBF0D9;
}

/* ------------------------------------------------------------
   LAYER 2 — Semantic tokens (declared here, valued per theme)
   ------------------------------------------------------------
   --color-accent                 primary brand color (links, primary buttons)
   --color-accent-hover           accent on hover/active
   --color-accent-soft            tinted background for accent-adjacent elements
   --color-accent-secondary       secondary brand accent (blue) — genuine
                                   second accent, not a shadow of the primary
   --color-accent-secondary-soft  tinted background for the secondary accent
   --color-on-accent              text/icon color placed on top of
                                   --color-accent or --color-accent-secondary
   --color-on-accent-secondary    alias of --color-on-accent for clarity at
                                   call sites that only ever paint secondary
   --color-ink-primary     headings, primary body copy
   --color-ink-secondary   secondary copy, sub-headings
   --color-ink-muted       captions, placeholders, disabled text
   --color-bg              page background
   --color-bg-subtle       alternate section background
   --color-surface         card / panel background
   --color-border          hairlines, dividers, input borders
   --color-focus-ring      focus outline color
   --color-danger / -soft  error text / error background
   --color-warning / -soft warning text / warning background
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   LAYER 3 — Light theme (default)
   ------------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --color-accent:       var(--green-500);
  --color-accent-hover: var(--green-600);
  --color-accent-soft:  var(--green-50);
  --color-accent-secondary:      var(--blue-300);
  --color-accent-secondary-soft: var(--blue-50);
  /* Both accents are light/pastel tones — white text on top of them fails
     contrast, so on-accent text is a dark ink, not white. */
  --color-on-accent:           #1C2B22;
  --color-on-accent-secondary: #1C2B22;

  --color-ink-primary:   #1E2A33;
  --color-ink-secondary: #4B5A55;
  --color-ink-muted:     #7A8A84;

  --color-bg:        var(--cream-50);
  --color-bg-subtle: var(--cream-100);
  --color-surface:   var(--gray-0);
  --color-border:    #DFDFD1;

  --color-focus-ring: var(--green-600);

  --color-danger:      var(--red-600);
  --color-danger-soft: var(--red-100);
  --color-warning:      var(--amber-600);
  --color-warning-soft: var(--amber-100);

  --shadow-sm: 0 1px 2px rgba(15, 22, 21, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 22, 21, 0.08);

  /* Nav — solid at rest, frosted-glass pill once scrolled. Values match the
     kyn-website / trs-website reference exactly. */
  --nav-bg-scrolled:     rgba(255, 255, 255, 0.86);
  --nav-shadow-scrolled: 0 2px 24px rgba(15, 22, 21, 0.07), 0 1px 4px rgba(15, 22, 21, 0.04);
}

/* ------------------------------------------------------------
   LAYER 4 — Dark theme
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-accent:       var(--green-400);
    --color-accent-hover: var(--green-300);
    --color-accent-soft:  var(--green-900);
    --color-accent-secondary:      var(--blue-400);
    --color-accent-secondary-soft: var(--blue-800);
    --color-on-accent:           #1C2B22;
    --color-on-accent-secondary: #1C2B22;

    --color-ink-primary:   var(--gray-50);
    --color-ink-secondary: var(--gray-200);
    --color-ink-muted:     var(--gray-300);

    --color-bg:        var(--gray-950);
    --color-bg-subtle: var(--gray-900);
    --color-surface:   var(--gray-900);
    --color-border:    var(--gray-700);

    --color-focus-ring: var(--green-300);

    --color-danger:      #E8938C;
    --color-danger-soft: #3A1D1A;
    --color-warning:      #E7C069;
    --color-warning-soft: #382A0F;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);

    --nav-bg-scrolled:     rgba(18, 18, 18, 0.92);
    --nav-shadow-scrolled: 0 2px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.20);
  }
}

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

  --color-accent:       var(--green-400);
  --color-accent-hover: var(--green-300);
  --color-accent-soft:  var(--green-900);
  --color-accent-secondary:      var(--blue-400);
  --color-accent-secondary-soft: var(--blue-800);
  --color-on-accent:           #1C2B22;
  --color-on-accent-secondary: #1C2B22;

  --color-ink-primary:   var(--gray-50);
  --color-ink-secondary: var(--gray-200);
  --color-ink-muted:     var(--gray-300);

  --color-bg:        var(--gray-950);
  --color-bg-subtle: var(--gray-900);
  --color-surface:   var(--gray-900);
  --color-border:    var(--gray-700);

  --color-focus-ring: var(--green-300);

  --color-danger:      #E8938C;
  --color-danger-soft: #3A1D1A;
  --color-warning:      #E7C069;
  --color-warning-soft: #382A0F;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36);

  --nav-bg-scrolled:     rgba(18, 18, 18, 0.92);
  --nav-shadow-scrolled: 0 2px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.20);
}

/* ------------------------------------------------------------
   Theme-invariant tokens — spacing, type, radius, motion
   ------------------------------------------------------------ */
:root {
  /* Matches the kyn-website / trs-website nav-pill easing exactly. */
  --ease-nav: cubic-bezier(0.16, 1, 0.3, 1);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --content-width: 1120px;
  --content-width-narrow: 760px;
}

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

html {
  font-size: 16px;
  text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { color: var(--color-accent-hover); }

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

hr {
  border: none;
  border-top: 1px solid var(--color-border);
}

img, svg { display: block; max-width: 100%; }