/* Night Atelier — brand tokens. Pages must use var(--color-*) only. */

[data-theme="light"] {
  /* Cooler stone atelier — Style A sharpen (avoid warm cream SaaS) */
  --color-bg: #e4e3e0;
  --color-surface: #f2f1ee;
  --color-surface-elevated: #f9f8f6;
  --color-text: #12141a;
  --color-muted: #5c5e66;
  --color-accent: #b8922a;
  --color-border: #c9c7c1;
  --color-danger: #b42318;
  --color-success: #067647;
  --color-surface-solid: #f9f8f6;
  --color-accent-subtle: rgba(184, 146, 42, 0.14);
  --color-on-accent: #12141a;
  --glass-bg: rgba(242, 241, 238, 0.92);
  --glass-border: color-mix(in srgb, #b8922a 28%, rgba(201, 199, 193, 0.95));
  --glass-blur: 12px;
  /* Atelier wash — limestone + faint gold mist (not flat paper) */
  --bg-gradient:
    radial-gradient(
      ellipse 120% 70% at 50% -12%,
      color-mix(in srgb, #b8922a 6%, transparent),
      transparent 58%
    ),
    linear-gradient(165deg, #e4e3e0 0%, #d6d4cf 44%, #dfddd8 100%);
  --bg-grain-opacity: 0.04;
  --radius: 0.45rem;
  --radius-lg: 0.75rem;
  --shadow: 0 1px 2px rgba(18, 20, 26, 0.05);
  --shadow-lift: 0 10px 24px rgba(18, 20, 26, 0.08);
  --font-sans: var(--font-fa);
  --font-heading: var(--font-fa);

  /* Claymorphism tokens (hue-matched to Night Atelier) */
  --clay-background: var(--color-surface-solid);
  --clay-border-radius: var(--radius);
  --clay-shadow-outset: 7px 9px 22px 0 color-mix(in srgb, #5c4a28 22%, transparent);
  --clay-shadow-inset-primary: -5px -6px 12px 0 color-mix(in srgb, #8a7340 22%, transparent);
  --clay-shadow-inset-secondary: 5px 6px 12px 0 rgba(255, 255, 255, 0.62);

  /* Classic salon stage (cooler stone — not forced black in light) */
  --color-theater-bg: #ddd9d2;
  --color-theater-surface: #ebe8e2;
  --color-theater-elevated: #f9f8f6;
  --color-theater-fabric: #6b3038;
  --color-theater-fabric-mid: #7e3c45;
  --color-theater-fabric-edge: #4a2127;
  --color-theater-deep: #d0cbc3;
  --color-stage: #e4e0d8;
  --color-stage-deep: #d5d0c6;
  --color-stage-ink: #12141a;
  --color-spot: #b8922a;

  /* Scrollbars — soft stone track, muted thumb, gold on interaction */
  --scrollbar-size: 0.625rem;
  --scrollbar-size-thin: 0.375rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(in srgb, var(--color-muted) 42%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--color-accent) 55%, var(--color-muted));
  --scrollbar-thumb-active: var(--color-accent);
}

[data-theme="dark"] {
  /* Night atelier clay — body sits closer to stage/sidebar brown (not near-black) */
  --color-bg: #1a1612;
  --color-surface: #211c17;
  --color-surface-elevated: #2a241e;
  --color-text: #e8eaed;
  --color-muted: #a39a8e;
  --color-accent: #d4b56a;
  --color-border: #3f3830;
  --color-danger: #f0a8a8;
  --color-success: #47cd89;
  --color-surface-solid: #211c17;
  --color-accent-subtle: rgba(212, 181, 106, 0.18);
  --color-on-accent: #1a1612;
  --glass-bg: rgba(33, 28, 23, 0.84);
  --glass-border: color-mix(in srgb, #d4b56a 38%, rgba(63, 56, 48, 0.55));
  --glass-blur: 14px;
  /* Warm clay wash — same family as page-stage / sidebar */
  --bg-gradient:
    radial-gradient(
      ellipse 110% 65% at 50% -10%,
      color-mix(in srgb, #d4b56a 10%, transparent),
      transparent 58%
    ),
    linear-gradient(165deg, #1a1612 0%, #221c17 46%, #1c1813 100%);
  --bg-grain-opacity: 0.045;
  --radius: 0.65rem;
  --radius-lg: 1rem;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 16px 36px rgba(0, 0, 0, 0.45);
  --font-sans: var(--font-fa);
  --font-heading: var(--font-fa);

  /* Claymorphism tokens — night clay (soft gold sheen) */
  --clay-background: var(--color-surface-elevated);
  --clay-border-radius: var(--radius);
  --clay-shadow-outset: 8px 12px 26px 0 rgba(0, 0, 0, 0.55);
  --clay-shadow-inset-primary: -5px -6px 14px 0 rgba(0, 0, 0, 0.5);
  --clay-shadow-inset-secondary: 5px 6px 12px 0 color-mix(in srgb, var(--color-accent) 28%, transparent);

  /* Night atelier stage — one step lighter than body for desk lift */
  --color-theater-bg: #1f1b17;
  --color-theater-surface: #26211b;
  --color-theater-elevated: #322b24;
  --color-theater-fabric: #211c17;
  --color-theater-fabric-mid: #2a241e;
  --color-theater-fabric-edge: #1a1612;
  --color-theater-deep: #15120f;
  --color-stage: #26211b;
  --color-stage-deep: #1f1b17;
  --color-stage-ink: #e8eaed;
  --color-spot: #d4b56a;

  /* Scrollbars — night track, soft gold thumb */
  --scrollbar-size: 0.625rem;
  --scrollbar-size-thin: 0.375rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(in srgb, var(--color-muted) 48%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--color-accent) 62%, var(--color-muted));
  --scrollbar-thumb-active: var(--color-accent);
}

html[lang="en"] {
  --font-sans: var(--font-en);
  /* Style A: brand/hero display face (local system serif — no CDN) */
  --font-heading: var(--font-display);
}