/**
 * Supreme Academy — design tokens.
 *
 * Single source of truth for the theme's visual layer. Every colour, type,
 * spacing and radius value used elsewhere must reference a token defined here,
 * so a rebrand is a change in one file.
 *
 * Values derived from the Supreme Security Services brand; see
 * docs/11_DESIGN_SYSTEM.md for provenance and accessibility rules.
 */

:root {
  /* Brand */
  --sa-color-primary:        #4A1211;
  --sa-color-primary-hover:  #2C0B0D;
  --sa-color-primary-dark:   #2C0B0D;
  --sa-color-secondary:      #2C3E50;
  --sa-color-secondary-dark: #16293A;
  --sa-color-accent:         #4A1211;   /* brand maroon; there is no gold accent */
  --sa-color-cream:          #F5EDE0;   /* warm off-white for eyebrows/marks on dark heroes */
  --sa-color-star:           #F5B50A;   /* ONLY for review stars, per the brand system */

  /* Neutrals */
  --sa-color-ink:         #1F2733;
  --sa-color-muted:       #55606B;
  /*
   * Darkened from #6B7785 on 2026-09-03. The old value gave 4.33:1 against
   * --sa-color-surface-alt, and `.sa-strip__label` renders it at 12px on exactly
   * that background — a WCAG 2.2 AA 1.4.3 failure for small text. It passed on
   * white (4.56:1), which is why it survived review until the contrast was
   * actually computed. This value gives 4.83:1 on surface-alt and 5.09:1 on
   * white, and stays lighter than --sa-color-muted so the three-step text
   * hierarchy still reads.
   */
  --sa-color-muted-2:     #666F7B;
  --sa-color-line:        #E9ECEF;
  --sa-color-surface:     #FFFFFF;
  --sa-color-surface-alt: #F8F9FA;

  /* State */
  --sa-color-success: #1E7A46;
  --sa-color-warning: #B8860B;
  --sa-color-danger:  #B3261E;
  --sa-color-info:    #2C3E50;

  --sa-gradient-brand: linear-gradient(135deg, #4A1211, #16293A);

  /* Type */
  --sa-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sa-fw-regular: 400;
  --sa-fw-semibold: 600;
  --sa-fw-bold: 700;
  --sa-fw-heavy: 800;

  --sa-text-xs: 0.75rem;
  --sa-text-sm: 0.8125rem;
  --sa-text-base: 1rem;
  --sa-text-lg: 1.0625rem;
  --sa-text-xl: 1.5rem;
  --sa-h3: 1.6875rem;
  --sa-h2: 2.1875rem;
  --sa-h1: 2.625rem;
  --sa-leading-body: 1.6;
  --sa-leading-tight: 1.2;

  /* Radius */
  --sa-radius-sm: 4px;
  --sa-radius: 8px;
  --sa-radius-lg: 16px;
  --sa-radius-pill: 999px;

  /* Spacing */
  /*
   * The scale is stepN = N * 0.25rem. Steps 5, 7 and 10 were referenced by
   * style.css but never defined here, and a var() with no fallback makes the
   * whole declaration invalid — so those rules were silently dropping their
   * spacing, not merely mis-spacing. The worst case was `.sa-certificate`,
   * whose `margin: var(--sa-space-10) auto` was discarded entirely, leaving the
   * certificate uncentred. Added 2026-09-03 to make the stylesheet do what it
   * already says.
   */
  --sa-space-1: 0.25rem;
  --sa-space-2: 0.5rem;
  --sa-space-3: 0.75rem;
  --sa-space-4: 1rem;
  --sa-space-5: 1.25rem;
  --sa-space-6: 1.5rem;
  --sa-space-7: 1.75rem;
  --sa-space-8: 2rem;
  --sa-space-10: 2.5rem;
  --sa-space-12: 3rem;
  --sa-space-16: 4rem;

  /* Elevation */
  --sa-shadow-sm: 0 1px 2px rgba(22, 41, 58, .08);
  --sa-shadow: 0 4px 16px rgba(22, 41, 58, .10);
  --sa-shadow-lg: 0 12px 32px rgba(22, 41, 58, .14);

  /* Layout */
  --sa-container: 1200px;
  --sa-container-narrow: 760px;
}

/*
 * Honour the OS "reduce motion" setting. Accessibility requirement (WCAG 2.3.3):
 * transitions and animations are decorative here, so they are removed wholesale
 * rather than individually.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}