/* ============================================================
   Play & Improve — theme.css
   Shared design tokens · skin hooks · global motion & print
   Mourad Mekki Teacher Toolkit
   ------------------------------------------------------------
   This file is the single source of truth for the platform's
   colour, typography, spacing and motion language. Individual
   pages keep their own variable NAMES but alias them to the
   --brand-* / --surface-* / --text-* tokens defined here, so
   the whole suite can be reskinned from one place without
   touching page markup or JavaScript.
   ============================================================ */

:root {
  /* ---- Ink & navy scale (cinematic background → raised panel) ---- */
  --brand-ink:        #060e1c;
  --brand-navy:       #0a1628;
  --brand-navy-soft:  #0e1f3a;
  --brand-navy-panel: #1a2e4a;

  /* ---- Gold spectrum ---- */
  --brand-gold:        #c9a84c;
  --brand-gold-light:  #e9c46a;
  --brand-gold-bright: #f5d06a;
  --brand-gold-pale:   #f5e9c4;
  --brand-gold-deep:   #9e7a2a;

  /* ---- Interactive accents ---- */
  --brand-teal: #2a9d8f;
  --brand-sky:  #4fa8d8;

  /* ---- Medal metals (leaderboard) ---- */
  --medal-silver:    #b8c4d4;
  --medal-silver-dk: #8497ae;
  --medal-bronze:    #c47c42;
  --medal-bronze-dk: #8c5120;

  /* ---- Surfaces ---- */
  --brand-ivory:       #fdfaf3;
  --brand-white:       #ffffff;
  --surface-page:      #fdfaf3;   /* warm academic paper */
  --surface-cool:      #f4f7f9;   /* admin / analytics surface */
  --surface-panel:     #ffffff;
  --surface-dark:      #071526;
  --surface-dark-soft: #0d223d;
  --surface-glass:     rgba(255,255,255,0.08);

  /* ---- Text ---- */
  --text-main:         #0a1f44;
  --text-main-soft:    #4a5a6e;
  --text-soft:         #5f6f84;
  --text-muted:        #8a96a6;
  --text-on-dark:      #ffffff;
  --text-on-dark-soft: rgba(255,255,255,0.68);
  --text-on-dark-mid:  rgba(255,255,255,0.45);
  --text-on-dark-low:  rgba(255,255,255,0.28);
  --text-on-dark-dim:  rgba(255,255,255,0.14);

  /* ---- Borders ---- */
  --border-soft:        rgba(10,31,68,0.12);
  --border-cool:        #d1d9e0;
  --border-gold-soft:   rgba(201,168,76,0.20);
  --border-gold:        rgba(201,168,76,0.35);
  --border-gold-strong: rgba(201,168,76,0.65);
  --border-on-dark:     rgba(255,255,255,0.10);
  --border-on-dark-hi:  rgba(255,255,255,0.15);

  /* ---- Shadows & glows ---- */
  --shadow-soft:      0 8px 24px rgba(10,31,68,0.08);
  --shadow-card:      0 14px 40px rgba(10,31,68,0.12);
  --shadow-cinematic: 0 24px 80px rgba(0,0,0,0.35);
  --glow-gold: 0 0 32px rgba(201,168,76,0.24);
  --glow-sky:  0 0 32px rgba(79,168,216,0.18);

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', 'Montserrat', system-ui, sans-serif;
  --font-arabic:  'Noto Naskh Arabic', 'Cormorant Garamond', serif;

  /* ---- Motion ---- */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-inout:   cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast:   160ms;
  --duration-normal: 260ms;
  --duration-slow:   500ms;

  /* ---- Skin hooks: drop in PNG/WebP later; `none` stays safe ---- */
  --skin-bg-main:        none;
  --skin-bg-game:        none;
  --skin-bg-dashboard:   none;
  --skin-bg-revision:    none;
  --skin-bg-leaderboard: none;
  --skin-card-frame:     none;
  --skin-button-frame:   none;
  --skin-lesson-ornament:none;
  --skin-reward-badge:   none;
  --skin-corner-ornament:none;
  --skin-noise:          none;
}

/* ============================================================
   Skin hook plumbing — inert until an asset URL is supplied.
   Pages set the relevant --skin-* var to url(...) to activate.
   ============================================================ */
body::before {
  content: var(--skin-noise, none);
}

/* ============================================================
   Accessibility: honour reduced-motion at the platform level.
   Essential state changes still apply; decorative motion stops.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visible keyboard focus everywhere, without touching mouse users */
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-gold-light);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============================================================
   Print safety net (opt-in). Pages/elements marked .no-print or
   [data-no-print] are hidden; cinematic backgrounds drop to
   white paper. Page-specific print rules still take over.
   ============================================================ */
@media print {
  :root {
    --skin-bg-main: none; --skin-bg-game: none;
    --skin-bg-dashboard: none; --skin-bg-revision: none;
    --skin-bg-leaderboard: none; --skin-noise: none;
  }
  .no-print, [data-no-print] { display: none !important; }
}