/* ==========================================================================
   Blossom — Design System v0.1
   A palette rooted in paper, stone, clay, sun, and foliage.
   Source of truth: blossom-design-system.html (April 2026)
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Fraunces for the display tier — a warm, slightly botanical serif with
   optical-size axis. Inter for UI — clean, legible, workhorse grotesque.
   Geist Mono for data readouts. All via Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ===================================================================
     CORE PALETTE — five base colors, material metaphors
     =================================================================== */
  --blossom-paper:    #FAF9F6;  /* Canvas / app background. Warmer than white. */
  --blossom-ink:      #1C1917;  /* Primary text, icons, strongest strokes.    */
  --blossom-foliage:  #3D4421;  /* Primary brand. Nav, CTAs, logo.            */
  --blossom-clay:     #D97757;  /* Accent. Highlights, energy.                */
  --blossom-sun:      #FDE68A;  /* Soft highlight. Pills, callouts.           */

  /* ===================================================================
     TOKEN RAMPS — 10 steps per base color
     ● marks the base value for each ramp
     =================================================================== */

  /* Foliage — Primary brand · base 700 */
  --foliage-50:  #F5F6EE;
  --foliage-100: #E8EBD5;
  --foliage-200: #D1D7AB;
  --foliage-300: #B0BB7E;
  --foliage-400: #8B9758;
  --foliage-500: #6B7541;
  --foliage-600: #525B33;
  --foliage-700: #3D4421;  /* ● base */
  --foliage-800: #2D331A;
  --foliage-900: #1F2412;

  /* Clay — Accent · base 500 */
  --clay-50:  #FBF1ED;
  --clay-100: #F6DDD1;
  --clay-200: #EDB9A4;
  --clay-300: #E59578;
  --clay-400: #DD7F5F;
  --clay-500: #D97757;  /* ● base */
  --clay-600: #C25E3E;
  --clay-700: #9F4A30;
  --clay-800: #7C3923;
  --clay-900: #5A2818;

  /* Sun — Highlight · base 200 */
  --sun-50:  #FFFBEB;
  --sun-100: #FEF3C7;
  --sun-200: #FDE68A;   /* ● base */
  --sun-300: #FCD34D;
  --sun-400: #FBBF24;
  --sun-500: #F59E0B;
  --sun-600: #D97706;
  --sun-700: #B45309;
  --sun-800: #92400E;
  --sun-900: #78350F;

  /* Stone — Neutrals · base 50 (Paper) + 900 (Ink) */
  --stone-50:  #FAF9F6;   /* ● Paper */
  --stone-100: #F4F2EC;
  --stone-200: #E8E5DA;
  --stone-300: #D6D2C2;
  --stone-400: #A8A294;
  --stone-500: #78736A;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;   /* ● Ink */

  /* ===================================================================
     SEMANTIC COLORS — functional meaning, consistent across product
     =================================================================== */
  --success:    #5A7A2E;   /* Leans olive to fit the palette */
  --success-bg: #EDF2DE;
  --warning:    #B45309;   /* Deep Sun — NOT to be confused with Clay */
  --warning-bg: #FEF3C7;
  --error:      #B91C1C;   /* True red — MUST be distinct from Clay */
  --error-bg:   #FEE2E2;
  --info:       #3F6E73;   /* Muted teal — cool without being cold */
  --info-bg:    #E0ECEE;

  /* ===================================================================
     SEMANTIC ALIASES — use these in product code
     =================================================================== */
  --bg-canvas:         var(--blossom-paper);         /* Primary app background */
  --bg-surface:        #FFFFFF;                      /* Cards, sheets (slightly brighter than canvas) */
  --bg-surface-sunk:   var(--stone-100);             /* Subtle wells, code blocks */
  --bg-brand:          var(--foliage-700);           /* Nav, primary CTA fill */
  --bg-brand-hover:    var(--foliage-800);
  --bg-accent:         var(--clay-500);              /* One accent per screen */
  --bg-accent-hover:   var(--clay-600);
  --bg-highlight:      var(--sun-200);               /* Pills, soft callouts */

  --fg-primary:        var(--blossom-ink);           /* Strongest text */
  --fg-secondary:      var(--stone-600);             /* Supporting text */
  --fg-muted:          var(--stone-500);             /* Meta, captions — 4.7:1 on Paper */
  --fg-on-brand:       var(--blossom-paper);         /* Text over Foliage */
  --fg-on-accent:      #FFFFFF;                      /* Text over Clay (use 600+ for small) */
  --fg-on-highlight:   var(--blossom-ink);           /* Text over Sun */
  --fg-brand:          var(--foliage-700);           /* Brand-colored text / links */
  --fg-accent:         var(--clay-600);              /* Clay-as-text = bump to 600 */

  --border-subtle:     var(--stone-200);
  --border-default:    var(--stone-300);
  --border-strong:     var(--stone-400);
  --border-brand:      var(--foliage-700);

  --focus-ring:        var(--clay-500);              /* Warm, not blue */

  /* ===================================================================
     TYPOGRAPHY
     =================================================================== */
  --font-display:   'Fraunces', 'Hoefler Text', Georgia, serif;
  --font-body:      'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-ui:        'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:      'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale — warm, slightly tighter than MUI's, with serif display moments */
  --type-display-size: 72px;  --type-display-weight: 400; --type-display-lh: 1.04; --type-display-ls: -0.025em;
  --type-h1-size:      56px;  --type-h1-weight:      400; --type-h1-lh:      1.08; --type-h1-ls:      -0.022em;
  --type-h2-size:      40px;  --type-h2-weight:      500; --type-h2-lh:      1.12; --type-h2-ls:      -0.018em;
  --type-h3-size:      28px;  --type-h3-weight:      500; --type-h3-lh:      1.20; --type-h3-ls:      -0.012em;
  --type-h4-size:      22px;  --type-h4-weight:      500; --type-h4-lh:      1.28; --type-h4-ls:      -0.008em;
  --type-h5-size:      18px;  --type-h5-weight:      600; --type-h5-lh:      1.35; --type-h5-ls:      -0.004em;
  --type-body-lg-size: 18px;  --type-body-lg-weight: 400; --type-body-lg-lh: 1.55; --type-body-lg-ls: -0.005em;
  --type-body-size:    16px;  --type-body-weight:    400; --type-body-lh:    1.55; --type-body-ls:    -0.004em;
  --type-body-sm-size: 14px;  --type-body-sm-weight: 400; --type-body-sm-lh: 1.50; --type-body-sm-ls: -0.002em;
  --type-caption-size: 12px;  --type-caption-weight: 500; --type-caption-lh: 1.40; --type-caption-ls:  0.01em;
  --type-overline-size:11px;  --type-overline-weight:600; --type-overline-lh: 1.30; --type-overline-ls: 0.08em;
  --type-button-size:  14px;  --type-button-weight:  500; --type-button-lh:   1.20; --type-button-ls:  -0.002em;

  /* ===================================================================
     SPACING — 4px base grid
     =================================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ===================================================================
     RADII — softer than MUI; the garden feels organic
     =================================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;     /* default */
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill:9999px;

  /* ===================================================================
     SHADOWS — warm, soft; cast with Ink at low alpha (not pure black)
     =================================================================== */
  /* Not Material's 24-level dp scale — Blossom uses a 6-step series tuned for
     warm Paper backgrounds. All shadows cast with Ink (#1C1917) at low alpha +
     a long, offset ambient layer for a sun-through-leaves quality. */
  --shadow-xs:  0 1px 2px 0 rgba(28, 25, 23, 0.08);
  --shadow-sm:  0 1px 2px 0 rgba(28, 25, 23, 0.06), 0 2px 6px -1px rgba(28, 25, 23, 0.10);
  --shadow-md:  0 2px 4px -1px rgba(28, 25, 23, 0.08), 0 8px 16px -4px rgba(28, 25, 23, 0.14);
  --shadow-lg:  0 4px 8px -2px rgba(28, 25, 23, 0.10), 0 16px 28px -6px rgba(28, 25, 23, 0.18);
  --shadow-xl:  0 8px 14px -4px rgba(28, 25, 23, 0.12), 0 28px 48px -8px rgba(28, 25, 23, 0.22);
  --shadow-2xl: 0 12px 20px -6px rgba(28, 25, 23, 0.14), 0 40px 72px -12px rgba(28, 25, 23, 0.28);
  --shadow-focus: 0 0 0 3px rgba(217, 119, 87, 0.35);  /* Clay @ 35% */

  /* ===================================================================
     MOTION
     =================================================================== */
  --ease-standard:   cubic-bezier(0.22, 1, 0.36, 1);    /* soft out */
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick:   120ms;
  --dur-normal:  220ms;
  --dur-slow:    360ms;
  --dur-deliberate: 520ms;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
