/* ============================================================
   Tideline — Design Tokens
   Calm "tideline" water palette + warm humanity accent.
   Non-clinical, non-shaming, WCAG-AA+. Light + dark.
   ============================================================ */

:root {
  /* ---- Brand / water (primary) ---- */
  --teal-50:  #effafb;
  --teal-100: #d6f1f4;
  --teal-200: #aee2e9;
  --teal-300: #79cdd8;
  --teal-400: #45b3c2;
  --teal-500: #1f93a4;
  --teal-600: #0e7c8b;
  --teal-700: #0b6675;
  --teal-800: #0d505c;
  --teal-900: #103038;

  /* ---- Affirming green (progress / "surfed") ---- */
  --green-400: #34d399;
  --green-500: #0e9f6e;
  --green-600: #0b7c57;

  /* ---- Warmth (candle, milestones, human touch) ---- */
  --amber-300: #f2c98c;
  --amber-400: #e6953f;
  --amber-500: #d27d27;
  --amber-glow: #ffd9a0;

  /* ---- Calm signal for care/crisis (NOT alarm red) ---- */
  --care-bg:   #0b2a30;   /* deep ink-teal ribbon */
  --care-accent: #f0a24b; /* warm, findable, non-panic */
  --care-soft: #f6ede0;

  /* ---- Neutrals (light) ---- */
  --bg:        #f6fafb;
  --surface:   #ffffff;
  --surface-2: #eef6f8;
  --surface-3: #e4eff2;
  --text:      #102e35;
  --text-muted:#496771;
  --text-faint:#6c878f;
  --border:    #dbe8ec;
  --border-strong:#74909a; /* >=3:1 on white — form-control boundaries (WCAG 1.4.11) */

  /* ---- Semantic roles ---- */
  --primary:        var(--teal-600);
  --primary-hover:  var(--teal-700);
  --primary-ink:    #ffffff;
  --primary-soft:   var(--teal-50);
  --affirm:         var(--green-500);
  --affirm-hover:   var(--green-600);
  --warm:           var(--amber-400);
  --focus:          #1f93a4;
  --link:           var(--teal-700);

  /* ---- Type ---- */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9rem;
  --fs-base: 1.0625rem;   /* 17px comfortable reading */
  --fs-md:   1.2rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.6rem;
  --fs-3xl:  3.25rem;
  --lh-tight: 1.18;
  --lh-snug:  1.4;
  --lh-body:  1.65;
  --measure:  68ch;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* ---- Shadow (soft, low-alpha, calm) ---- */
  --shadow-sm: 0 1px 2px rgba(16,46,53,0.06), 0 1px 3px rgba(16,46,53,0.05);
  --shadow-md: 0 4px 14px rgba(16,46,53,0.07), 0 2px 6px rgba(16,46,53,0.05);
  --shadow-lg: 0 6px 18px rgba(16,46,53,0.10);
  --ring: 0 0 0 4px rgba(31,147,164,0.30);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;
  --breath-in: 4s;
  --breath-out: 6s;

  /* ---- Layout ---- */
  --maxw: 1120px;
  --maxw-prose: 720px;
  --z-ribbon: 60;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 90;
}

/* ====================== DARK (deep ocean) ====================== */
:root[data-theme="dark"] {
  --bg:        #081519;
  --surface:   #0e2329;
  --surface-2: #143038;
  --surface-3: #1b3a43;
  --text:      #e9f2f4;
  --text-muted:#a3bcc2;
  --text-faint:#7e999f;
  --border:    #21424b;
  --border-strong:#587e86; /* >=3:1 on dark surfaces — control boundaries */

  --primary:        var(--teal-400);
  --primary-hover:  var(--teal-300);
  --primary-ink:    #052026;
  --primary-soft:   #0f2b32;
  --affirm:         var(--green-400);
  --affirm-hover:   #5ee0ad;
  --warm:           var(--amber-300);
  --focus:          #59cbdb;
  --link:           var(--teal-300);
  --care-bg:        #08222a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 6px 18px rgba(0,0,0,0.5);
  --ring: 0 0 0 4px rgba(89,203,219,0.32);
}

/* Auto-dark when user prefers it and hasn't chosen light explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #081519;
    --surface:   #0e2329;
    --surface-2: #143038;
    --surface-3: #1b3a43;
    --text:      #e9f2f4;
    --text-muted:#a3bcc2;
    --text-faint:#7e999f;
    --border:    #21424b;
    --border-strong:#587e86;
    --primary:        var(--teal-400);
    --primary-hover:  var(--teal-300);
    --primary-ink:    #052026;
    --primary-soft:   #0f2b32;
    --affirm:         var(--green-400);
    --affirm-hover:   #5ee0ad;
    --warm:           var(--amber-300);
    --focus:          #59cbdb;
    --link:           var(--teal-300);
    --care-bg:        #08222a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
    --shadow-lg: 0 6px 18px rgba(0,0,0,0.5);
    --ring: 0 0 0 4px rgba(89,203,219,0.32);
  }
}