/* =====================================================================
   Blog Automation – THEME TOKENS
   Change the look of the whole app here. Accent presets: [data-accent],
   light/dark: [data-mode], density: [data-density], corners: [data-shape],
   layout: [data-layout] (css/layout.css). No gradients (brand rule): hero/brand tokens are flat.
   ===================================================================== */
:root {
  /* brand (Blog Automation Brand & Product Design Brief V1.0) – default theme. No gradients: --brand-gradient is a flat navy. */
  --brand-primary: #25276d;
  --brand-accent: #ff684e;
  --brand-gradient: #25276d;
  --accent: #25276d;
  --accent-600: #1e2058;
  --accent-700: #171946;
  --accent-50: #eef0fa;
  --accent-100: #dcdff3;
  --accent-contrast: #ffffff;
  --coral: #ff684e;
  --coral-700: #c2412b;      /* coral for text on white (contrast) */
  --coral-50: #fff1ee;
  --hero-from: #25276d;
  --hero-to: var(--hero-from);

  --bg: #f8f9fc;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-3: #f0f2f7;
  --border: #e5eaf0;
  --border-strong: #d3dae4;
  --text: #152238;
  --text-2: #3d4a63;
  --text-3: #586479;   /* ≥ 4.5:1 also on --surface-3 */
  --overlay: rgba(21, 34, 56, .45);

  --ok: #15803d;   --ok-bg: #ecfdf3;
  --warn: #b45309; --warn-bg: #fffaeb;
  --err: #b91c1c;  --err-bg: #fef3f2;
  --info: #2563eb; --info-bg: #eff6ff;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(21, 34, 56, .04);
  --shadow: 0 1px 3px rgba(21, 34, 56, .06), 0 4px 12px rgba(21, 34, 56, .04);
  --shadow-lg: 0 16px 40px rgba(21, 34, 56, .14);

  --font: "Inter", system-ui, Arial, sans-serif;
  --font-display: "Inter", system-ui, Arial, sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs: 16px; --fs-md: 16px; --fs-lg: 19px; --fs-xl: 24px; --fs-2xl: 30px;

  --pad: 16px;
  --row-h: 52px;
  --ctrl-h: 44px;
  --sidebar-w: 260px;
  color-scheme: light;
}

/* ---- accent presets (brand = default above) ---- */
[data-accent="coral"]    { --accent:#c2412b; --accent-600:#a8361f; --accent-700:#8c2c19; --accent-50:#fff1ee; --accent-100:#ffe0d9; --hero-from:#c2412b; --hero-to: var(--hero-from); --brand-gradient:#c2412b; }
[data-accent="iris"]     { --accent:#5b55d9; --accent-600:#4b44bd; --accent-700:#3e3899; --accent-50:#f3f3ff; --accent-100:#e7e7ff; --hero-from:#4b44bd; --hero-to: var(--hero-from); --brand-gradient: var(--accent); }
[data-accent="bordeaux"] { --accent:#a21036; --accent-600:#8e0e2f; --accent-700:#760b27; --accent-50:#fbeef2; --accent-100:#f6dbe3; --hero-from:#a21036; --hero-to: var(--hero-from); --brand-gradient: var(--accent); }
[data-accent="teal"]  { --accent:#1b8079; --accent-600:#166a64; --accent-700:#12554f; --accent-50:#e9f8f6; --accent-100:#c9efe9; --hero-from:#1b8079; --hero-to: var(--hero-from); --brand-gradient: var(--accent); }
[data-accent="emerald"]  { --accent:#0b7a5a; --accent-600:#0a6a4e; --accent-700:#085a42; --accent-50:#e8f6f1; --accent-100:#cdeee3; --hero-from:#0b7a5a; --hero-to: var(--hero-from); --brand-gradient: var(--accent); }
[data-accent="ocean"]    { --accent:#1f6fd1; --accent-600:#1a5fb4; --accent-700:#154e95; --accent-50:#ebf3fd; --accent-100:#d4e5fb; --hero-from:#1f6fd1; --hero-to: var(--hero-from); --brand-gradient: var(--accent); }
[data-accent="sunset"]   { --accent:#e0592a; --accent-600:#c74b20; --accent-700:#a63e1a; --accent-50:#fdf0ea; --accent-100:#fadccf; --hero-from:#e0592a; --hero-to: var(--hero-from); --brand-gradient: var(--accent); }
[data-accent="graphite"] { --accent:#30364a; --accent-600:#262b3c; --accent-700:#1c2030; --accent-50:#eef0f5; --accent-100:#dde1ea; --hero-from:#30364a; --hero-to: var(--hero-from); --brand-gradient: var(--accent); }

[data-accent="custom"] { --accent-600: color-mix(in srgb, var(--accent) 86%, black); --accent-700: color-mix(in srgb, var(--accent) 72%, black);
  --accent-50: color-mix(in srgb, var(--accent) 8%, white); --accent-100: color-mix(in srgb, var(--accent) 18%, white);
  --hero-from: var(--accent); --hero-to: var(--accent); --brand-gradient: var(--accent); }

/* ---- dark mode ---- */
[data-mode="dark"] {
  --bg: #0b1222; --surface: #121a2e; --surface-2: #172036; --surface-3: #1c2640;
  --border: #25304a; --border-strong: #33405e;
  --text: #e8ebf1; --text-2: #a7b0c0; --text-3: #8a94a8;
  --accent-600: color-mix(in srgb, var(--accent) 80%, white); --accent-700: color-mix(in srgb, var(--accent) 60%, white);
  --accent-50: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-100: color-mix(in srgb, var(--accent) 26%, transparent);
  --ok: #4ade80; --warn: #fbbf24; --err: #f87171; --info: #60a5fa;
  --ok-bg: rgba(34,197,94,.16); --warn-bg: rgba(245,158,11,.16); --err-bg: rgba(239,68,68,.16); --info-bg: rgba(59,130,246,.16);
  --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---- density ---- */
[data-density="compact"] { --pad: 12px; --row-h: 40px; --ctrl-h: 38px; --fs: 14px; --fs-sm: 13px; }
[data-density="comfortable"] { --pad: 24px; --row-h: 56px; --ctrl-h: 48px; }

/* ---- radius style ---- */
[data-shape="sharp"] { --radius-sm: 3px; --radius: 4px; --radius-lg: 6px; --radius-xl: 8px; }
[data-shape="round"] { --radius-sm: 10px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; }

[data-mode="dark"][data-accent="graphite"] { --accent:#aab3c8; --accent-600:#c3cadb; --accent-700:#dde2ec; --accent-contrast:#0f1220; --brand-gradient: var(--accent); }

/* dark mode + Blog Automation navy: the brand navy is too dark on a dark page → a lighter navy of the same hue (white text stays ≥ 4.5:1) */
[data-mode="dark"]:not([data-accent]) { --accent: #565bc9; --accent-600: #6c71d4; --accent-700: #9da1e6; --brand-gradient: #565bc9; --hero-from: #565bc9; --hero-to: #565bc9; }