html { font-family: var(--font-body); color: var(--fg-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: var(--type-body-ls); }

/* Semantic headings default to display serif for the hero tier, UI sans for the rest */
h1 { font-family: var(--font-display); font-weight: var(--type-h1-weight); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); margin: 0; color: var(--fg-primary); }
h2 { font-family: var(--font-display); font-weight: var(--type-h2-weight); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); margin: 0; color: var(--fg-primary); }
h3 { font-family: var(--font-ui); font-weight: var(--type-h3-weight); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); margin: 0; color: var(--fg-primary); }
h4 { font-family: var(--font-ui); font-weight: var(--type-h4-weight); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); letter-spacing: var(--type-h4-ls); margin: 0; color: var(--fg-primary); }
h5 { font-family: var(--font-ui); font-weight: var(--type-h5-weight); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); letter-spacing: var(--type-h5-ls); margin: 0; color: var(--fg-primary); }
p  { margin: 0; }
small, .type-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); letter-spacing: var(--type-caption-ls); color: var(--fg-muted); }
code, pre, kbd { font-family: var(--font-mono); }
a { color: var(--fg-brand); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--foliage-800); }

/* ==========================================================================
   TYPE UTILITIES
   ========================================================================== */
.type-display  { font-family: var(--font-display); font-weight: var(--type-display-weight); font-size: var(--type-display-size); line-height: var(--type-display-lh); letter-spacing: var(--type-display-ls); }
.type-h1       { font-family: var(--font-display); font-weight: var(--type-h1-weight);      font-size: var(--type-h1-size);      line-height: var(--type-h1-lh);      letter-spacing: var(--type-h1-ls); }
.type-h2       { font-family: var(--font-display); font-weight: var(--type-h2-weight);      font-size: var(--type-h2-size);      line-height: var(--type-h2-lh);      letter-spacing: var(--type-h2-ls); }
.type-h3       { font-family: var(--font-ui);      font-weight: var(--type-h3-weight);      font-size: var(--type-h3-size);      line-height: var(--type-h3-lh);      letter-spacing: var(--type-h3-ls); }
.type-h4       { font-family: var(--font-ui);      font-weight: var(--type-h4-weight);      font-size: var(--type-h4-size);      line-height: var(--type-h4-lh);      letter-spacing: var(--type-h4-ls); }
.type-h5       { font-family: var(--font-ui);      font-weight: var(--type-h5-weight);      font-size: var(--type-h5-size);      line-height: var(--type-h5-lh);      letter-spacing: var(--type-h5-ls); }
.type-body-lg  { font-size: var(--type-body-lg-size); font-weight: var(--type-body-lg-weight); line-height: var(--type-body-lg-lh); letter-spacing: var(--type-body-lg-ls); }
.type-body     { font-size: var(--type-body-size);    font-weight: var(--type-body-weight);    line-height: var(--type-body-lh);    letter-spacing: var(--type-body-ls); }
.type-body-sm  { font-size: var(--type-body-sm-size); font-weight: var(--type-body-sm-weight); line-height: var(--type-body-sm-lh); letter-spacing: var(--type-body-sm-ls); }
.type-overline { font-family: var(--font-ui); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); line-height: var(--type-overline-lh); letter-spacing: var(--type-overline-ls); text-transform: uppercase; }
.type-button   { font-family: var(--font-ui); font-size: var(--type-button-size);   font-weight: var(--type-button-weight);   line-height: var(--type-button-lh);   letter-spacing: var(--type-button-ls); }
.type-mono     { font-family: var(--font-mono); font-size: var(--type-body-sm-size); }