/*
  Alpstreams Design Tokens
  Three layers per Architecture §1: primitives -> semantic -> component.
  Components (css/components/*.css) reference ONLY semantic/component tokens,
  never primitives directly. Changing a theme means editing this file only.
*/

:root{
  /* ---- Layer 1: Primitives ---- */
  --color-black-950:#0A0A0A;
  --color-black-900:#141414;
  --color-black-800:#1E1E1E;
  --color-amber-500:#FBB03B;
  --color-amber-600:#E09A28;
  --color-amber-100:#FDE7C2;
  --color-white-050:#FAFAFA;
  --color-white-300:#B8B8B8;
  --color-red-500:#E5484D;
  --color-green-500:#3DBE7C;

  /* ---- Layer 2: Semantic (Broadcast is the base :root theme) ---- */
  --surface-primary:var(--color-black-950);
  --surface-elevated:var(--color-black-900);
  --surface-card:var(--color-black-800);
  --text-primary:var(--color-white-050);
  --text-secondary:var(--color-white-300);
  --accent-interactive:var(--color-amber-500);
  --accent-interactive-hover:var(--color-amber-600);
  --accent-subtle:var(--color-amber-100);
  --border-subtle:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.16);
  --state-error:var(--color-red-500);
  --state-success:var(--color-green-500);

  /* decorative/compound tokens used by media-style treatments */
  --media-gradient-a:#1b1b1b;
  --media-gradient-b:#0d0d0d;
  --media-glow:rgba(251,176,59,0.14);
  --grid-line:rgba(255,255,255,0.03);
  --nav-blur-bg:rgba(10,10,10,0.85);
  --hero-scrim:rgba(10,10,10,0.35);

  /* ---- Layer 2: Elevation (theme-aware) ---- */
  --elevation-1:0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px var(--border-subtle);
  --elevation-2:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--border-subtle);
  --elevation-3:0 24px 64px rgba(0,0,0,0.6);

  /* ---- Type ---- */
  --font-display:'General Sans','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --text-display-xl:56px; --text-display-l:40px; --text-display-m:28px;
  --text-heading:20px; --text-body-l:18px; --text-body-m:16px; --text-caption:13px;

  /* ---- Spacing (8px base) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  /* ---- Motion ---- */
  --ease-signature:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:150ms; --duration-base:200ms; --duration-slow:500ms;

  /* ---- Grid ---- */
  --container-max:1280px;
  --gutter-desktop:32px;
  --gutter-mobile:16px;
}

/* ---- Broadcast theme (explicit alias of :root defaults) ---- */
:root[data-theme="broadcast"]{ /* inherits :root values above */ }

/* ---- Studio theme ---- */
:root[data-theme="studio"]{
  --surface-primary:#FAF8F5;
  --surface-elevated:#FFFFFF;
  --surface-card:#FFFFFF;
  --text-primary:#171512;
  --text-secondary:#6B6560;
  --accent-interactive:#E0921F;
  --accent-interactive-hover:#C67D14;
  --accent-subtle:#FDF0DA;
  --border-subtle:rgba(23,21,18,0.08);
  --border-strong:rgba(23,21,18,0.14);
  --elevation-1:0 1px 2px rgba(23,21,18,0.06), 0 0 0 1px var(--border-subtle);
  --elevation-2:0 12px 32px rgba(23,21,18,0.10), 0 0 0 1px var(--border-subtle);
  --elevation-3:0 24px 64px rgba(23,21,18,0.16);

  --media-gradient-a:#F1ECE4;
  --media-gradient-b:#FBF9F6;
  --media-glow:rgba(224,146,31,0.12);
  --grid-line:rgba(23,21,18,0.035);
  --nav-blur-bg:rgba(250,248,245,0.85);
  --hero-scrim:rgba(250,248,245,0.25);
}

/* Theme-change transition, only active while html.theme-transition is present (see js/core/theme.js) */
html.theme-transition, html.theme-transition *{
  transition:background-color var(--duration-base) var(--ease-signature),
             color var(--duration-base) var(--ease-signature),
             border-color var(--duration-base) var(--ease-signature),
             box-shadow var(--duration-base) var(--ease-signature) !important;
}
@media (prefers-reduced-motion: reduce){
  html.theme-transition, html.theme-transition *{ transition:none !important; }
}