/* ===========================================================================
   Design tokens.
   Palette is drawn from stone and mineral: warm greys, a deep slate, and a
   single amethyst accent. No brand marks anywhere - the logo slot in the
   header is intentionally empty and carries a text wordmark until artwork
   is supplied.
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* Neutrals ------------------------------------------------------------- */
  --stone-50:  #faf9f7;
  --stone-100: #f3f1ed;
  --stone-200: #e7e3dc;
  --stone-300: #d4cec3;
  --stone-400: #a9a094;
  --stone-500: #7d7468;
  --stone-600: #5a5249;
  --stone-700: #403a33;
  --stone-800: #2b2622;
  --stone-900: #1a1714;
  --stone-950: #0f0d0c;

  /* Accent (amethyst) ----------------------------------------------------- */
  --accent-100: #efe9f8;
  --accent-300: #c4b0e4;
  --accent-500: #7c5bb5;
  --accent-600: #674a99;
  --accent-700: #533b7c;

  /* Semantic -------------------------------------------------------------- */
  --success-bg: #e8f3ec;  --success-fg: #1f6b40;  --success-br: #b6ddc5;
  --warning-bg: #fdf3e0;  --warning-fg: #8a5a12;  --warning-br: #efd6a8;
  --danger-bg:  #fceceb;  --danger-fg:  #9a2b24;  --danger-br: #f0c2bf;
  --info-bg:    #eaf0f8;  --info-fg:    #2a4f85;  --info-br:   #c2d3ea;

  /* Surfaces -------------------------------------------------------------- */
  --bg:            var(--stone-50);
  --bg-raised:     #ffffff;
  --bg-sunken:     var(--stone-100);
  --bg-inset:      var(--stone-200);
  --fg:            var(--stone-900);
  --fg-muted:      var(--stone-600);
  --fg-subtle:     var(--stone-500);
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --accent:        var(--accent-600);
  --accent-hover:  var(--accent-700);
  --accent-soft:   var(--accent-100);
  --focus-ring:    var(--accent-500);

  /* Type ------------------------------------------------------------------ */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* Space ----------------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  --radius-sm: 4px;
  --radius:    7px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgb(26 23 20 / 0.05);
  --shadow-sm: 0 1px 3px rgb(26 23 20 / 0.07), 0 1px 2px rgb(26 23 20 / 0.04);
  --shadow:    0 4px 12px rgb(26 23 20 / 0.07), 0 1px 3px rgb(26 23 20 / 0.05);
  --shadow-lg: 0 12px 32px rgb(26 23 20 / 0.11), 0 4px 10px rgb(26 23 20 / 0.05);

  --header-h: 3.75rem;
  --sidebar-w: 15.5rem;
  --content-max: 78rem;

  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--stone-950);
    --bg-raised:     var(--stone-900);
    --bg-sunken:     #131110;
    --bg-inset:      var(--stone-800);
    --fg:            var(--stone-100);
    --fg-muted:      var(--stone-400);
    --fg-subtle:     var(--stone-500);
    --border:        #2e2925;
    --border-strong: #3d3730;
    --accent:        var(--accent-300);
    --accent-hover:  #d6c8ef;
    --accent-soft:   #241d33;
    --focus-ring:    var(--accent-300);

    --success-bg: #10251a;  --success-fg: #82d3a4;  --success-br: #1f5136;
    --warning-bg: #2a1f0d;  --warning-fg: #e9be76;  --warning-br: #5a431a;
    --danger-bg:  #2a1311;  --danger-fg:  #f0a8a2;  --danger-br: #5e2823;
    --info-bg:    #111d2e;  --info-fg:    #9dc0ee;  --info-br:   #254268;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow:    0 4px 14px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  --bg:            var(--stone-950);
  --bg-raised:     var(--stone-900);
  --bg-sunken:     #131110;
  --bg-inset:      var(--stone-800);
  --fg:            var(--stone-100);
  --fg-muted:      var(--stone-400);
  --fg-subtle:     var(--stone-500);
  --border:        #2e2925;
  --border-strong: #3d3730;
  --accent:        var(--accent-300);
  --accent-hover:  #d6c8ef;
  --accent-soft:   #241d33;
  --focus-ring:    var(--accent-300);

  --success-bg: #10251a;  --success-fg: #82d3a4;  --success-br: #1f5136;
  --warning-bg: #2a1f0d;  --warning-fg: #e9be76;  --warning-br: #5a431a;
  --danger-bg:  #2a1311;  --danger-fg:  #f0a8a2;  --danger-br: #5e2823;
  --info-bg:    #111d2e;  --info-fg:    #9dc0ee;  --info-br:   #254268;
}