/* =========================================================================
   Ekilog — Design Tokens
   Single source of truth for color, type, spacing, radii, shadows, motion.
   Mirrors the Tailwind config in the brief; safe to import in plain HTML.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ------------------------- Color — base palette ------------------------ */
  --cream-50:   #FAF7F2;
  --cream-100:  #F2EDE3;
  --cream-200:  #E6E1D7;
  --cream-300:  #D6CFBE;

  --forest-50:  #E8F0EA;
  --forest-100: #C5D6CA;
  --forest-200: #9BBAA3;
  --forest-500: #2F5D3F;
  --forest-600: #264D33;
  --forest-700: #1D3A26;

  --cognac-50:  #F4E9DD;
  --cognac-100: #E5D0B8;
  --cognac-500: #A8693B;
  --cognac-600: #8E5630;

  --ink-400:    #A6A8A4;
  --ink-600:    #6B6F6B;
  --ink-900:    #1F2421;

  --success:    #3F7A57;
  --warning:    #C8932F;
  --danger:     #B14A3D;
  --info:       #4A6B82;

  /* ------------------------- Color — semantic ---------------------------- */
  --bg-page:        var(--cream-50);
  --bg-surface:     #FFFFFF;
  --bg-surface-alt: var(--cream-100);

  --fg-primary:     var(--ink-900);   /* body text */
  --fg-secondary:   var(--ink-600);   /* meta / labels */
  --fg-disabled:    var(--ink-400);
  --fg-on-forest:   var(--cream-50);  /* text on primary buttons / forest bg */
  --fg-on-cognac:   var(--cream-50);

  --border-default: var(--cream-300); /* on cream-50 */
  --border-soft:    var(--cream-200); /* on white card */
  --border-strong:  var(--ink-900);

  --action-primary:        var(--forest-500);
  --action-primary-hover:  var(--forest-600);
  --action-primary-press:  var(--forest-700);
  --action-accent:         var(--cognac-500);
  --action-accent-hover:   var(--cognac-600);

  --focus-ring:     rgb(47 93 63 / 0.50);   /* forest-500 / 50 */

  /* --------------------------------- Type -------------------------------- */
  --font-display:   'Fraunces', ui-serif, Georgia, serif;
  --font-sans:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sizes (Tailwind scale) */
  --text-xs:    0.75rem;   /* 12 */
  --text-sm:    0.875rem;  /* 14 */
  --text-base:  1rem;      /* 16 */
  --text-lg:    1.125rem;  /* 18 */
  --text-xl:    1.25rem;   /* 20 */
  --text-2xl:   1.5rem;    /* 24 */
  --text-3xl:   1.875rem;  /* 30 */
  --text-4xl:   2.25rem;   /* 36 */
  --text-5xl:   3rem;      /* 48 */

  /* Line-heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-relaxed: 1.625;

  /* Letter-spacing */
  --tracking-tight: -0.02em;
  --tracking-wide:   0.04em;

  /* ------------------------------ Spacing -------------------------------- */
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* -------------------------------- Radii -------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;   /* rounded-lg — inputs, buttons */
  --radius-lg:   12px;  /* rounded-xl — cards */
  --radius-xl:   16px;  /* rounded-2xl — modal, hero */
  --radius-pill: 9999px;

  /* ------------------------------ Shadows -------------------------------- */
  --shadow-soft: 0 1px 2px 0 rgb(31 36 33 / 0.04),
                 0 1px 3px 0 rgb(31 36 33 / 0.06);
  --shadow-card: 0 4px 12px -2px rgb(31 36 33 / 0.08),
                 0 2px 6px -1px rgb(31 36 33 / 0.06);
  --shadow-modal: 0 24px 48px -12px rgb(31 36 33 / 0.18),
                  0 8px 16px -4px rgb(31 36 33 / 0.10);

  /* ------------------------------ Motion --------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 60ms;
  --duration-fast:    120ms;
  --duration-base:    150ms;
  --duration-modal:   200ms;

  /* ------------------------------ Layout --------------------------------- */
  --gutter-mobile:  1rem;   /* px-4 */
  --gutter-tablet:  2rem;   /* px-8 */
  --gutter-desktop: 3rem;   /* px-12 */
  --max-content:    72rem;  /* max-w-6xl */
  --tap-min:        44px;
}

/* =========================================================================
   Base — element defaults
   ========================================================================= */

html { font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-page); }

body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0;
}
@media (min-width: 1024px) { h1, .h1 { font-size: var(--text-5xl); } }

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0;
}
@media (min-width: 1024px) { h2, .h2 { font-size: var(--text-3xl); } }

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0;
}

p {
  margin: 0;
  color: var(--fg-primary);
  line-height: var(--lh-relaxed);
}

/* Meta / eyebrow / label */
.label,
.meta {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-wide);
}
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Numbers — always tabular */
.num,
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* Links */
a {
  color: var(--forest-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--forest-700); }
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring), 0 0 0 4px var(--bg-page);
  border-radius: var(--radius-sm);
}

/* Code */
code, kbd, pre { font-family: var(--font-mono); font-size: 0.95em; }

/* Selection */
::selection { background: var(--forest-100); color: var(--ink-900); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}