/* SorayaOS semantic color tokens. This file is the one source of theme values
   for the website, documentation and future control surfaces.

   Scope: add data-soraya to the themed surface (usually <html>). With no
   data-theme the surface follows the system appearance; data-theme="light"
   or data-theme="dark" forces one theme, including on nested specimens.

   Every role is declared once with light-dark(light, dark). Components
   consume roles such as --text, --primary and --border-control; they never
   pick brand swatches directly. `go run ./hack/brandcheck` reads this file,
   splits each light-dark() pair and checks the intended foreground and
   background pairings for both themes. */
[data-soraya] {
  color-scheme: light dark;

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
    monospace;

  /* Surfaces: warm paper by day, night plum after dark */
  --bg-page: light-dark(#FBF4EC, #241C2C);
  --bg-surface: light-dark(#FFFCF8, #302638);
  --bg-raised: light-dark(#FFFCF8, #382D40);
  --bg-subtle: light-dark(#F2E8EE, #2B2133);
  --bg-hover: light-dark(#EEE1EE, #3F3048);
  --bg-active: light-dark(#E7D8E9, #473550);

  /* Text */
  --text: light-dark(#35293F, #FBF4EC);
  --text-muted: light-dark(#69566F, #D6C5D8);
  --text-placeholder: light-dark(#69566F, #D6C5D8);

  /* Boundaries */
  --border: light-dark(#D9C8DA, #65516D);
  --border-control: light-dark(#86708D, #AC90B6);

  /* Twilight actions, starlight after dark */
  --primary: light-dark(#724681, #D2ABDA);
  --primary-hover: light-dark(#61386F, #E4C3EA);
  --primary-active: light-dark(#512C60, #C39ACE);
  --on-primary: light-dark(#FFFCF8, #241C2C);
  --link: light-dark(#724681, #D2ABDA);
  --link-hover: light-dark(#61386F, #E4C3EA);
  --link-active: light-dark(#512C60, #C39ACE);
  --link-visited: light-dark(#5E4C66, #C7B6CC);
  --focus: light-dark(#724681, #D2ABDA);

  /* Selection and fields */
  --selected-bg: light-dark(#E7D8E9, #473550);
  --selected-text: light-dark(#512C60, #F0D7F4);
  --selected-border: light-dark(#724681, #D2ABDA);
  --field-bg: light-dark(#FFFCF8, #2B2133);
  --field-readonly-bg: light-dark(#F2E8EE, #382D40);
  --disabled-bg: light-dark(#EDE4E6, #382D40);
  --disabled-text: light-dark(#69566F, #D6C5D8);

  /* Operational status: each has a background, text and essential border */
  --success-bg: light-dark(#E4F2E9, #18392D);
  --success-text: light-dark(#205C3B, #A2DEB6);
  --success-border: light-dark(#39794F, #7BC998);
  --warning-bg: light-dark(#FFF0CF, #40331B);
  --warning-text: light-dark(#704600, #F4D48B);
  --warning-border: light-dark(#956000, #D6B466);
  --danger-bg: light-dark(#FBE9E5, #432B2A);
  --danger-text: light-dark(#963D31, #F5B4A7);
  --danger-border: light-dark(#B14A3B, #EB9D90);
  --info-bg: light-dark(#E5EFF8, #20364A);
  --info-text: light-dark(#285B83, #AFD4F3);
  --info-border: light-dark(#3977A4, #87BCE5);
  --neutral-bg: light-dark(#F2E8EE, #382D40);
  --neutral-text: light-dark(#69566F, #D6C5D8);
  --neutral-border: light-dark(#86708D, #AC90B6);
  --destructive: light-dark(#963D31, #F5B4A7);
  --destructive-hover: light-dark(#7E3027, #F8C9BF);
  --destructive-active: light-dark(#64261F, #EEA091);
  --on-destructive: light-dark(#FFFCF8, #432B2A);

  /* Code, hero and inverse panels */
  --code-bg: light-dark(#35293F, #1C1523);
  --code-text: light-dark(#FBF4EC, #FBF4EC);
  --code-muted: light-dark(#CDB9D2, #BFAAC6);
  --hero-bg: light-dark(#241C2C, #1C1523);
  --hero-text: light-dark(#FBF4EC, #FBF4EC);
  --hero-muted: light-dark(#D6C5D8, #D6C5D8);
  --hero-accent: light-dark(#D2ABDA, #D2ABDA);
  --hero-gold: light-dark(#D6B477, #D6B477);

  /* Decorative gold: never for small text, focus or essential controls */
  --accent: light-dark(#B58A47, #D6B477);

  /* Text selection */
  --selection-bg: light-dark(#724681, #D2ABDA);
  --selection-text: light-dark(#FFFCF8, #241C2C);

  /* Categorical chart series, in stable order */
  --chart-1: light-dark(#724681, #D2ABDA);
  --chart-2: light-dark(#7A5211, #F4D48B);
  --chart-3: light-dark(#236B6B, #8BD5C9);
  --chart-4: light-dark(#A34332, #F5B4A7);
  --chart-5: light-dark(#326D9C, #AFD4F3);
  --chart-grid: light-dark(#D9C8DA, #65516D);

  /* Non-color surfaces */
  --skeleton: light-dark(#E7D8E9, #473550);
  --overlay: light-dark(rgb(36 28 44 / 64%), rgb(12 8 16 / 76%));
  --shadow-raised: light-dark(0 12px 32px rgb(53 41 63 / 16%), 0 12px 32px rgb(0 0 0 / 40%));
}
/* A forced theme on the surface itself or on any nested specimen board. */
[data-soraya][data-theme="light"], [data-soraya] [data-theme="light"] { color-scheme: light; }
[data-soraya][data-theme="dark"], [data-soraya] [data-theme="dark"] { color-scheme: dark; }

/* Shared behavior for every surface that uses these tokens. */
[data-soraya] ::selection { background: var(--selection-bg); color: var(--selection-text); }
[data-soraya] :where(button, input, select, textarea, progress) { accent-color: var(--primary); }
[data-soraya] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
@media (forced-colors: active) {
  [data-soraya] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-soraya] *, [data-soraya] *::before, [data-soraya] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}