/* =============================================================
   Aarwell Design System — Colors & Type Tokens
   ============================================================= */

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

:root {
  /* ---------- COLORS: Foundation ---------- */
  /* Paper — warm cream backgrounds, lightest first */
  --paper-0: #FBF7F0;     /* lifted surfaces (popovers, modals) */
  --paper-1: #F6F1E8;     /* primary page background */
  --paper-2: #EFE9DD;     /* nested surfaces, hover fills */
  --paper-3: #E5DECF;     /* pressed fills, dividers on paper */

  /* Ink — warm near-black */
  --ink-100: #1F1B16;     /* primary text, headlines */
  --ink-72:  rgba(31,27,22,0.72);  /* secondary text */
  --ink-56:  rgba(31,27,22,0.56);  /* tertiary text, icons-default */
  --ink-40:  rgba(31,27,22,0.40);  /* placeholder, disabled */
  --ink-24:  rgba(31,27,22,0.24);  /* input borders */
  --ink-12:  rgba(31,27,22,0.12);  /* hairlines, separators */
  --ink-06:  rgba(31,27,22,0.06);  /* very subtle wells */

  /* Brand accent — terracotta */
  --terracotta:    #C75A3A;
  --terracotta-d:  #A8472B;       /* hover */
  --terracotta-dd: #8C381F;       /* press */
  --terracotta-l:  #E08866;       /* light fills */
  --terracotta-tint: #F4DACE;     /* very light bg */

  /* ---------- COLORS: Event categories (the wheel) ---------- */
  /* Muted, paired-tone (fill + text) */
  --cat-clay:      #B5573D;   --cat-clay-bg:    #F1D8CC;
  --cat-ochre:     #B8893A;   --cat-ochre-bg:   #F1E2C0;
  --cat-moss:      #6E8E4A;   --cat-moss-bg:    #DEE7CC;
  --cat-sage:      #4F8377;   --cat-sage-bg:    #D2E0DA;
  --cat-slate:     #4F6A85;   --cat-slate-bg:   #D3DCE6;
  --cat-plum:      #84507A;   --cat-plum-bg:    #E5D2DF;

  /* ---------- COLORS: Semantic ---------- */
  --bg:            var(--paper-1);
  --bg-elev:       var(--paper-0);
  --bg-sunken:     var(--paper-2);

  --fg:            var(--ink-100);
  --fg-muted:      var(--ink-72);
  --fg-subtle:     var(--ink-56);
  --fg-disabled:   var(--ink-40);

  --border:        var(--ink-12);
  --border-strong: var(--ink-24);

  --accent:        var(--terracotta);
  --accent-fg:     #FFFFFF;
  --accent-hover:  var(--terracotta-d);
  --accent-press:  var(--terracotta-dd);

  --success:       #4F7A4A;
  --warning:       #B8893A;
  --danger:        #B5573D;
  --info:          #4F6A85;

  /* ---------- TYPOGRAPHY: Families ---------- */
  --font-display: 'Fraunces', 'Cambria', 'Georgia', serif;
  --font-body:    'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHY: Scale ---------- */
  --fs-11: 11px;   --lh-11: 16px;
  --fs-12: 12px;   --lh-12: 16px;
  --fs-13: 13px;   --lh-13: 20px;
  --fs-14: 14px;   --lh-14: 20px;
  --fs-15: 15px;   --lh-15: 22px;
  --fs-16: 16px;   --lh-16: 24px;
  --fs-18: 18px;   --lh-18: 28px;
  --fs-20: 20px;   --lh-20: 28px;
  --fs-24: 24px;   --lh-24: 32px;
  --fs-30: 30px;   --lh-30: 38px;
  --fs-36: 36px;   --lh-36: 44px;
  --fs-48: 48px;   --lh-48: 56px;
  --fs-64: 64px;   --lh-64: 70px;
  --fs-80: 80px;   --lh-80: 84px;

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

  /* ---------- RADII ---------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm:    0 1px 2px rgba(31,27,22,0.06), 0 1px 1px rgba(31,27,22,0.04);
  --shadow-md:    0 4px 12px rgba(31,27,22,0.08), 0 2px 4px rgba(31,27,22,0.04);
  --shadow-lg:    0 16px 40px rgba(31,27,22,0.12), 0 4px 12px rgba(31,27,22,0.06);
  --shadow-inner: inset 0 1px 2px rgba(31,27,22,0.08);
  --ring-focus:   0 0 0 2px var(--paper-1), 0 0 0 4px var(--terracotta);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;
  --dur-wheel:   600ms;
}

/* =============================================================
   Semantic element styles
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: var(--lh-15);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display (serif, Fraunces with optical sizing) */
.display-xl,
.display-l,
.display-m,
.display-s,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--fg);
}

.display-xl { font-size: var(--fs-80); line-height: var(--lh-80); font-variation-settings: "opsz" 144; letter-spacing: -0.03em; }
.display-l  { font-size: var(--fs-64); line-height: var(--lh-64); font-variation-settings: "opsz" 120; letter-spacing: -0.025em; }
.display-m  { font-size: var(--fs-48); line-height: var(--lh-48); font-variation-settings: "opsz" 96;  letter-spacing: -0.02em; }
.display-s  { font-size: var(--fs-36); line-height: var(--lh-36); font-variation-settings: "opsz" 72;  letter-spacing: -0.018em; }

/* Headings (sans, Inter Tight) — for UI / dense surfaces */
.h1, .h2, .h3, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.h1 { font-size: var(--fs-30); line-height: var(--lh-30); }
.h2 { font-size: var(--fs-24); line-height: var(--lh-24); }
.h3 { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; }
.h4 { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 600; }

/* Body */
.body-l { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--fg); }
.body   { font-size: var(--fs-15); line-height: var(--lh-15); color: var(--fg); }
.body-s { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--fg-muted); }

p { font-size: var(--fs-15); line-height: var(--lh-15); color: var(--fg); margin: 0 0 var(--sp-3) 0; text-wrap: pretty; }

/* Eyebrow / overline — tiny ALL CAPS */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  line-height: var(--lh-11);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Mono — week numbers, dates, code */
code, .mono, .week {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-feature-settings: "tnum";
}
.week {
  font-weight: 500;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
}

/* Labels (form fields, table headers) */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: 500;
  color: var(--fg-muted);
}

/* Links */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-24);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              text-decoration-thickness var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--fg); }

/* Focus ring — global */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 100ms !important;
  }
}