/* ==========================================================================
   Tally design tokens
   The only file allowed to contain raw colour, size or timing values.
   Layer 1: primitives  →  Layer 2: semantic  →  Layer 3: component.
   Components (styles.css) use semantic and component tokens only.
   ========================================================================== */

:root {
  /* ---- Layer 1 · Primitives ------------------------------------------- */

  /* Cool neutral ramp */
  --grey-0: #FFFFFF;
  --grey-25: #F6F7F9;
  --grey-50: #EFF1F4;
  --grey-100: #E3E6EA;
  --grey-400: #878F9A;   /* ≥ 3:1 on white: input borders, icons */
  --grey-600: #5A636E;   /* ≥ 4.5:1 on white and grey-25: muted text */
  --grey-900: #16191D;

  --grey-dark-950: #111316;
  --grey-dark-900: #181B1F;
  --grey-dark-850: #1F2328;
  --grey-dark-800: #2A2F35;
  --grey-dark-600: #6A737E;
  --grey-dark-300: #9EA6B1;
  --grey-dark-50: #ECEEF1;

  /* The one accent: a deep "tally" green */
  --green-50: #E8F3EE;
  --green-600: #157352;
  --green-700: #105C42;
  --green-dark-900: #16302A;
  --green-dark-400: #4FC596;
  --green-dark-300: #7AD6B1;
  --green-dark-ink: #0B1F17;

  /* States */
  --red-50: #FBECEA;
  --red-600: #C2362B;
  --red-dark-900: #3A1D1B;
  --red-dark-400: #F07167;
  --amber-50: #FDF3E3;
  --amber-700: #A86206;
  --amber-dark-900: #33270F;
  --amber-dark-400: #E9B04F;
  --blue-600: #2F6FD1;
  --blue-dark-400: #7EAAF0;

  /* Space: 4px base, nothing in between */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --weight-regular: 400;
  --weight-strong: 600;
  --leading-tight: 1.25;
  --leading-body: 1.5;
  --tracking-tight: -0.01em;
  --tracking-caps: 0.06em;
  --underline-offset: 0.2em;
  --measure: 60ch;          /* comfortable line length for prose */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 999px;
  --border-width: 1px;
  --focus-width: 2px;
  --opacity-disabled: 0.6;
  --opacity-muted: 0.8;
  --spinner-stroke: 2px;
  --duration-spin: 700ms; /* not reduced: a spinner is essential feedback */

  /* Motion: one easing, two speeds */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layering: the only z-index values used */
  --layer-toast: 20;

  /* ---- Layer 2 · Semantic (light) ------------------------------------- */
  color-scheme: light;
  --color-bg: var(--grey-25);
  --color-surface: var(--grey-0);
  --color-surface-hover: var(--grey-50);
  --color-border: var(--grey-100);
  --color-border-strong: var(--grey-400);
  --color-text: var(--grey-900);
  --color-text-muted: var(--grey-600);
  --color-accent: var(--green-600);
  --color-accent-hover: var(--green-700);
  --color-accent-text: var(--grey-0);
  --color-accent-subtle: var(--green-50);
  --color-accent-strong-text: var(--green-700);
  --color-danger: var(--red-600);
  --color-danger-subtle: var(--red-50);
  --color-success: var(--green-600);
  --color-warning: var(--amber-700);
  --color-warning-subtle: var(--amber-50);
  --color-focus: var(--blue-600);
  --color-overlay: rgb(17 19 22 / 0.48);
  --color-inverse-surface: var(--grey-900);
  --color-inverse-text: var(--grey-0);
  --color-inverse-accent: var(--green-dark-300);
  --color-inverse-hover: rgb(255 255 255 / 0.1);

  --shadow-raised: 0 8px 24px rgb(17 19 22 / 0.16), 0 1px 4px rgb(17 19 22 / 0.08);

  /* ---- Layer 3 · Component ------------------------------------------- */
  --control-height: 40px;
  --avatar-sm: 32px;
  --avatar-lg: 72px;
  --icon-size: 16px;
  --nav-width: 220px;
  --content-max: 720px;
  --dialog-max: 480px;
  --toast-max: 420px;
  --check-size: 20px;
  --field-max: 28rem;
  --role-column: 10rem;
}

/* Touch screens get bigger targets */
@media (pointer: coarse) {
  :root { --control-height: 44px; }
}

/* ---- Layer 2 · Semantic (dark) --------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: var(--grey-dark-950);
    --color-surface: var(--grey-dark-900);
    --color-surface-hover: var(--grey-dark-850);
    --color-border: var(--grey-dark-800);
    --color-border-strong: var(--grey-dark-600);
    --color-text: var(--grey-dark-50);
    --color-text-muted: var(--grey-dark-300);
    --color-accent: var(--green-dark-400);
    --color-accent-hover: var(--green-dark-300);
    --color-accent-text: var(--green-dark-ink);
    --color-accent-subtle: var(--green-dark-900);
    --color-accent-strong-text: var(--green-dark-400);
    --color-danger: var(--red-dark-400);
    --color-danger-subtle: var(--red-dark-900);
    --color-success: var(--green-dark-400);
    --color-warning: var(--amber-dark-400);
    --color-warning-subtle: var(--amber-dark-900);
    --color-focus: var(--blue-dark-400);
    --color-overlay: rgb(0 0 0 / 0.64);
    --color-inverse-surface: var(--grey-dark-50);
    --color-inverse-text: var(--grey-dark-950);
    --color-inverse-accent: var(--green-600);
    --color-inverse-hover: rgb(0 0 0 / 0.06);
    --shadow-raised: 0 8px 24px rgb(0 0 0 / 0.5), 0 1px 4px rgb(0 0 0 / 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}