/* Design tokens.
 *
 * Color tokens hold both variants as light-dark(<light>, <dark>). Which one
 * applies follows `color-scheme`: the OS preference by default, or the
 * explicit choice stored in data-theme="light|dark" on <html>.
 * Shape and typography tokens are mode-independent so design themes can
 * override them in one place.
 *
 * Design themes (css/themes/<id>.css, listed in css/themes/themes.json)
 * override tokens only, scoped to [data-design="<id>"]. The defaults below
 * are re-declared on every [data-design] element so a theme preview nested
 * in a page with another theme starts from the defaults, and derived tokens
 * (var() references) resolve against that element's own values. A seasonal
 * theme also scopes its tokens to [data-season], set next to data-design. */
:root { color-scheme: light dark; }

:root, [data-design] {
  /* Brand */
  --color-primary:        light-dark(#2b8a3e, #51cf66);
  --color-primary-hover:  light-dark(#237032, #69db7c);
  --color-primary-soft:   light-dark(#ebfbee, rgba(81, 207, 102, 0.14));
  --color-primary-ring:   light-dark(rgba(43, 138, 62, 0.35), rgba(81, 207, 102, 0.4));
  --color-on-primary:     light-dark(#ffffff, #0b1f10);
  --color-secondary:       light-dark(#6741d9, #9775fa);
  --color-secondary-hover: light-dark(#5730c9, #b197fc);
  --color-secondary-soft:  light-dark(#f3f0ff, rgba(151, 117, 250, 0.16));
  --color-on-secondary:    light-dark(#ffffff, #120a2e);
  --color-accent:          var(--color-secondary);
  --color-on-gradient:     #ffffff;

  /* Surfaces */
  --color-bg:          light-dark(#f6f7fb, #10121c);
  --color-bg-gradient: radial-gradient(1200px 600px at 10% -10%, light-dark(#eefbf1, rgba(81, 207, 102, 0.08)) 0%, transparent 60%),
                       radial-gradient(900px 500px at 110% 0%, light-dark(#f1edff, rgba(151, 117, 250, 0.1)) 0%, transparent 55%);
  --color-surface:     light-dark(#ffffff, #1a1d2b);
  --color-surface-alt: light-dark(#f1f3f5, #23273a);
  --color-surface-sunken: light-dark(#e9ecef, #141724);
  --color-text:        light-dark(#1a1b2e, #eceef5);
  --color-text-muted:  light-dark(#5c6370, #a9afc0);
  --color-text-faint:  light-dark(#868e96, #7d8499);

  /* Semantic */
  --color-success:        light-dark(#2b8a3e, #69db7c);
  --color-success-bg:     light-dark(#ebfbee, rgba(105, 219, 124, 0.12));
  --color-success-border: light-dark(#8ce99a, rgba(105, 219, 124, 0.45));
  --color-error:          light-dark(#c92a2a, #ff8787);
  --color-error-bg:       light-dark(#fff5f5, rgba(255, 135, 135, 0.12));
  --color-error-border:   light-dark(#ffa8a8, rgba(255, 135, 135, 0.5));
  --color-on-error:       light-dark(#ffffff, #2b0b0b);
  --color-warning:        light-dark(#a35200, #ffc078);
  --color-warning-bg:     light-dark(#fff4e6, rgba(255, 192, 120, 0.12));
  --color-warning-border: light-dark(#ffc078, rgba(255, 192, 120, 0.45));
  --color-info:           light-dark(#1864ab, #74c0fc);
  --color-info-bg:        light-dark(#e7f5ff, rgba(116, 192, 252, 0.12));
  /* Status "played" (completed): its own hue, apart from info, warning and
   * success, so the four status pills of a quiz stay distinct in every theme. */
  --color-completed:      light-dark(#6741d9, #b197fc);
  --color-completed-bg:   light-dark(#f3f0ff, rgba(151, 117, 250, 0.16));
  --color-star:           #fab005;

  /* Logo mark (the favicon keeps these colors) */
  --logo-bg:  #2b8a3e;
  --logo-fg:  #ffffff;
  --logo-dot: #b197fc;

  /* Question type badges */
  --badge-mc-bg:   light-dark(#e7f5ff, rgba(116, 192, 252, 0.16)); --badge-mc-fg:   light-dark(#1864ab, #a5d8ff);
  --badge-ft-bg:   light-dark(#fff4e6, rgba(255, 192, 120, 0.16)); --badge-ft-fg:   light-dark(#a35200, #ffd8a8);
  --badge-dnd-bg:  light-dark(#f3f0ff, rgba(151, 117, 250, 0.18)); --badge-dnd-fg:  light-dark(#5f3dc4, #d0bfff);
  --badge-draft-bg: light-dark(#f1f3f5, rgba(173, 181, 189, 0.16)); --badge-draft-fg: light-dark(#495057, #ced4da);
  --badge-live-bg: light-dark(#ebfbee, rgba(105, 219, 124, 0.16)); --badge-live-fg: light-dark(#2b8a3e, #b2f2bb);

  /* Subject colors */
  --subject-math:     light-dark(#1c7ed6, #74c0fc);
  --subject-german:   light-dark(#e8590c, #ffa94d);
  --subject-science:  light-dark(#2b8a3e, #69db7c);
  --subject-english:  light-dark(#c2255c, #f783ac);
  --subject-music:    light-dark(#7048e8, #b197fc);
  --subject-art:      light-dark(#e67700, #ffd43b);
  --subject-sport:    light-dark(#0c8599, #66d9e8);
  --subject-religion: light-dark(#5c940d, #a9e34b);
  --subject-book:     light-dark(#495057, #ced4da);
  --subject-geography: light-dark(#3b5bdb, #91a7ff);
  --subject-history:  light-dark(#a65e2e, #e8a77a);
  --subject-biology:  light-dark(#099268, #63e6be);
  --subject-physics:  light-dark(#9c36b5, #e599f7);
  --subject-computer: light-dark(#c92a2a, #ff8787);
  --subject-language: light-dark(#a61e4d, #faa2c1);

  /* Toasts (inverted against the page) */
  --toast-bg:         light-dark(#212529, #eceef5);
  --toast-fg:         light-dark(#ffffff, #10121c);
  --toast-success-fg: light-dark(#8ce99a, #2b8a3e);
  --toast-error-fg:   light-dark(#ffa8a8, #c92a2a);

  /* Neutral shades */
  --color-neutral-50:  #f8f9fa;
  --color-neutral-100: #f1f3f5;
  --color-neutral-200: #e9ecef;
  --color-neutral-300: #dee2e6;
  --color-neutral-400: #ced4da;
  --color-neutral-500: #adb5bd;
  --color-neutral-600: #868e96;
  --color-neutral-700: #495057;
  --color-neutral-800: #343a40;
  --color-neutral-900: #212529;

  /* Borders */
  --color-border:       light-dark(#dee2e6, #2e3349);
  --color-border-strong: light-dark(#ced4da, #3b4160);
  --color-border-focus: var(--color-secondary);
  --color-divider:      light-dark(#edf0f2, #252a3d);
  --color-card-border:  var(--color-divider); /* frames of cards, tiles, dialogs, fieldsets and the sidebar */
  --color-footer-bg:    transparent; /* surface of the footer with the operator links (decision 157) */
  --color-footer-line:  transparent;
  --focus-ring:         0 0 0 3px light-dark(rgba(103, 65, 217, 0.4), rgba(151, 117, 250, 0.55));
  --border-width-sm: 1px;
  --border-width-md: 1.5px;
  --border-width-lg: 2px;

  /* Overlay */
  --color-overlay: light-dark(rgba(17, 20, 39, 0.55), rgba(4, 5, 12, 0.7));

  /* Typography */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: var(--font-family);
  --font-button: var(--font-family);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-base: 1.55;
  --tracking-heading: -0.02em; /* h1 and brand; h2 takes half */

  /* Spacing */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --radius-inner: calc(var(--radius-md) - 3px); /* nested in a padded control */

  /* Elevation */
  --shadow-sm:    0 1px 2px light-dark(rgba(20, 24, 48, 0.06), rgba(0, 0, 0, 0.4));
  /* light-dark() takes colors only: where geometry differs per mode, both
     layers are listed and the inactive one is transparent. */
  --shadow-card:  0 1px 3px light-dark(rgba(20, 24, 48, 0.06), rgba(0, 0, 0, 0.35)),
                  0 4px 14px light-dark(rgba(20, 24, 48, 0.05), transparent),
                  0 6px 18px light-dark(transparent, rgba(0, 0, 0, 0.25));
  --shadow-lift:  0 6px 24px light-dark(rgba(20, 24, 48, 0.12), transparent),
                  0 10px 30px light-dark(transparent, rgba(0, 0, 0, 0.45));
  --shadow-modal: 0 24px 64px light-dark(rgba(20, 24, 48, 0.28), rgba(0, 0, 0, 0.6));
  --shadow-button: 0 2px 0 light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35));
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  --answer-depth: 3px; /* pressable underline of answer buttons */

  /* Motion */
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 400ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Sizes */
  --control-height: 2.75rem; /* 44px touch target */
  --sidebar-width: 240px;
}

/* Explicit choice from the theme toggle overrides the OS preference. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }