/*
 * Fernwell design tokens.
 * Additive only — these custom properties don't affect any existing page
 * on their own. Component styles that consume them live in
 * fernwell-components.css and are scoped under `.fernwell`.
 */
:root {
  /* ===== COLOR TOKENS ===== */
  --ink: #1f2430; /* primary text, dark neutral */
  --ink-soft: #565d6e; /* secondary text */
  --cloud: #f5f6f1; /* app background */
  --cloud-dim: #eaebe4; /* recessed surfaces, dividers */
  --white: #ffffff; /* card surfaces */
  --marigold: #ffc145; /* primary brand / CTA */
  --marigold-dk: #e8a521; /* marigold hover/active */
  --plum: #4c3a73; /* secondary brand, nav, headers */
  --plum-dk: #392c58;
  --plum-bg: #eeeaf6;
  --meadow: #3fa672; /* success */
  --meadow-bg: #e6f5ec;
  --coral: #e85b4f; /* error/danger */
  --coral-bg: #fceae8;
  --sky: #3e8fd0; /* info */
  --sky-bg: #e8f2fa;
  --pending-bg: #fff3dc;

  /* fixed — never flips with theme. for text sitting on a surface
     that stays light/bright in both themes (e.g. Marigold buttons) */
  --ink-fixed: #1f2430;

  /* ===== TYPE ===== */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* ===== SPACING SCALE (8pt base) ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ===== SHAPE — squircle scale ===== */
  --r-sm: 10px; /* inputs, small badges */
  --r-md: 16px; /* buttons, tags */
  --r-lg: 24px; /* cards */
  --r-xl: 32px; /* modals, hero panels */
  --r-full: 999px;

  /* ===== ELEVATION — tinted, soft ===== */
  --shadow-sm: 0 1px 2px rgba(31, 36, 48, 0.06), 0 1px 1px rgba(31, 36, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 36, 48, 0.08), 0 2px 4px rgba(31, 36, 48, 0.04);
  --shadow-lg: 0 12px 32px rgba(31, 36, 48, 0.12), 0 4px 8px rgba(31, 36, 48, 0.06);
  --shadow-marigold: 0 6px 16px rgba(255, 193, 69, 0.35);
}

[data-theme="dark"] {
  --ink: #f2f1ea; /* body text — warm off-white, not pure white */
  --ink-soft: #9ca1b0;
  --cloud: #14161c; /* app background — near-black, not pure black */
  --cloud-dim: #2b2f3b; /* dividers, input borders */
  --white: #1d2029; /* card / surface color */

  --marigold: #ffc145; /* brand accent stays constant across themes */
  --marigold-dk: #ffd166; /* dark theme "hover" brightens instead of darkens */
  --plum: #6b54a3; /* lifted a step so it stays legible against near-black */
  --plum-dk: #7e68b5;
  --plum-bg: rgba(107, 84, 163, 0.16);

  --meadow: #55d194;
  --meadow-bg: rgba(85, 209, 148, 0.14);
  --coral: #ff8478;
  --coral-bg: rgba(255, 132, 120, 0.14);
  --sky: #6bb3e8;
  --sky-bg: rgba(107, 179, 232, 0.14);
  --pending-bg: rgba(255, 193, 69, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-marigold: 0 6px 16px rgba(255, 193, 69, 0.22);
}