/* ==========================================================================
   StileSense — Design Tokens
   One file controls the brand. Change a value here and it flows everywhere.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --plum-900: #2a0f2a;
  --plum-800: #3d1340;
  --plum-700: #5a1a55;      /* primary wordmark colour */
  --plum-600: #7a2470;
  --magenta-500: #c0267e;   /* "Sense" accent */
  --violet-500: #7c4dff;    /* digital / intelligence accent */
  --violet-400: #9b7bff;
  --rose-300: #f4b6c8;
  --gold-400: #d9a441;      /* sparing luxury accent */

  /* Pillar colours (KNOW · STYLE · VALIDATE · CONNECT · LEARN) */
  --know: #3a78f2;
  --style: #df3f7c;
  --validate: #7c5cff;
  --connect: #ee7c2e;
  --learn: #11a39a;

  /* ---- Semantic colours (light) ---------------------------------------- */
  --bg: #fbf8f6;            /* warm ivory */
  --bg-elev: #ffffff;
  --bg-sunken: #f4eef0;
  --surface-tint: #f7f0fb;
  --text: #1f1427;
  --text-muted: #5d5166;
  --text-subtle: #857a8c;
  --border: #e8dfe7;
  --border-strong: #d6c8d6;
  --brand: var(--plum-700);
  --accent: var(--magenta-500);
  --accent-2: var(--violet-500);
  --link: #8a1f6a;
  --focus: #7c4dff;
  --success: #1f8f5f;
  --success-bg: #e3f5ec;
  --warn: #b26a00;
  --warn-bg: #fff2dc;

  --grad-brand: linear-gradient(120deg, #5a1a55 0%, #c0267e 55%, #7c4dff 100%);
  --grad-soft: radial-gradient(60% 60% at 15% 20%, rgba(223,63,124,.14), transparent 70%),
               radial-gradient(50% 50% at 85% 10%, rgba(124,77,255,.14), transparent 70%),
               radial-gradient(60% 60% at 70% 90%, rgba(17,163,154,.10), transparent 70%);

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: .78rem;
  --fs-sm: .9rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.2rem;
  --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  --fs-2xl: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
  --fs-3xl: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);
  --fs-hero: clamp(2.7rem, 1.6rem + 5vw, 5.4rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* ---- Space, radius, shadow, motion ----------------------------------- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;   --space-8: 4.5rem;
  --space-9: 6.5rem;

  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(42,15,42,.06), 0 1px 1px rgba(42,15,42,.04);
  --shadow: 0 10px 30px -12px rgba(58,19,64,.18), 0 2px 6px rgba(58,19,64,.06);
  --shadow-lg: 0 30px 70px -25px rgba(58,19,64,.35), 0 8px 20px -10px rgba(58,19,64,.12);

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .45s;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;

  color-scheme: light;
}

/* ---- Dark theme (auto, unless user forced light) ------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #140c17; --bg-elev: #1d1322; --bg-sunken: #0f0912; --surface-tint: #221629;
    --text: #f5eef6; --text-muted: #c4b6c8; --text-subtle: #9a8ca0;
    --border: #33253a; --border-strong: #463450;
    --brand: #f0c6e4; --accent: #ff6fb0; --accent-2: #a98bff; --link: #ff9fcf;
    --success-bg: #11321f; --warn-bg: #3a2a0d;
    --grad-soft: radial-gradient(60% 60% at 15% 20%, rgba(223,63,124,.20), transparent 70%),
                 radial-gradient(50% 50% at 85% 10%, rgba(124,77,255,.22), transparent 70%),
                 radial-gradient(60% 60% at 70% 90%, rgba(17,163,154,.14), transparent 70%);
    --shadow: 0 10px 30px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 30px 70px -25px rgba(0,0,0,.75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #140c17; --bg-elev: #1d1322; --bg-sunken: #0f0912; --surface-tint: #221629;
  --text: #f5eef6; --text-muted: #c4b6c8; --text-subtle: #9a8ca0;
  --border: #33253a; --border-strong: #463450;
  --brand: #f0c6e4; --accent: #ff6fb0; --accent-2: #a98bff; --link: #ff9fcf;
  --success-bg: #11321f; --warn-bg: #3a2a0d;
  --grad-soft: radial-gradient(60% 60% at 15% 20%, rgba(223,63,124,.20), transparent 70%),
               radial-gradient(50% 50% at 85% 10%, rgba(124,77,255,.22), transparent 70%),
               radial-gradient(60% 60% at 70% 90%, rgba(17,163,154,.14), transparent 70%);
  --shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 70px -25px rgba(0,0,0,.75);
  color-scheme: dark;
}