/* ------------------------------------------------------------------
   Ari-community — Design tokens (merged: colors + typography + spacing)
   Fonts are loaded via <link> in index.html, not @import (perf).
------------------------------------------------------------------ */
:root {
  /* Primary: Lyft Pink */
  --pink-50:  #FFF0FA;
  --pink-100: #FFD6F1;
  --pink-200: #FF9FE0;
  --pink-300: #FF5CCF;
  --pink-500: #FF00BF;
  --pink-600: #D600A0;
  --pink-700: #A6007C;

  /* Neutral ramp (navy-tinted) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F3F3F7;
  --neutral-100: #E9E9F0;
  --neutral-200: #DCDCE6;
  --neutral-300: #C4C4D4;
  --neutral-400: #9C9CB3;
  --neutral-500: #6E6E88;
  --neutral-600: #52526B;
  --neutral-700: #3A3A4D;
  --neutral-800: #21212E;
  --neutral-900: #09091A;

  /* System / status */
  --green-50:  #E4F7EE;
  --green-500: #11A75C;
  --green-600: #0C8949;
  --amber-50:  #FFF4E0;
  --amber-500: #F5A623;
  --amber-600: #D8890B;
  --red-50:    #FDEAE9;
  --red-500:   #E5322D;
  --red-600:   #C21F1B;

  /* Brand: Ari editorial (from the photo book) */
  --ari-paper:   #E6E1C8;
  --ari-bougain: #C6417E;
  --ari-court:   #3E5C50;
  --ari-espresso:#3B2A22;

  /* Semantic aliases.
     --color-primary is pink-600: white text passes WCAG AA (4.7:1);
     pink-500 stays for focus rings and accents. */
  --color-primary:        var(--pink-600);
  --color-primary-hover:  var(--pink-700);
  --color-primary-press:  var(--pink-700);
  --color-on-primary:     var(--neutral-0);
  --color-ink:            var(--neutral-900);
  --color-on-ink:         var(--neutral-0);
  --bg-page:              var(--neutral-0);
  --surface-card:         var(--neutral-50);
  --surface-raised:       var(--neutral-0);
  --surface-sunken:       var(--neutral-100);
  --text-primary:         var(--neutral-900);
  --text-secondary:       var(--neutral-600);
  --text-tertiary:        var(--neutral-400); /* decorative icons only, never text */
  --text-link:            var(--pink-600);
  --text-on-dark:         var(--neutral-0);
  --border-subtle:        var(--neutral-200);
  --border-strong:        var(--neutral-300);
  --border-focus:         var(--pink-500);
  --border-w:             1.5px;
  --color-success:        var(--green-500);
  --color-success-bg:     var(--green-50);
  --color-warning:        var(--amber-500);
  --color-warning-bg:     var(--amber-50);
  --color-danger:         var(--red-500);
  --color-danger-bg:      var(--red-50);

  /* Typography */
  --font-ui:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-th:    'IBM Plex Sans Thai Looped', 'Hanken Grotesk', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif; /* webfont dropped: unused */
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  --fs-display: 48px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 18px;
  --fs-body-lg: 17px; --fs-body: 15px; --fs-label: 14px; --fs-caption: 13px; --fs-micro: 11px;

  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --lh-th-tight: 1.5; --lh-th: 1.7; /* Thai stacks vowels/tone marks; needs air */
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.04em;

  --type-display-family: var(--font-ui);   --type-display-weight: var(--fw-black);
  --type-heading-family: var(--font-ui);   --type-heading-weight: var(--fw-bold);
  --type-body-family: var(--font-ui);
  --type-numeric-family: var(--font-mono);

  /* Spacing, radius, shadow. 4px grid, 44px min targets. */
  --space-0: 0; --space-25: 2px; --space-50: 4px; --space-100: 8px;
  --space-150: 12px; --space-200: 16px; --space-250: 20px; --space-300: 24px;
  --space-400: 32px; --space-500: 40px; --space-600: 48px; --space-800: 64px;
  --space-1000: 80px; --space-1200: 96px;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --target-min: 44px;

  --shadow-xs: 0 1px 2px rgba(9, 9, 26, 0.06);
  --shadow-sm: 0 2px 6px rgba(9, 9, 26, 0.08);
  --shadow-md: 0 6px 16px rgba(9, 9, 26, 0.10);
  --shadow-lg: 0 12px 32px rgba(9, 9, 26, 0.14);
  --shadow-sheet: 0 -8px 32px rgba(9, 9, 26, 0.16);

  --focus-ring: 0 0 0 3px var(--pink-200);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-base: 0; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200;
}