/* =========================================================
   Alumot — Design Tokens (Watercolor edition)
   Palette inspired by soft sage / dusty blue / warm beige washes.
   ========================================================= */
:root {
  /* Colors — Sage (primary brand) */
  --color-sage-50:  #EEF2EA;
  --color-sage-100: #DDE5D6;
  --color-sage-200: #C7D3BC;
  --color-sage-300: #A8B89E;   /* primary sage */
  --color-sage-500: #7C8E73;
  --color-sage-700: #4F5C49;
  --color-sage-900: #2E372B;

  /* Colors — Dusty blue */
  --color-blue-50:  #ECF1F4;
  --color-blue-100: #DAE3EA;
  --color-blue-200: #BFCDD8;
  --color-blue-300: #9FB5C5;   /* dusty blue */
  --color-blue-500: #6F8A9D;
  --color-blue-700: #41576A;
  --color-blue-900: #243341;

  /* Colors — Warm beige / taupe */
  --color-sand-50:  #F5EFE4;
  --color-sand-100: #ECE2D0;
  --color-sand-200: #DCCDB1;
  --color-sand-300: #C8B89E;   /* taupe */
  --color-sand-500: #9C8B72;
  --color-sand-700: #695C4B;

  /* Colors — Soft rose / heritage */
  --color-rose-100: #F2E0DA;
  --color-rose-200: #DDC2B8;
  --color-rose-300: #BC9D92;
  --color-rose-700: #6B4D44;

  /* Cream / paper */
  --color-cream-50: #FCFAF5;   /* page background */
  --color-cream-100: #F7F2E8;  /* card background */
  --color-cream-200: #EFE8D8;
  --color-paper-line: #E2DAC8; /* subtle border */

  /* Slate / ink (text) */
  --color-ink-900: #1F2A33;    /* darkest text */
  --color-ink-700: #3A4655;    /* body text */
  --color-ink-500: #6B7785;    /* muted */
  --color-ink-300: #99A2AE;    /* faint */

  /* White / black */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Semantic */
  --color-success: #7E9F70;
  --color-warning: #C8A572;
  --color-danger:  #B07070;

  /* Surface aliases */
  --bg: var(--color-cream-50);
  --surface: var(--color-white);
  --surface-alt: var(--color-cream-100);
  --surface-card: var(--color-cream-100);
  --text: var(--color-ink-900);
  --text-muted: var(--color-ink-500);
  --text-body: var(--color-ink-700);

  --primary: var(--color-blue-700);
  --primary-hover: var(--color-blue-900);
  --accent: var(--color-sage-300);
  --accent-hover: var(--color-sage-500);
  --warm: var(--color-sand-300);

  --border: var(--color-paper-line);

  /* Typography */
  --font-display: 'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif;
  --font-body: 'Heebo', 'Assistant', 'Segoe UI', sans-serif;
  --font-accent: 'Cormorant Garamond', 'Frank Ruhl Libre', serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;
  --text-5xl: 4.5rem;

  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* Spacing (8pt grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radii — generous rounded corners (matches reference) */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Shadows — soft and watercolor-like */
  --shadow-sm: 0 2px 4px rgba(31, 42, 51, 0.05);
  --shadow-md: 0 8px 24px rgba(31, 42, 51, 0.07);
  --shadow-lg: 0 20px 50px rgba(31, 42, 51, 0.10);
  --shadow-xl: 0 32px 80px rgba(31, 42, 51, 0.14);
  --shadow-card: 0 6px 22px rgba(108, 124, 110, 0.10);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 600ms;

  /* Layout */
  --max-w: 1280px;
  --max-w-wide: 1440px;
  --gutter: 1.5rem;
  --header-h: 120px;
}

@media (min-width: 768px) {
  :root { --gutter: 3rem; }
}