/* ============================================================
   CHAMA PRO — Design Tokens
   colors_and_type.css
   ============================================================ */

/* --- Google Fonts ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLORS
     Naming: --color-{role}-{tone}
     Base palette uses oklch for perceptual evenness.
     ============================================================ */

  /* Brand — Ember (the "chama") */
  --color-ember-50:  oklch(97% 0.020 50);
  --color-ember-100: oklch(93% 0.045 45);
  --color-ember-200: oklch(86% 0.090 42);
  --color-ember-300: oklch(78% 0.135 40);
  --color-ember-400: oklch(72% 0.160 39);
  --color-ember-500: oklch(68% 0.170 38);  /* primary */
  --color-ember-600: oklch(60% 0.165 36);
  --color-ember-700: oklch(50% 0.140 34);
  --color-ember-800: oklch(40% 0.110 32);
  --color-ember-900: oklch(30% 0.080 32);

  /* Neutral — warm ink (no cold blues, all neutrals share hue ~50-60) */
  --color-ink-50:  oklch(98% 0.008 70);   /* page bg */
  --color-ink-100: oklch(96% 0.010 65);
  --color-ink-150: oklch(93% 0.012 62);
  --color-ink-200: oklch(89% 0.014 60);
  --color-ink-300: oklch(80% 0.016 58);
  --color-ink-400: oklch(65% 0.018 55);
  --color-ink-500: oklch(50% 0.020 52);
  --color-ink-600: oklch(38% 0.020 50);
  --color-ink-700: oklch(28% 0.018 50);
  --color-ink-800: oklch(22% 0.016 50);   /* fg primary */
  --color-ink-900: oklch(15% 0.014 50);   /* fg max */

  /* AI surface — deep warm navy (used sparingly, for AI affordances) */
  --color-ai-50:   oklch(95% 0.020 250);
  --color-ai-100:  oklch(88% 0.040 250);
  --color-ai-300:  oklch(60% 0.080 250);
  --color-ai-500:  oklch(40% 0.080 250);
  --color-ai-700:  oklch(28% 0.060 250);  /* primary AI surface */
  --color-ai-900:  oklch(18% 0.040 250);

  /* Semantic */
  --color-success-500: oklch(62% 0.140 155);
  --color-success-50:  oklch(96% 0.025 155);
  --color-warning-500: oklch(75% 0.150 80);
  --color-warning-50:  oklch(97% 0.030 80);
  --color-danger-500:  oklch(58% 0.180 25);
  --color-danger-50:   oklch(96% 0.025 25);
  --color-info-500:    oklch(58% 0.120 230);
  --color-info-50:     oklch(96% 0.020 230);

  /* ============================================================
     SEMANTIC / ROLE TOKENS
     ============================================================ */

  /* Backgrounds */
  --bg-canvas:        var(--color-ink-50);
  --bg-surface:       #ffffff;
  --bg-surface-2:     var(--color-ink-100);
  --bg-surface-3:     var(--color-ink-150);
  --bg-inverse:       var(--color-ink-900);
  --bg-ai:            var(--color-ai-700);
  --bg-ai-soft:       var(--color-ai-50);
  --bg-ember:         var(--color-ember-500);
  --bg-ember-soft:    var(--color-ember-50);

  /* Foregrounds */
  --fg-default:       var(--color-ink-800);
  --fg-muted:         var(--color-ink-600);
  --fg-subtle:        var(--color-ink-500);
  --fg-faint:         var(--color-ink-400);
  --fg-inverse:       var(--color-ink-50);
  --fg-ember:         var(--color-ember-600);
  --fg-ai:            var(--color-ai-700);
  --fg-on-ember:      #ffffff;
  --fg-on-ai:         #ffffff;

  /* Borders */
  --border-subtle:    var(--color-ink-200);
  --border-default:   var(--color-ink-300);
  --border-strong:    var(--color-ink-400);
  --border-ember:     var(--color-ember-500);
  --border-ai:        var(--color-ai-700);

  /* Focus ring */
  --ring-ember:       0 0 0 3px oklch(68% 0.170 38 / 0.35);
  --ring-ai:          0 0 0 3px oklch(40% 0.080 250 / 0.35);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:   'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem-based, 16px root) */
  --text-2xs:  0.6875rem;  /* 11 */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 — body */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */
  --text-5xl:  4rem;       /* 64 */
  --text-6xl:  5.5rem;     /* 88 — display */

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

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono-tag: 0.06em;

  /* ============================================================
     SPACING — 4pt scale
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-20: 80px;
  --space-30: 120px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;   /* buttons */
  --radius-lg:  16px;   /* cards */
  --radius-xl:  24px;   /* sheets, big cards */
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — warm tint (oklch hue ~50)
     ============================================================ */
  --shadow-sm:    0 1px 2px 0 oklch(20% 0.020 50 / 0.06),
                  0 1px 1px 0 oklch(20% 0.020 50 / 0.04);
  --shadow-md:    0 4px 12px -2px oklch(20% 0.020 50 / 0.08),
                  0 2px 4px -1px oklch(20% 0.020 50 / 0.04);
  --shadow-lg:    0 16px 32px -8px oklch(20% 0.020 50 / 0.12),
                  0 4px 8px -2px oklch(20% 0.020 50 / 0.06);
  --shadow-xl:    0 32px 64px -16px oklch(20% 0.020 50 / 0.18),
                  0 8px 16px -4px oklch(20% 0.020 50 / 0.08);
  --shadow-ember: 0 8px 24px -8px oklch(68% 0.170 38 / 0.45);
  --shadow-inset: inset 0 1px 0 0 oklch(100% 0 0 / 0.5);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;
}

/* ============================================================
   ROLE STYLES — apply directly to common elements
   ============================================================ */

.t-display {
  font-family: var(--font-serif);
  font-size: var(--text-6xl);
  font-weight: var(--weight-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-default);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-default);
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-base);
  color: var(--fg-default);
}

.t-body-strong {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-base);
  color: var(--fg-default);
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-mono-tag);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-base);
  color: var(--fg-default);
}

.t-quote {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-style: italic;
  font-weight: var(--weight-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-default);
}