/* ==========================================================================
   ЧОУ „Света София" - design tokens
   Extracted from the live site, then recalibrated. Brand values are marked
   PRESERVED and must not be changed without approval.
   ========================================================================== */

:root {
  /* --- Brand -------------------------------------------------------------
     PRESERVED: gold and slate are lifted verbatim from the live site.       */
  --brand-gold: #edbf47;          /* PRESERVED. Single accent, whole site.  */
  --brand-slate: #4d5a70;         /* PRESERVED. Structural institutional.   */

  /* Accessible text-weight variant of the same gold hue. The brand gold is
     a surface colour, never a text colour on light ground (1.73:1). */
  --brand-gold-ink: #7a5a0f;      /* 6.2:1 on --surface                     */
  --brand-gold-hover: #e0ad2b;    /* one step down, for :hover on the gold  */

  --danger: #a4232b;              /* form errors only, 5.9:1 on --surface   */

  /* --- Neutrals ----------------------------------------------------------
     Cool greys on purpose. The brief is premium consumer, and the warm
     cream + brass family is the AI default for that brief. Cool ground also
     makes the brand gold read as gold instead of as beige.                  */
  --surface: #fbfbfc;
  --surface-sunken: #f0f2f5;
  --surface-raised: #ffffff;
  --line: #dfe3e8;                /* decorative hairlines                    */
  --line-strong: #7d8894;         /* borders of real controls, 3.5:1 (WCAG 1.4.11) */

  --text: #1b2028;                /* 15.2:1 on --surface                    */
  --text-muted: #4a5462;          /* 7.7:1  on --surface                    */

  --band: var(--brand-slate);     /* the one dark band, footer region       */
  --band-deep: #3c4759;
  --band-text: #f7f8fa;           /* 7.0:1 on --band                        */
  --band-text-muted: #ced5df;     /* 5.1:1 on --band                        */

  /* --- Type --------------------------------------------------------------
     PRESERVED: Source Sans Pro carries all body copy, as on the live site.
     Cormorant Garamond replaces Raleway for display only. Justification:
     the school wordmark is already set in a high-contrast serif, the
     institution is 30 cohorts old, and the reference site works the same
     way (display serif over text face). Never used below 20px.             */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-text: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: 0.875rem;   /* 14px  meta, captions            */
  --step-0: 1.0625rem;   /* 17px  body                      */
  --step-1: 1.1875rem;   /* 19px  lead body                 */
  --step-2: 1.5rem;      /* 24px  card titles               */
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);   /* 28-38 sub-heads  */
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);     /* 36-56 section h2 */

  /* --- Space (8px base) --------------------------------------------------- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;

  --measure: 65ch;
  --shell: 1280px;

  /* --- Shape -------------------------------------------------------------
     ONE radius for the whole site. 3px is the dominant value already in use
     in the live CSS, so keeping it preserves the existing feel.            */
  --radius: 3px;

  /* --- Elevation. Tinted to the surface hue, never pure black. ------------ */
  --shadow-1: 0 1px 2px rgba(27, 32, 40, 0.06), 0 2px 8px rgba(27, 32, 40, 0.05);
  --shadow-2: 0 2px 6px rgba(27, 32, 40, 0.08), 0 12px 28px rgba(27, 32, 40, 0.09);

  /* --- Motion. MOTION_INTENSITY 4: fluid CSS, no choreography. ------------ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* --- Layers. Documented scale, no arbitrary z-index. -------------------- */
  --z-sticky: 100;
  --z-nav-panel: 200;
  --z-skip: 300;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Brand gold is not desaturated in dark mode. It is the brand. */
    --brand-gold: #edbf47;
    --brand-gold-ink: #edbf47;    /* 10.3:1 on --surface, safe as text here */
    --brand-gold-hover: #f3cd6d;
    --danger: #ff9ba0;

    --surface: #14171c;
    --surface-sunken: #191d24;
    --surface-raised: #1e232b;
    --line: #2c333d;
    --line-strong: #6b7684;       /* 3.4:1 on --surface-raised, the tighter of the two grounds */

    --text: #e9ecf1;              /* 13.9:1 on --surface                    */
    --text-muted: #a8b2c0;        /* 7.6:1  on --surface                    */

    --band: #232a35;
    --band-deep: #1a2029;
    --band-text: #e9ecf1;
    --band-text-muted: #a8b2c0;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
  }
}