/* ============================================================
   Content HQ — Design tokens (sumitwanjari.com theme)
   Light "warm paper" look is the default; dark is a rose-tinted night mode.
   Palette, type and radii mirror the website: bg #F7F4EF, ink #241F1C,
   rose #E0566A / #B23A4E, Fraunces headings + Hanken Grotesk body.

   Surface ladder (both themes share the semantics):
     --surface    resting surface of a card / column / input   (light: solid white)
     --surface-2  hover / nested-emphasis tint                  (light: warm paper tint)
     --surface-3  active / pressed / track                      (light: deeper paper tint)
     --surface-solid  always opaque (sticky cells, popovers, small cards)
   In light mode "more interactive" = a little more paper tint on white;
   in dark mode "more interactive" = a little more white over the night bg.
   ============================================================ */
:root {
  /* Typography */
  --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --drawer-w: 520px;
  --content-max: 1600px;

  /* Brand accent — the site's rose */
  --accent-1: #E0566A;
  --accent-2: #B23A4E;
  --accent-3: #F0A0AC;
  --accent-rgb: 224, 86, 106;
  --grad-accent: linear-gradient(135deg, #E0566A, #B23A4E);
  --grad-accent-soft: linear-gradient(135deg, rgba(224,86,106,.16), rgba(178,58,78,.10));
  /* Rose-soft fill used by active chips / segments / nav (12% rose, works on white and on night) */
  --accent-soft: rgba(224, 86, 106, .12);
  --accent-soft-border: rgba(224, 86, 106, .32);
  /* The site's button glow */
  --shadow-accent: 0 8px 24px rgba(224, 86, 106, .30);
  --shadow-accent-hover: 0 12px 30px rgba(224, 86, 106, .45);

  /* Semantic colors (mid-saturation so 11px badge text still reads on white) */
  --ok: #2E9E6B;
  --warn: #D98A1C;
  --danger: #D23B4E;
  --info: #2F7FB8;

  /* Platform colors (channel colours live in the data — every channel carries its own) */
  --c-instagram: #D9467A;
  --c-facebook: #2B5FD0;
  --c-x: #5F6670;
  --c-linkedin: #0A66C2;

  /* Priority colors */
  --p-low: #737A88;
  --p-medium: #2F7FB8;
  --p-high: #D98A1C;
  --p-urgent: #D23B4E;
}

/* ---------- Light theme (default) — warm paper ---------- */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F4EF;
  --bg-2: #F1ECE5;
  --bg-3: #E9E2D9;
  --surface: #FFFFFF;
  --surface-2: #F8F5F0;
  --surface-3: #EFE9E1;
  --surface-solid: #FFFFFF;
  --glass: rgba(250, 248, 244, .90);
  --glass-strong: rgba(255, 255, 255, .97);
  --track: rgba(36, 31, 28, .08);            /* progress / bar tracks */
  --backdrop: rgba(36, 31, 28, .42);         /* modal / drawer dim */
  --border: rgba(36, 31, 28, .10);
  --border-2: rgba(36, 31, 28, .18);
  --text: #241F1C;
  --text-2: #4A423D;
  --text-3: #6E655D;
  --text-4: #9C948C;
  --accent-ink: #B23A4E;                     /* rose that reads as text on this theme */
  --shadow-sm: 0 1px 2px rgba(120, 40, 50, .05), 0 4px 12px -6px rgba(120, 40, 50, .06);
  --shadow-md: 0 16px 36px rgba(120, 40, 50, .10), 0 2px 6px rgba(120, 40, 50, .04);
  --shadow-lg: 0 24px 60px -16px rgba(120, 40, 50, .26), 0 8px 20px -8px rgba(120, 40, 50, .10);
  --ring: 0 0 0 3px rgba(224, 86, 106, .22);
  --blob-opacity: .5;
  --blob-1: #F7C9CF;
  --blob-2: #F3D9C8;
  --blob-3: #F4DCD2;
  --scrollbar: rgba(36, 31, 28, .18);
}

/* ---------- Dark theme — rose night ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #140A0D;
  --bg-2: #1A0E12;
  --bg-3: #22151A;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --surface-3: rgba(255, 255, 255, .10);
  --surface-solid: #22151A;
  --glass: rgba(26, 14, 18, .72);
  --glass-strong: rgba(20, 10, 13, .9);
  --track: rgba(247, 231, 230, .10);
  --backdrop: rgba(0, 0, 0, .60);
  --border: rgba(247, 231, 230, .09);
  --border-2: rgba(247, 231, 230, .16);
  --text: #F7E7E6;
  --text-2: #D8C5C5;
  --text-3: #A99496;
  --text-4: #75626A;
  --accent-ink: #F0A0AC;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.7), 0 8px 20px -8px rgba(0,0,0,.5);
  --ring: 0 0 0 3px rgba(224, 86, 106, .38);
  --blob-opacity: .45;
  --blob-1: #7a2234;
  --blob-2: #4a1a2a;
  --blob-3: #3a1a24;
  --scrollbar: rgba(247, 231, 230, .14);
}