/* ============================================================
   Ann Arbor Appeals Design System — Colors & Typography
   ============================================================
   Warm, empowering palette. Humanist type.
   Primary: Citrus Orange — confidence, warmth, action (logo peel)
   Accent:  Emerald Green — growth, care, AI companion (logo leaf)
   Neutral: Cream/Stone — approachable, clean backgrounds
   ============================================================ */

/* ---------- Brand Fonts ---------- */
@font-face {
  font-family: 'Hackensack';
  src: url('../fonts/Hackensack-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hackensack';
  src: url('../fonts/Hackensack-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Body + mono webfonts are self-hosted — see fonts.css (CSP: font-src 'self') */

/* ---------- Color Tokens ---------- */
:root {

  /* --- Primary: Citrus Orange (logo peel — bright orange → deep red) --- */
  --color-primary-50:  oklch(97% 0.022 67);
  --color-primary-100: oklch(94% 0.052 65);
  --color-primary-200: oklch(88% 0.10 62);
  --color-primary-300: oklch(80% 0.14 58);
  --color-primary-400: oklch(72% 0.175 55);   /* bright juicy peel ≈ #fb7e00 */
  --color-primary-500: oklch(64% 0.205 50);   /* main brand orange — usable fill */
  --color-primary-600: oklch(56% 0.215 44);
  --color-primary-700: oklch(49% 0.21 38);    /* deep red-orange ≈ #da1600 */
  --color-primary-800: oklch(40% 0.18 34);
  --color-primary-900: oklch(29% 0.13 32);

  /* --- Green / Emerald (logo leaf — growth, care, AI companion) --- */
  --color-green-50:  oklch(97% 0.02 158);
  --color-green-100: oklch(93% 0.05 158);
  --color-green-200: oklch(86% 0.09 157);
  --color-green-300: oklch(77% 0.125 156);
  --color-green-400: oklch(67% 0.15 156);
  --color-green-500: oklch(58% 0.155 158);    /* main leaf green ≈ #009342 */
  --color-green-600: oklch(50% 0.14 158);
  --color-green-700: oklch(41% 0.115 159);
  --color-green-800: oklch(32% 0.09 160);
  --color-green-900: oklch(23% 0.065 161);

  /* --- Citrus accent (warm highlight pulled from the peel) --- */
  --color-citrus-50:  oklch(98% 0.025 78);
  --color-citrus-100: oklch(95% 0.07 78);
  --color-citrus-200: oklch(90% 0.12 76);
  --color-citrus-300: oklch(85% 0.155 74);
  --color-citrus-400: oklch(80% 0.17 70);
  --color-citrus-500: oklch(76% 0.18 66);     /* juicy tangerine highlight */
  --color-citrus-600: oklch(68% 0.19 60);
  --color-citrus-700: oklch(58% 0.20 52);

  /* --- Neutral / Stone --- */
  --color-neutral-0:   oklch(100% 0 0);
  --color-neutral-50:  oklch(98% 0.005 60);
  --color-neutral-100: oklch(96% 0.008 60);
  --color-neutral-200: oklch(91% 0.010 60);
  --color-neutral-300: oklch(83% 0.012 60);
  --color-neutral-400: oklch(70% 0.010 60);
  --color-neutral-500: oklch(58% 0.010 60);
  --color-neutral-600: oklch(46% 0.010 60);
  --color-neutral-700: oklch(35% 0.008 60);
  --color-neutral-800: oklch(25% 0.006 60);
  --color-neutral-900: oklch(16% 0.005 60);
  --color-neutral-950: oklch(10% 0.003 60);

  /* --- Semantic Status Colors --- */
  --color-success-light:  oklch(93% 0.06 158);
  --color-success:        oklch(56% 0.155 158);
  --color-success-dark:   oklch(41% 0.115 159);

  --color-warning-light:  oklch(94% 0.08 80);
  --color-warning:        oklch(72% 0.18 80);
  --color-warning-dark:   oklch(52% 0.16 80);

  --color-error-light:    oklch(94% 0.06 25);
  --color-error:          oklch(53% 0.22 25);
  --color-error-dark:     oklch(38% 0.18 25);

  --color-info-light:     oklch(93% 0.05 245);
  --color-info:           oklch(56% 0.18 245);
  --color-info-dark:      oklch(40% 0.15 245);

  /* ============================================================
     Semantic Roles
     ============================================================ */

  /* Backgrounds */
  --bg-base:        var(--color-neutral-50);    /* main page bg — warm cream */
  --bg-surface:     var(--color-neutral-0);     /* cards, panels */
  --bg-subtle:      var(--color-neutral-100);   /* section tints */
  --bg-muted:       var(--color-neutral-200);   /* inactive states */
  --bg-inverse:     var(--color-neutral-900);   /* dark surfaces */
  --bg-primary:     var(--color-primary-500);   /* brand fills */
  --bg-primary-sub: var(--color-primary-50);    /* tinted bg behind primary elements */
  --bg-ai:          var(--color-green-50);      /* AI companion areas — leaf green */
  --bg-ice:         var(--color-green-50);      /* calm/care areas */

  /* Foregrounds / Text */
  --fg-primary:     var(--color-neutral-900);   /* headings, primary text */
  --fg-secondary:   var(--color-neutral-700);   /* body copy */
  --fg-tertiary:    var(--color-neutral-500);   /* captions, hints */
  --fg-disabled:    var(--color-neutral-400);   /* disabled text */
  --fg-inverse:     var(--color-neutral-0);     /* text on dark surfaces */
  --fg-brand:       var(--color-primary-600);   /* brand-colored text */
  --fg-ai:          var(--color-green-700);     /* AI companion text */
  --fg-link:        var(--color-primary-600);   /* hyperlinks */
  --fg-link-hover:  var(--color-primary-700);

  /* Borders */
  --border-subtle:  var(--color-neutral-200);
  --border-default: var(--color-neutral-300);
  --border-strong:  var(--color-neutral-500);
  --border-brand:   var(--color-primary-400);
  --border-ai:      var(--color-green-300);

  /* Interactive */
  --interactive-primary:       var(--color-primary-500);
  --interactive-primary-hover: var(--color-primary-600);
  --interactive-primary-press: var(--color-primary-700);
  --interactive-secondary:     var(--color-neutral-200);
  --interactive-secondary-hover: var(--color-neutral-300);
  --interactive-ai:            var(--color-green-600);
  --interactive-ai-hover:      var(--color-green-700);

  /* ============================================================
     Typography Tokens
     ============================================================ */

  /* Families */
  --font-display: 'Hackensack', 'DM Serif Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Scale (Major Third — 1.25x) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */
  --text-6xl:  4.5rem;     /* 72px */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.12em;

  /* ============================================================
     Spacing Scale (4px base)
     ============================================================ */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ============================================================
     Border Radius
     ============================================================ */
  --radius-sm:   0.25rem;   /* 4px — tight, form inputs */
  --radius-md:   0.5rem;    /* 8px — buttons, badges */
  --radius-lg:   0.75rem;   /* 12px — cards */
  --radius-xl:   1rem;      /* 16px — modals, panels */
  --radius-2xl:  1.5rem;    /* 24px — chat bubbles */
  --radius-full: 9999px;    /* pill — tags, avatars */

  /* ============================================================
     Shadows / Elevation
     ============================================================ */
  --shadow-xs:  0 1px 2px oklch(0% 0 0 / 0.05);
  --shadow-sm:  0 1px 3px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md:  0 4px 6px oklch(0% 0 0 / 0.07), 0 2px 4px oklch(0% 0 0 / 0.05);
  --shadow-lg:  0 10px 15px oklch(0% 0 0 / 0.08), 0 4px 6px oklch(0% 0 0 / 0.05);
  --shadow-xl:  0 20px 25px oklch(0% 0 0 / 0.10), 0 8px 10px oklch(0% 0 0 / 0.06);
  --shadow-2xl: 0 25px 50px oklch(0% 0 0 / 0.15);
  --shadow-inner: inset 0 2px 4px oklch(0% 0 0 / 0.06);

  /* Warm-tinted shadow for brand elements */
  --shadow-brand: 0 8px 24px oklch(62% 0.20 50 / 0.25);
  --shadow-ai:    0 8px 24px oklch(56% 0.155 158 / 0.22);

  /* ============================================================
     Transitions
     ============================================================ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 220ms; /* @kind other */
  --duration-slow:   380ms; /* @kind other */

  /* ============================================================
     Z-Index Scale
     ============================================================ */
  --z-below:   -1; /* @kind other */
  --z-base:     0; /* @kind other */
  --z-raised:   10; /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-overlay:  300; /* @kind other */
  --z-modal:    400; /* @kind other */
  --z-toast:    500; /* @kind other */
  --z-tooltip:  600; /* @kind other */
}

/* ============================================================
   Semantic Element Styles
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
  background-color: var(--bg-base);
}

/* Display headings — DM Serif Display */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}

/* Semantic headings — Plus Jakarta Sans */
h1, .h1 {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-tertiary);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-secondary);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-brand);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: var(--weight-medium);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  color: var(--fg-brand);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: oklch(62% 0.20 50 / 0.3);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover {
  color: var(--fg-link-hover);
  text-decoration-color: oklch(54% 0.21 42 / 0.6);
}