/**
 * tichr Design System — CSS Tokens
 * Version 1.0 — March 2026
 * 
 * Import this file at the top of your CSS:
 * @import 'tichr-tokens.css';
 */

:root {
  /* ============================================================
     COLORS — INK (warm near-black)
     Primary text, dark surfaces, authority
     ============================================================ */
  --tichr-ink-900: #0F0D0B;
  --tichr-ink-800: #1A1714;
  --tichr-ink-700: #2E2A24;
  --tichr-ink-600: #3D3830;
  --tichr-ink-500: #524D45;
  --tichr-ink-400: #736D64;
  --tichr-ink-300: #8C8278;
  --tichr-ink-200: #B0A89E;
  --tichr-ink-100: #D4CFC8;
  --tichr-ink-50:  #EDE9E4;

  /* ============================================================
     COLORS — PARCHMENT (warm off-white)
     Primary background surface
     ============================================================ */
  --tichr-parchment-900: #C8BFB0;
  --tichr-parchment-800: #D9D2C5;
  --tichr-parchment-700: #E5DDD0;
  --tichr-parchment-600: #EDE7D9;
  --tichr-parchment-500: #F2EDE3;
  --tichr-parchment-400: #F5F0E8;
  --tichr-parchment-300: #F8F4EE;
  --tichr-parchment-200: #FAF8F3;
  --tichr-parchment-100: #FDFCF9;
  --tichr-parchment-50:  #FFFFFF;

  /* ============================================================
     COLORS — TEAL (dusty teal)
     Accent — CTAs, active states, highlights ONLY
     ============================================================ */
  --tichr-teal-900: #1A2F2F;
  --tichr-teal-800: #243F3F;
  --tichr-teal-700: #2E5252;
  --tichr-teal-600: #3D6B6B;
  --tichr-teal-500: #4E8080;
  --tichr-teal-400: #6A9A9A;
  --tichr-teal-300: #8CB4B4;
  --tichr-teal-200: #B3CECE;
  --tichr-teal-100: #D4E4E4;
  --tichr-teal-50:  #EBF2F2;

  /* ============================================================
     COLORS — STATUS
     ============================================================ */
  --tichr-success:       #2D6A4F;
  --tichr-success-light: #D8EFDF;
  --tichr-warning:       #3D6B6B;
  --tichr-warning-light: #D4E4E4;
  --tichr-error:         #9B2335;
  --tichr-error-light:   #F2D6DA;
  --tichr-info:          #2C5F7A;
  --tichr-info-light:    #D5E8F0;

  /* ============================================================
     SEMANTIC TOKENS
     ============================================================ */
  --tichr-surface:         var(--tichr-parchment-400);
  --tichr-surface-raised:  var(--tichr-parchment-300);
  --tichr-surface-overlay: var(--tichr-parchment-50);
  --tichr-surface-dark:    var(--tichr-ink-800);
  --tichr-surface-dark-raised: var(--tichr-ink-700);

  --tichr-text-primary:    var(--tichr-ink-800);
  --tichr-text-secondary:  var(--tichr-ink-500);
  --tichr-text-tertiary:   var(--tichr-ink-300);
  --tichr-text-inverse:    var(--tichr-parchment-400);
  --tichr-text-accent:     var(--tichr-teal-600);

  --tichr-border-subtle:   var(--tichr-parchment-800);
  --tichr-border:          var(--tichr-parchment-900);
  --tichr-border-strong:   var(--tichr-ink-200);

  --tichr-interactive:       var(--tichr-teal-600);
  --tichr-interactive-hover: var(--tichr-teal-700);
  --tichr-interactive-text:  var(--tichr-parchment-400);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --tichr-font-display: 'Playfair Display', Georgia, serif;
  --tichr-font-body:    'DM Sans', system-ui, sans-serif;
  --tichr-font-mono:    'DM Mono', 'Courier New', monospace;

  /* Font Sizes */
  --tichr-type-display-xl: 4.5rem;   /* 72px */
  --tichr-type-display-lg: 3.375rem; /* 54px */
  --tichr-type-display-md: 2.5rem;   /* 40px */
  --tichr-type-h1:         2rem;     /* 32px */
  --tichr-type-h2:         1.5rem;   /* 24px */
  --tichr-type-h3:         1.25rem;  /* 20px */
  --tichr-type-h4:         1rem;     /* 16px */
  --tichr-type-body-lg:    1.125rem; /* 18px */
  --tichr-type-body:       1rem;     /* 16px */
  --tichr-type-body-sm:    0.875rem; /* 14px */
  --tichr-type-caption:    0.75rem;  /* 12px */
  --tichr-type-mono:       0.875rem; /* 14px */

  /* Line Heights */
  --tichr-lh-display: 1.1;
  --tichr-lh-heading: 1.25;
  --tichr-lh-body:    1.6;
  --tichr-lh-ui:      1.4;

  /* Letter Spacing */
  --tichr-ls-display: -0.02em;
  --tichr-ls-body:    0em;
  --tichr-ls-label:   0.08em;

  /* ============================================================
     SPACING (4px base grid)
     ============================================================ */
  --tichr-sp-1:  4px;
  --tichr-sp-2:  8px;
  --tichr-sp-3:  12px;
  --tichr-sp-4:  16px;
  --tichr-sp-5:  20px;
  --tichr-sp-6:  24px;
  --tichr-sp-8:  32px;
  --tichr-sp-10: 40px;
  --tichr-sp-12: 48px;
  --tichr-sp-16: 64px;
  --tichr-sp-20: 80px;
  --tichr-sp-24: 96px;
  --tichr-sp-32: 128px;

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --tichr-shadow-sm:    0 1px 3px rgba(26,23,20,0.08), 0 1px 2px rgba(26,23,20,0.06);
  --tichr-shadow-md:    0 4px 12px rgba(26,23,20,0.10), 0 2px 4px rgba(26,23,20,0.06);
  --tichr-shadow-lg:    0 8px 24px rgba(26,23,20,0.12), 0 4px 8px rgba(26,23,20,0.06);
  --tichr-shadow-xl:    0 20px 48px rgba(26,23,20,0.16), 0 8px 16px rgba(26,23,20,0.08);
  --tichr-shadow-inner: inset 0 2px 4px rgba(26,23,20,0.08);

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --tichr-radius-none: 0px;
  --tichr-radius-sm:   2px;
  --tichr-radius-md:   4px;
  --tichr-radius-lg:   6px;
  --tichr-radius-full: 9999px;

  /* ============================================================
     ANIMATION
     ============================================================ */
  --tichr-dur-instant:    80ms;
  --tichr-dur-fast:       150ms;
  --tichr-dur-normal:     250ms;
  --tichr-dur-slow:       400ms;
  --tichr-dur-deliberate: 650ms;

  --tichr-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --tichr-ease-enter:   cubic-bezier(0.0, 0, 0.2, 1);
  --tichr-ease-exit:    cubic-bezier(0.4, 0, 1, 1);
  --tichr-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     SHORTHAND ALIASES (for dashboard-home compatibility)
     ============================================================ */
  --ink-800: #1A1714; --ink-700: #2E2A24; --ink-600: #3D3830;
  --ink-500: #524D45; --ink-400: #736D64; --ink-300: #8C8278;
  --ink-200: #B0A89E; --ink-100: #D4CFC8;
  --p9: #C8BFB0; --p8: #D9D2C5; --p7: #E5DDD0; --p6: #EDE7D9;
  --p5: #F2EDE3; --p4: #F5F0E8; --p3: #F8F4EE; --p2: #FAF8F3;
  --p1: #FDFCF9; --p0: #FFFFFF;
  --t7: #2E5252; --t6: #3D6B6B; --t4: #6A9A9A; --t3: #8CB4B4;
  --t2: #B3CECE; --t1: #D4E4E4; --t0: #EBF2F2;
  --gn: #2D6A4F; --gnl: #D8EFDF;
  --am: #8B5E00; --aml: #FEF3C7;
  --vi: #6B5B95; --vil: #EDE8F8;
  --fd: 'Playfair Display', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --fm: 'DM Mono', monospace;
  --sh2: 0 4px 12px rgba(26,23,20,.10), 0 2px 4px rgba(26,23,20,.05);
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   DARK MODE TOKENS
   Matches both: html.dark (Tailwind toggle) and [data-theme="dark"]
   ============================================================ */
html.dark, [data-theme="dark"] {
  --tichr-surface:         var(--tichr-ink-900);
  --tichr-surface-raised:  var(--tichr-ink-800);
  --tichr-surface-overlay: var(--tichr-ink-700);
  --tichr-surface-dark:    var(--tichr-ink-900);

  --tichr-text-primary:    var(--tichr-parchment-400);
  --tichr-text-secondary:  var(--tichr-ink-200);
  --tichr-text-tertiary:   var(--tichr-ink-300);
  --tichr-text-inverse:    var(--tichr-ink-800);
  --tichr-text-accent:     var(--tichr-teal-400);

  --tichr-border-subtle:   var(--tichr-ink-600);
  --tichr-border:          var(--tichr-ink-500);
  --tichr-border-strong:   var(--tichr-ink-400);

  --tichr-interactive:       var(--tichr-teal-500);
  --tichr-interactive-hover: var(--tichr-teal-400);

  --tichr-success-light: #163424;
  --tichr-error-light:   #3d1018;

  /* Shorthand alias overrides for dark mode */
  --ink-800: #F5F0E8; --ink-700: #EDE7D9; --ink-600: #D9D2C5;
  --ink-500: #B0A89E; --ink-400: #8C8278; --ink-300: #736D64;
  --ink-200: #524D45; --ink-100: #3D3830;
  --p9: #2E2A24; --p8: #3D3830; --p7: #524D45; --p6: #3D3830;
  --p5: #2E2A24; --p4: #1A1714; --p3: #0F0D0B; --p2: #0A0907;
  --p1: #060504; --p0: #1A1714;
  --t6: #6A9A9A; --t4: #4E8080; --t3: #3D6B6B;
  --t2: #2E5252; --t1: #243F3F; --t0: #1A2F2F;
  --gnl: #163424;
  --aml: #3D2F00;
  --vil: #2A2340;
}