/* ─────────────────────────────────────────────────────────────────
   CalChat — design tokens v3 "iOS paper / dark"
   Light: warm paper (#F5F3EF) ground — not pure white.
   Dark: deep graphite, not pure black.
   Apple-flavoured: generous radii, layered shadows, glass nav.
   Accent: single deep charcoal/black — fully monochrome.
   ───────────────────────────────────────────────────────────────── */

/* Fonts are self-hosted (see css/fonts.css) — no request ever leaves the origin. */
@import url("./fonts.css");

/* ── Raw palette — light end (warm paper) ───────────────────────── */
:root {
  --paper-0:   #F5F3EF;   /* page bg — warm off-white, not pure */
  --paper-1:   #EFEDE8;   /* elevated surface */
  --paper-2:   #E8E5DF;   /* card bg */
  --paper-3:   #DDD9D1;   /* border bg */
  --paper-4:   #C9C4BA;   /* muted border */
  --paper-5:   #A8A29A;   /* hairline / divider */
  --paper-6:   #7D786E;   /* placeholder / hint */
  --paper-7:   #4A463F;   /* secondary text */
  --paper-8:   #201E1A;   /* primary text */

  /* ── Raw palette — dark end ─────────────────────────────────────── */
  --dark-0:    #141210;   /* page bg */
  --dark-1:    #1C1A17;   /* elevated surface */
  --dark-2:    #232119;   /* card bg */
  --dark-3:    #2D2B22;   /* border bg */
  --dark-4:    #3D3A30;   /* muted border */
  --dark-5:    #5C5849;   /* hairline */
  --dark-6:    #8A8576;   /* placeholder */
  --dark-7:    #C4BFB1;   /* secondary text */
  --dark-8:    #EDE9E0;   /* primary text */

  /* ── Radii — iOS generous ──────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   13px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ── Spacing (4px base) ─────────────────────────────────────────── */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:20px;
  --s-6:24px; --s-7:32px;  --s-8:40px;  --s-9:56px;  --s-10:72px;
  --s-11:96px; --s-12:128px;

  /* ── Motion — iOS-flavoured ease-out-expo ───────────────────────── */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   100ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --dur-xslow:  600ms;

  /* ── Typography ─────────────────────────────────────────────────── */
  /* SF Pro stack first, Geist fallback */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist",
               "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Geist Mono", Menlo, monospace;

  /* Fluid type. The lower bound has to be a real phone size, not a
     desktop size that happens to be the clamp floor — an 8vw slope with
     a 3.5rem floor renders 56px on a 390px screen, which reads as "the
     page is zoomed in". Floors are set from the 360–430px band up. */
  --m-mega:  clamp(2.25rem, 1.15rem + 5.2vw, 7.5rem);
  --m-h1:    clamp(1.95rem, 1.45rem + 3.2vw, 3.75rem);
  --m-h2:    clamp(1.5rem, 1.2rem + 2.2vw, 2.75rem);
  --m-h3:    clamp(1.05rem, 0.98rem + 0.5vw, 1.4rem);
  --m-lead:  clamp(0.99rem, 0.93rem + 0.4vw, 1.25rem);
  --m-body:  1.0625rem;
  --m-sm:    0.9375rem;
  --m-xs:    0.8125rem;
  --m-2xs:   0.75rem;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    900;

  /* ── Layout ─────────────────────────────────────────────────────── */
  --maxw:    1280px;
  /* 18px gutter on a 390px phone; the old 1.25rem floor plus a 4vw slope
     ate ~40px of a 390px screen before content started. */
  --pad-x:   clamp(1.125rem, 0.55rem + 3vw, 5rem);
  --nav-h:   56px;
  --sec-gap: clamp(3rem, 2rem + 3vw, 5rem);
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME (default)
   ════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          var(--paper-0);
  --bg-elevated: var(--paper-1);
  --bg-surface:  var(--paper-2);
  --bg-border:   var(--paper-3);
  --bg-muted:    var(--paper-4);

  --fg:   var(--paper-8);
  --fg-2: #2D2B22;
  --fg-3: var(--paper-7);
  --fg-4: var(--paper-6);
  --fg-5: var(--paper-5);

  --line:      var(--paper-4);
  --line-soft: var(--paper-3);

  --accent:      var(--paper-8);
  --accent-dim:  rgba(32, 30, 26, 0.07);
  --accent-text: var(--paper-0);

  /* iOS-layered shadows (warm-tinted) */
  --shadow-sm:    0 1px 3px rgba(32,28,20,.06);
  --shadow-md:    0 2px 12px rgba(32,28,20,.08), 0 1px 3px rgba(32,28,20,.04);
  --shadow-lg:    0 16px 48px rgba(32,28,20,.10), 0 4px 12px rgba(32,28,20,.06);
  --shadow-phone: 0 40px 80px -20px rgba(32,28,20,.18), 0 12px 32px -8px rgba(32,28,20,.10);

  /* blob palette (light mode) */
  --blob-hi:  var(--paper-6);
  --blob-mid: var(--paper-5);
  --blob-lo:  var(--paper-4);
  --blob-mix: multiply;
  --blob-op1: .30;
  --blob-op2: .16;

  /* tile palette */
  --tile-dark:  var(--paper-1);
  --tile-ink:   var(--paper-0);
  --tile-blue:  var(--paper-2);   /* the "accent tile" */
  --tile-grad-a: var(--paper-7);
  --tile-grad-b: var(--paper-5);
  --tile-noise-op: .20;

  /* section alt bg */
  --sec-alt-bg: var(--paper-1);
  --sec-alt-grad-a: #ECEAE4;
  --sec-alt-grad-b: #F0EDE7;

  /* nav stuck bg */
  --nav-stuck-bg: rgba(245,243,239,.88);
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          var(--dark-0);
  --bg-elevated: var(--dark-1);
  --bg-surface:  var(--dark-2);
  --bg-border:   var(--dark-3);
  --bg-muted:    var(--dark-4);

  --fg:   var(--dark-8);
  --fg-2: #D6D0C5;
  --fg-3: var(--dark-7);
  --fg-4: var(--dark-6);
  --fg-5: var(--dark-5);

  --line:      var(--dark-4);
  --line-soft: var(--dark-3);

  --accent:      var(--dark-8);
  --accent-dim:  rgba(237, 233, 224, 0.14);
  --accent-text: var(--dark-0);

  --shadow-sm:    0 1px 3px rgba(0,0,0,.35);
  --shadow-md:    0 2px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:    0 16px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  --shadow-phone: 0 40px 80px -20px rgba(0,0,0,.8), 0 12px 32px -8px rgba(0,0,0,.6);

  /* blob palette (dark mode — bright end on dark bg, mirrors light using dark end on paper) */
  --blob-hi:  var(--dark-8);
  --blob-mid: var(--dark-7);
  --blob-lo:  var(--dark-6);
  --blob-mix: screen;
  --blob-op1: .30;
  --blob-op2: .16;

  --tile-dark:  var(--dark-1);
  --tile-ink:   var(--dark-0);
  --tile-blue:  var(--dark-2);
  --tile-grad-a: var(--dark-7);
  --tile-grad-b: var(--dark-5);
  --tile-noise-op: .32;

  --sec-alt-bg: var(--dark-1);
  --sec-alt-grad-a: #1E1C14;
  --sec-alt-grad-b: #1A1814;

  --nav-stuck-bg: rgba(20,18,16,.88);
}