/*
 * Design tokens — mirrored from the Figma variable collections in
 * "BYSA Summer Camp Website" → page "Final Design 2026".
 * Names follow Figma's paths ("text/on-alt" → --text-on-alt).
 *
 *   Theme          yearly brand colours + font (2026 values)
 *   Color – Primitives   fixed neutrals and gallery glows
 *   Color – Mode   roles applied to layers; Dark (default) and Light
 *   Type – Core / Type – Theme / Type – Scale (Desktop + Mobile)
 */

:root {
  /* ---------- Theme · 2026 (swap these each year) ---------- */
  --color-primary: #8cd1f2;
  --color-on-primary: #2b3351;
  --color-secondary: #2f71af;
  --color-accent: #c41a77;
  --color-spectrum-1-start: #f1733e;
  --color-spectrum-1-end: #b61523;
  --color-spectrum-2-start: #b92358;
  --color-spectrum-3-start: #7402e6;
  --color-spectrum-3-end: #7402e6;
  --color-spectrum-4-start: #140541;
  --color-spectrum-4-end: #114aef;

  --font-family: "Google Sans Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---------- Color – Primitives ---------- */
  --neutral-black: #010000;
  --neutral-white: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #eaeaea;
  --neutral-300: #cecece;
  --neutral-500: #6b6b6b;
  --neutral-700: #3d3d3d;

  --glow-gallery-1: rgb(249 252 20 / 0.1);
  --glow-gallery-2: rgb(246 6 250 / 0.15);
  --glow-gallery-3: rgb(124 8 240 / 0.25);

  /* ---------- Type – Core ---------- */
  --core-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Color – Mode: Dark (default) ---------- */
:root,
[data-theme="dark"] {
  --surface-page: var(--neutral-black);
  --surface-card: var(--neutral-black);
  --surface-alt: var(--neutral-100);
  --surface-inverse: var(--neutral-white);

  --text-primary: var(--neutral-white);
  --text-secondary: var(--neutral-100);
  --text-muted: var(--neutral-300);
  --text-nav: var(--neutral-50);
  --text-on-alt: var(--neutral-black);
  --text-on-inverse: var(--neutral-black);
  --text-info: var(--color-secondary);

  --border-info: var(--color-secondary);
  --border-strong: var(--neutral-white);

  --icon-primary: var(--neutral-white);
  --icon-nav: var(--neutral-white);

  --action-primary: var(--color-primary);
  --action-on-primary: var(--color-on-primary);

  --shadow-text: rgb(0 0 0 / 0.25);
}

/* ---------- Color – Mode: Light ---------- */
[data-theme="light"] {
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-white);
  --surface-alt: var(--neutral-black);
  --surface-inverse: var(--neutral-black);

  --text-primary: var(--neutral-black);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-500);
  /* TODO: text/nav and icon/nav Light values weren't exposed by the Light frame; confirm in Figma. */
  --text-on-alt: var(--neutral-white);
  --text-on-inverse: var(--neutral-white);
  --text-info: var(--color-secondary);

  --border-info: var(--color-secondary);
  --border-strong: var(--neutral-black);

  --icon-primary: var(--neutral-black);

  --action-primary: var(--color-on-primary);
  --action-on-primary: var(--color-primary);

  --shadow-text: transparent;
}

/* ---------- Type – Scale: Desktop (default) ---------- */
:root {
  --theme-hero-title-size: 29px;
  --theme-hero-title-letter-spacing: 11px;
  --theme-stat-size: 42px;
  --theme-stat-letter-spacing: 2.1px;
  --theme-info-size: 28px;
  --theme-info-letter-spacing: 1.4px;
  --theme-button-size: 24px;
  --theme-button-letter-spacing: 0px;

  --core-display-size: 100px;
  --core-display-letter-spacing: 0px;
  --core-display-light-size: 100px;
  --core-display-light-letter-spacing: 0px;
  --core-title-xl-size: 48px;
  --core-title-xl-letter-spacing: 0px;
  --core-title-l-size: 32px;
  --core-title-l-letter-spacing: 0px;
  --core-title-m-size: 24px;
  --core-title-m-letter-spacing: 0px;
  --core-overline-size: 32px;
  --core-overline-letter-spacing: 3.5px;
  --core-label-size: 24px;
  --core-label-letter-spacing: 0px;
  --core-body-large-medium-size: 24px;
  --core-body-large-medium-line-height: 36px;
  --core-body-large-medium-letter-spacing: 0px;
  --core-body-large-regular-size: 24px;
  --core-body-large-regular-line-height: 36px;
  --core-body-large-regular-letter-spacing: 0px;
  --core-caption-size: 14px;
  --core-caption-line-height: 21px;
  --core-caption-letter-spacing: 0px;
  --core-marquee-size: 22px;
  --core-marquee-letter-spacing: 0.4px;
  --core-nav-link-size: 18px;
  --core-nav-link-letter-spacing: 0px;
  --core-nav-cta-size: 18px;
  --core-nav-cta-letter-spacing: 0px;
  --core-wordmark-size: 24px;
  --core-wordmark-letter-spacing: 1px;
  --core-wordmark-small-size: 16px;
  --core-wordmark-small-letter-spacing: 0.8px;
}

/* ---------- Type – Scale: Mobile ---------- */
@media (max-width: 767.98px) {
  :root {
    --theme-hero-title-size: 16px;
    --theme-hero-title-letter-spacing: 2.6px;
    --theme-stat-size: 28px;
    --theme-stat-letter-spacing: 1.4px;
    --theme-info-size: 18px;
    --theme-info-letter-spacing: 0.9px;
    --theme-button-size: 18px;

    --core-display-size: 48px;
    --core-display-light-size: 48px;
    --core-title-xl-size: 32px;
    --core-title-l-size: 24px;
    --core-title-m-size: 16px;
    --core-overline-size: 20px;
    --core-overline-letter-spacing: 1.6px;
    --core-label-size: 14px;
    --core-body-large-medium-size: 16px;
    --core-body-large-medium-line-height: 24px;
    --core-body-large-regular-size: 16px;
    --core-body-large-regular-line-height: 24px;
    --core-marquee-size: 18px;
    --core-wordmark-size: 16px;
    --core-wordmark-letter-spacing: 0.6px;
    --core-wordmark-small-size: 14px;
    --core-wordmark-small-letter-spacing: 0.7px;
  }
}