/* ============================================================
   youfree.now — Design Foundations
   Colors + Typography tokens (base + semantic)
   Aesthetic: friendly, playful, voice-first. Monospace signature,
   warm coral + deep navy on warm paper. Light + dark themes.
   ------------------------------------------------------------
   Fonts are loaded from Google Fonts CDN (see @import below).
   For offline / production use, drop the .ttf/.woff2 files into
   /fonts and swap the @import for @font-face. (Flagged in README.)
   ============================================================ */


:root {
  /* ---------- BASE PALETTE ---------- */

  /* Coral — primary / brand */
  --coral-50:  #FFF1ED;
  --coral-100: #FFE0D6;
  --coral-200: #FFC4B2;
  --coral-300: #FFA088;
  --coral-400: #FF7E5E;
  --coral-500: #FF6B4A;   /* brand coral */
  --coral-600: #ED4F2C;
  --coral-700: #C73C1E;
  --coral-800: #9E2F18;
  --coral-900: #7A2613;

  /* Ink — deep navy/indigo text + dark surfaces */
  --ink-900: #14141F;
  --ink-800: #1A1A2E;     /* brand navy */
  --ink-700: #26263F;
  --ink-600: #353551;
  --ink-500: #4A4A66;
  --ink-400: #6E6E88;
  --ink-300: #9A9AAE;
  --ink-200: #C7C7D4;
  --ink-100: #E6E6EC;

  /* Paper — warm neutral backgrounds */
  --paper-0:   #FFFFFF;
  --paper-50:  #FFFBF7;
  --paper-100: #FBF4EC;
  --paper-200: #F4EADF;
  --paper-300: #ECE0D2;

  /* Warm border tints */
  --line-soft: #F0E7DC;
  --line:      #E7DBCD;
  --line-strong: #D8C9B7;

  /* Semantic accents */
  --green-100: #D6F2E5;
  --green-500: #2FB67D;   /* available / success / free */
  --green-600: #1F9C68;
  --amber-100: #FCEFCF;
  --amber-500: #F5B742;   /* partial / civil-hours / warning */
  --amber-600: #D99A1E;
  --blue-100:  #E2E8FF;
  --blue-500:  #6C8BFF;   /* info / secondary accent / links */
  --blue-600:  #4E6BE0;

  /* ---------- TYPE FAMILIES ---------- */
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* mono is the signature: wordmark, headings, labels, times, buttons.
     sans carries longer body copy + dense UI text. */

  /* ---------- TYPE SCALE (fluid) ---------- */
  --text-hero:    clamp(2.75rem, 6vw, 4.5rem);   /* 44 → 72 */
  --text-display: clamp(2rem, 4vw, 3rem);        /* 32 → 48 */
  --text-h1:      clamp(1.75rem, 3vw, 2.25rem);  /* 28 → 36 */
  --text-h2:      1.5rem;                         /* 24 */
  --text-h3:      1.25rem;                        /* 20 */
  --text-body:    1rem;                           /* 16 */
  --text-small:   0.875rem;                       /* 14 */
  --text-micro:   0.75rem;                        /* 12 */

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.55;

  --tracking-label: 0.12em;   /* uppercase mono labels */
  --tracking-tight: -0.02em;  /* big mono headlines */

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (4px 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;

  /* ---------- SHADOWS (warm-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 26, 46, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 26, 46, 0.07), 0 1px 2px rgba(26, 26, 46, 0.06);
  --shadow-md: 0 8px 20px rgba(26, 26, 46, 0.08), 0 2px 6px rgba(26, 26, 46, 0.06);
  --shadow-lg: 0 18px 44px rgba(26, 26, 46, 0.12), 0 6px 14px rgba(26, 26, 46, 0.07);
  --shadow-coral: 0 10px 28px rgba(255, 107, 74, 0.30);
  --shadow-pop:  0 4px 0 var(--ink-800);   /* playful "solid drop" for buttons */

  /* ---------- MOTION ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TOKENS — LIGHT (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --bg:           var(--paper-50);
  --bg-pattern:   var(--paper-100);
  --surface:      var(--paper-0);
  --surface-2:    var(--paper-100);
  --surface-sunk: var(--paper-200);
  --border:       var(--line);
  --border-soft:  var(--line-soft);
  --border-strong:var(--line-strong);

  --fg:        var(--ink-800);
  --fg-strong: var(--ink-900);
  --fg-muted:  var(--ink-400);
  --fg-subtle: var(--ink-300);
  --fg-on-coral: #FFFFFF;
  --fg-on-ink:   var(--paper-50);

  --primary:       var(--coral-500);
  --primary-hover: var(--coral-600);
  --primary-press: var(--coral-700);
  --primary-soft:  var(--coral-100);
  --primary-fg:    #FFFFFF;

  --available:     var(--green-500);
  --available-soft:var(--green-100);
  --warn:          var(--amber-500);
  --warn-soft:     var(--amber-100);
  --info:          var(--blue-500);
  --info-soft:     var(--blue-100);

  --ring: rgba(255, 107, 74, 0.35);
}

/* ============================================================
   SEMANTIC TOKENS — DARK
   ============================================================ */
[data-theme="dark"] {
  --bg:           #121220;
  --bg-pattern:   #16162a;
  --surface:      #1A1A2E;
  --surface-2:    #22223A;
  --surface-sunk: #0E0E1A;
  --border:       #2E2E48;
  --border-soft:  #25253C;
  --border-strong:#3A3A5A;

  --fg:        #F6F1EB;
  --fg-strong: #FFFFFF;
  --fg-muted:  #A6A6BE;
  --fg-subtle: #74748E;
  --fg-on-coral: #FFFFFF;
  --fg-on-ink:   #F6F1EB;

  --primary:       var(--coral-500);
  --primary-hover: var(--coral-400);
  --primary-press: var(--coral-600);
  --primary-soft:  rgba(255, 107, 74, 0.18);
  --primary-fg:    #1A1A2E;

  --available:     #36C98A;
  --available-soft:rgba(54, 201, 138, 0.18);
  --warn:          var(--amber-500);
  --warn-soft:     rgba(245, 183, 66, 0.16);
  --info:          #8AA2FF;
  --info-soft:     rgba(108, 139, 255, 0.18);

  --ring: rgba(255, 107, 74, 0.45);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 4px 0 #000000;
}

/* ============================================================
   SEMANTIC TYPE CLASSES (optional helpers)
   ============================================================ */
.t-hero {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.t-display {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.t-h1 { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-h1); line-height: var(--leading-snug); color: var(--fg-strong); }
.t-h2 { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--fg-strong); }
.t-h3 { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--fg); }
.t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-body); line-height: var(--leading-body); color: var(--fg); }
.t-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-small); line-height: var(--leading-body); color: var(--fg-muted); }
.t-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}
.t-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-small); color: var(--fg); }
.t-time { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--fg-strong); }