/* ============================================================
   TICKEDOFF DESIGN TOKENS  (v3)
   ============================================================
   Every hex code is defined ONCE, in the private raw palette.
   All other CSS references semantic tokens (--color-*).
   To re-skin the site: change the hex values in the raw palette.

   RAW PALETTE VARIABLE NAMES ARE BY ROLE, NOT BY COLOR.
   --_palette-primary-500 means "the primary brand color at step 500,"
   not "green at step 500." The day we decide primary should be teal
   or slate, we change the hex values and the names stay true.

   Color names (hemlock, dusk, ember) appear ONLY in comments, as
   documentation of current hue intent — never as identifiers.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ============================================================
     RAW PALETTE — PRIVATE. Do not reference outside this block.
     ============================================================ */

  /* Primary scale — currently hemlock green (deep blue-shifted, pine at dusk) */
  --_palette-primary-950: #0a1612;
  --_palette-primary-900: #0f1f19;
  --_palette-primary-800: #142e24;
  --_palette-primary-700: #1a4032;
  --_palette-primary-600: #215744;
  --_palette-primary-500: #2d6a4f;
  --_palette-primary-400: #3b8560;
  --_palette-primary-300: #5aa37c;
  --_palette-primary-200: #82c2a0;
  --_palette-primary-100: #b0dcc4;

  /* Secondary scale — currently dusk blue (cold, horizon over water) */
  --_palette-secondary-800: #1d3444;
  --_palette-secondary-700: #2d4d63;
  --_palette-secondary-600: #3a627e;
  --_palette-secondary-500: #4a7a99;
  --_palette-secondary-400: #6594b0;
  --_palette-secondary-300: #85aec4;
  --_palette-secondary-200: #a8c7d7;

  /* Warning scale — currently ember copper (oak leaves in October, coals) */
  --_palette-warning-800: #6b2a0e;
  --_palette-warning-700: #8a3a15;
  --_palette-warning-600: #a84a1d;
  --_palette-warning-500: #c4602b;
  --_palette-warning-400: #d97441;
  --_palette-warning-300: #e88f5f;

  /* Neutral scale — warm-dark with a green undertone */
  --_palette-neutral-1000: #07090a;
  --_palette-neutral-950:  #0d100e;
  --_palette-neutral-900:  #121613;
  --_palette-neutral-850:  #171b18;
  --_palette-neutral-800:  #1d211e;
  --_palette-neutral-700:  #282d29;
  --_palette-neutral-600:  #3a403b;
  --_palette-neutral-500:  #565d57;
  --_palette-neutral-400:  #7a8179;
  --_palette-neutral-300:  #a0a79e;
  --_palette-neutral-200:  #c5ccc3;
  --_palette-neutral-100:  #e8ebe5;
  --_palette-neutral-50:   #f4f6f1;

  /* ============================================================
     SEMANTIC TOKENS — PUBLIC. Reference these everywhere.
     ============================================================ */

  /* Surfaces */
  --color-bg:             var(--_palette-neutral-950);
  --color-surface:        var(--_palette-neutral-900);
  --color-surface-raised: var(--_palette-neutral-850);
  --color-surface-sunken: var(--_palette-neutral-1000);

  /* Text */
  --color-text:           var(--_palette-neutral-100);
  --color-text-strong:    var(--_palette-neutral-50);
  --color-text-muted:     var(--_palette-neutral-400);
  --color-text-faint:     var(--_palette-neutral-500);

  /* Borders */
  --color-border:         var(--_palette-neutral-800);
  --color-border-strong:  var(--_palette-neutral-700);

  /* Primary — the brand's heaviest action color */
  --color-primary:        var(--_palette-primary-600);
  --color-primary-hover:  var(--_palette-primary-500);
  --color-primary-text:   var(--_palette-neutral-50);
  --color-primary-dim:    var(--_palette-primary-400);
  --color-primary-tint:   var(--_palette-primary-800);

  /* Secondary — brand's complementary color, full button weight */
  --color-secondary:        var(--_palette-secondary-600);
  --color-secondary-hover:  var(--_palette-secondary-500);
  --color-secondary-text:   var(--_palette-neutral-50);
  --color-secondary-dim:    var(--_palette-secondary-400);
  --color-secondary-tint:   var(--_palette-secondary-800);

  /* Muted — quiet neutral button for low-emphasis actions */
  --color-muted-bg:         var(--_palette-neutral-800);
  --color-muted-bg-hover:   var(--_palette-neutral-700);
  --color-muted-border:     var(--_palette-neutral-700);

  /* Info — brighter secondary for informational callouts */
  --color-info:           var(--_palette-secondary-400);
  --color-info-hover:     var(--_palette-secondary-300);
  --color-info-text:      var(--_palette-neutral-1000);

  /* Warning */
  --color-warning:        var(--_palette-warning-500);
  --color-warning-hover:  var(--_palette-warning-400);
  --color-warning-text:   var(--_palette-neutral-1000);

  /* Danger */
  --color-danger:         var(--_palette-warning-600);
  --color-danger-hover:   var(--_palette-warning-500);
  --color-danger-text:    var(--_palette-neutral-50);

  /* Link — uses secondary scale so blue is present throughout prose */
  --color-link:           var(--_palette-secondary-300);
  --color-link-hover:     var(--_palette-secondary-200);

  /* Focus ring */
  --color-focus:          var(--_palette-secondary-400);

  /* ============================================================
     TYPE SCALE
     ============================================================ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-serif: Georgia, "Times New Roman", serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

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

  /* ============================================================
     SPACING SCALE
     ============================================================ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --sidebar-width: 280px;
  --content-max:   72ch;
  --header-height: 56px;

  /* ============================================================
     RADIUS & TRANSITIONS
     ============================================================ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ============================================================
     Z-INDEX TOKENS
     ============================================================ */
  --z-header:         10;
  --z-sidebar-mobile: 20;
  --z-overlay:        30;
}