/* UNNIBO design tokens — source of truth: DESIGN.md §3–§6, §16, §21a (theme).
   Pages use the semantic --color-* tokens only. Raw brand values exist for documentation.
   Theme: <html data-theme="light|dark"> is set before first paint by design/prefs.js.
   Without JS the system preference applies through the media query below. */

:root {
  color-scheme: light;

  /* Neutral (DESIGN.md §3) */
  --color-background: #F8F7F3;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F2F0EA;
  --color-text-primary: #1B1B1B;
  --color-text-secondary: #5F6368;
  --color-text-muted: #8A8F98;          /* large or decorative text only: 3.1:1 on background */
  --color-text-muted-strong: #686D75;   /* AA-safe muted text for small sizes: 4.9:1 */
  --color-border: #E4E0D7;
  --color-border-strong: #CFCABE;

  /* Brand */
  --color-brand-primary: #125C6D;
  --color-brand-primary-hover: #0D4856;
  --color-brand-primary-soft: #E2EEF0;
  --color-on-brand-primary: #FFFFFF;
  --color-brand-yellow: #F4C542;
  --color-brand-yellow-hover: #E8B82A;
  --color-brand-yellow-soft: #FCF1CF;
  --color-on-brand-yellow: #1B1B1B;
  --color-brand-fresh: #7BAE7F;
  --color-brand-coral: #E97A5D;
  --color-link: #125C6D;

  /* Semantic */
  --color-success: #2F8F5B;
  --color-warning: #D59A1A;
  --color-error: #C94B4B;
  --color-info: #3A79C9;
  --color-warning-soft: #FBF0D9;
  --color-error-soft: #F8E4E4;

  /* Interaction */
  --color-focus: #125C6D;
  --color-overlay: rgba(27, 27, 27, 0.45);
  --color-footer: #0D4856;
  --color-on-footer: #FFFFFF;
  --color-on-footer-secondary: #C9DDE1;

  /* Typography (DESIGN.md §4) */
  --font-ui: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
  --text-hero: clamp(2.25rem, 1.2rem + 4.2vw, 4rem);          /* 36–48px mobile → 64px desktop */
  --text-page-title: clamp(2.125rem, 1.6rem + 2vw, 3rem);     /* 34 → 48 */
  --text-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);         /* 28 → 40 */
  --text-h2: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);           /* 26 → 32 */
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body-l: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --leading-hero: 1.08;
  --leading-title: 1.12;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing (DESIGN.md §5): 4 8 12 16 24 32 40 48 64 80 96 120 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-9: 64px; --space-10: 80px; --space-11: 96px; --space-12: 120px;
  --section-y: clamp(64px, 6vw + 32px, 120px);

  /* Layout */
  --container: 1280px;
  --page-padding: 20px;    /* mobile */
  --gutter: 16px;
  --header-h: 60px;
  --control-h: 48px;
  --control-h-sm: 40px;

  /* Breakpoints (reference; media queries repeat these literals):
     mobile <640 · small tablet 640–767 · tablet 768–1023 · desktop 1024–1439 · wide ≥1440 */

  /* Shape & depth (DESIGN.md §6) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-border);
  --shadow-hover: 0 8px 20px -12px rgba(27, 27, 27, 0.22);
  --shadow-overlay: 0 24px 48px -24px rgba(27, 27, 27, 0.35);

  /* Motion (DESIGN.md §16) */
  --dur-hover: 150ms;
  --dur-standard: 200ms;
  --dur-major: 300ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 640px) { :root { --gutter: 20px; } }
@media (min-width: 1024px) { :root { --page-padding: 40px; --gutter: 24px; --header-h: 64px; } }

/* ── Dark theme ─────────────────────────────────────────────────────────────
   Teal is lightened so links and active states stay readable (≥7:1 on surface);
   yellow keeps dark text. All text pairs meet WCAG AA. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #111615;
  --color-surface: #182020;
  --color-surface-muted: #1F2827;
  --color-text-primary: #EDEFEC;
  --color-text-secondary: #B3BAB7;
  --color-text-muted: #8E9592;
  --color-text-muted-strong: #A3AAA7;
  --color-border: #2C3533;
  --color-border-strong: #3E4846;

  --color-brand-primary: #5DB2C3;
  --color-brand-primary-hover: #7BC4D2;
  --color-brand-primary-soft: #1C3439;
  --color-on-brand-primary: #0A1A1E;
  --color-brand-yellow: #F4C542;
  --color-brand-yellow-hover: #F7D263;
  --color-brand-yellow-soft: #3A3218;
  --color-on-brand-yellow: #1B1B1B;
  --color-brand-fresh: #8FC293;
  --color-brand-coral: #F08E74;
  --color-link: #7BC4D2;

  --color-success: #5CBF87;
  --color-warning: #E6B24A;
  --color-error: #E68383;
  --color-info: #7AA8E6;
  --color-warning-soft: #3A2F17;
  --color-error-soft: #3B1F1F;

  --color-focus: #F4C542;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-footer: #0B2328;
  --color-on-footer: #EDEFEC;
  --color-on-footer-secondary: #A9C4C9;

  --shadow-hover: 0 8px 20px -12px rgba(0, 0, 0, 0.7);
  --shadow-overlay: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
}

/* No-JS fallback: follow the system when prefs.js has not set data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-background: #111615; --color-surface: #182020; --color-surface-muted: #1F2827;
    --color-text-primary: #EDEFEC; --color-text-secondary: #B3BAB7; --color-text-muted: #8E9592; --color-text-muted-strong: #A3AAA7;
    --color-border: #2C3533; --color-border-strong: #3E4846;
    --color-brand-primary: #5DB2C3; --color-brand-primary-hover: #7BC4D2; --color-brand-primary-soft: #1C3439; --color-on-brand-primary: #0A1A1E;
    --color-brand-yellow-soft: #3A3218; --color-link: #7BC4D2; --color-focus: #F4C542;
    --color-footer: #0B2328; --color-on-footer: #EDEFEC; --color-on-footer-secondary: #A9C4C9;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 0ms; --dur-standard: 0ms; --dur-major: 0ms; }
}