/* Grove — Design Tokens
   Playful biome aesthetic: warm, earthy, illustrated forest.
   Palette is built in OKLCH for harmonious light/dark relationships.
*/

:root {
  /* ——— Forest Palette (mossy, living) ——— */
  --moss-50:  #f2f6ed;
  --moss-100: #e3ecd6;
  --moss-200: #c6d9ae;
  --moss-300: #9fbe7c;
  --moss-400: #7aa357;
  --moss-500: #5c8a3e;
  --moss-600: #466d2f;
  --moss-700: #355425;
  --moss-800: #27401d;
  --moss-900: #1a2c14;

  /* ——— Warm bark & soil neutrals ——— */
  --bark-50:  #f8f4ee;
  --bark-100: #ece3d4;
  --bark-200: #d9c7a8;
  --bark-300: #c0a579;
  --bark-400: #a2845a;
  --bark-500: #816947;
  --bark-600: #5f4d35;
  --bark-700: #443627;
  --bark-800: #2e241a;
  --bark-900: #1c1510;

  /* ——— Sky & accents ——— */
  --sky-100:   #e9f0f4;
  --sky-200:   #c9dae2;
  --sky-300:   #9cbfcc;
  --dawn:      #f4a261;   /* sunrise, strain */
  --berry:     #c44b63;   /* alerts, low recovery */
  --bloom:     #e7b3c6;   /* soft highlight */
  --mushroom:  #b07658;   /* rare accent */

  /* ——— Semantic (default: moss = primary) ——— */
  --accent-50:  var(--moss-50);
  --accent-100: var(--moss-100);
  --accent-200: var(--moss-200);
  --accent-300: var(--moss-300);
  --accent-400: var(--moss-400);
  --accent-500: var(--moss-500);
  --accent-600: var(--moss-600);
  --accent-700: var(--moss-700);
  --accent-800: var(--moss-800);
  --accent-900: var(--moss-900);

  /* ——— Surfaces (warm off-white, not clinical) ——— */
  --bg:           #f6f2e9;   /* parchment */
  --bg-soft:      #efe9db;
  --bg-raised:    #ffffff;
  --bg-inverse:   #1a2c14;
  --surface-tint: rgba(70, 109, 47, 0.04);

  /* ——— Ink ——— */
  --ink-900:  #1a2c14;
  --ink-800:  #27401d;
  --ink-700:  #355425;
  --ink-600:  #466d2f;
  --ink-500:  #5f7a4a;
  --ink-400:  #8a9a78;
  --ink-300:  #b3bfa7;
  --ink-200:  #d4dbcc;
  --ink-100:  #e8ede3;
  --ink-on-dark: #f2f6ed;

  /* ——— Borders ——— */
  --border:        rgba(26, 44, 20, 0.10);
  --border-strong: rgba(26, 44, 20, 0.18);
  --border-dark:   rgba(242, 246, 237, 0.12);

  /* ——— Radii ——— */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* ——— Shadow (soft, earthy, never harsh) ——— */
  --shadow-xs: 0 1px 2px rgba(44, 64, 29, 0.06);
  --shadow-sm: 0 2px 6px rgba(44, 64, 29, 0.08);
  --shadow-md: 0 10px 30px -12px rgba(44, 64, 29, 0.18), 0 2px 6px rgba(44, 64, 29, 0.06);
  --shadow-lg: 0 30px 60px -20px rgba(44, 64, 29, 0.25), 0 6px 12px rgba(44, 64, 29, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ——— Spacing scale (4px base) ——— */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* ——— Type ——— */
  --font-display: "Fraunces", "Canela", "Cooper BT", Georgia, serif;
  --font-body:    "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Fluid type scale — clamp(min, fluid, max) */
  --t-display-xl: clamp(48px, 7.5vw, 112px);
  --t-display-lg: clamp(40px, 5.5vw, 80px);
  --t-display-md: clamp(32px, 4vw, 56px);
  --t-display-sm: clamp(26px, 3vw, 40px);
  --t-title:      22px;
  --t-body-lg:    19px;
  --t-body:       17px;
  --t-body-sm:    15px;
  --t-caption:    13px;
  --t-micro:      11px;

  /* Motion */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-in:    cubic-bezier(.8, 0, .8, .2);
  --ease-breath: cubic-bezier(.5, 0, .5, 1);
  --t-fast:   140ms;
  --t-med:    280ms;
  --t-slow:   560ms;
  --t-epic:   1200ms;

  --max-w: 1200px;
}

/* ——— Accent variants switchable by data-accent ——— */
[data-accent="dawn"] {
  --accent-300: #f5c89a; --accent-400: #f2a76a;
  --accent-500: #e68943; --accent-600: #c76d2c;
  --accent-700: #9b5220; --accent-800: #703a17;
}
[data-accent="berry"] {
  --accent-300: #e8a0b0; --accent-400: #d97086;
  --accent-500: #c44b63; --accent-600: #a3344c;
  --accent-700: #7c2539; --accent-800: #551827;
}
[data-accent="pine"] {
  --accent-300: #88b8a8; --accent-400: #5a9784;
  --accent-500: #3a7a66; --accent-600: #2a5d4e;
  --accent-700: #1e4338; --accent-800: #142d25;
}
[data-accent="bark"] {
  --accent-300: #c7a87c; --accent-400: #a2845a;
  --accent-500: #816947; --accent-600: #5f4d35;
  --accent-700: #443627; --accent-800: #2e241a;
}

/* ——— Base ——— */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink-900);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-display-xl); }
h2 { font-size: var(--t-display-lg); }
h3 { font-size: var(--t-display-md); }
h4 { font-size: var(--t-display-sm); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent-700); text-decoration: none; }
a:hover { color: var(--accent-800); }

.mono { font-family: var(--font-mono); font-feature-settings: "ss02"; }
.display { font-family: var(--font-display); }
.caps { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--t-caption); font-weight: 500; }

/* ——— Components ——— */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 22px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-body);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent-700);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover { background: var(--accent-800); color: var(--ink-on-dark); }

.btn-secondary {
  background: var(--bg-raised);
  color: var(--ink-800);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--bg-soft); }

.btn-ghost {
  background: transparent;
  color: var(--ink-800);
  padding: 10px 14px;
}
.btn-ghost:hover { background: var(--surface-tint); }

/* Cards */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.card-earthy {
  background: linear-gradient(180deg, #fbf7ee, #f2eadb);
  border-color: rgba(100, 80, 50, 0.14);
}

/* Pills / Chips */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--accent-100);
  color: var(--accent-800);
  border: 1px solid var(--accent-200);
}
.pill-dot::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-200);
}

/* Input */
.input, .textarea, .select {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  font: inherit;
  color: var(--ink-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 4px var(--accent-100);
}
.textarea { min-height: 130px; resize: vertical; }
.label {
  display: block;
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

/* Ring / Ornaments */
.ring {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--accent-100);
  color: var(--accent-700);
  font-family: var(--font-display);
  font-size: 18px;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  border: 0;
}

/* Utility */
.muted { color: var(--ink-500); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-4); align-items: center; }
.grow { flex: 1; }

/* Scrollbar (subtle) */
::selection { background: var(--accent-200); color: var(--accent-900); }