/* ==========================================================================
   VS INTERNATIONAL COLLEGE — DESIGN TOKENS
   --------------------------------------------------------------------------
   Single source of truth for colour, type, space, depth and motion.
   Every value is a CSS custom property so it can be themed at runtime.

   NAMING
     --vsic-*   canonical design-system tokens (use these in all new CSS)
     --kvc-*    legacy variables injected from the database in base.html.
                Still consumed by style.css. Do NOT author new rules
                against them; they are removed in Phase 8.

   DATABASE THEMING
     ThemeConfiguration is the single source of truth for the three brand
     colours. base.html emits:

         --vsic-primary / --vsic-secondary / --vsic-accent   (from the DB)
         --kvc-*-color                                        (aliases of those)

     So the legacy stylesheet and this design system always read the same
     values — they cannot drift. Editing the admin colour fields restyles
     both the old and the new UI together.

     The ramps in section 1 are static reference scales. Semantic tokens in
     section 2 prefer the DB value and fall back to a ramp step, which is why
     every brand token below is written as var(--vsic-primary, <ramp>).

   TYPOGRAPHY
     Font *families* are already database-driven: pages/services/typography.py
     emits --font-<role> variables into :root from the Typography model.
     This file only defines sizes, weights and rhythm, and consumes those
     families. Never hardcode a font-family here.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. COLOUR PRIMITIVES
     Raw ramps. Do not use these directly in components — use the semantic
     tokens in section 2 so themes can be swapped in one place.
     --------------------------------------------------------------------- */

  /* Navy — primary brand. #0B1F3A is the anchor (900). */
  --vsic-navy-50:  #f2f6fb;
  --vsic-navy-100: #e3ebf5;
  --vsic-navy-200: #c3d4e9;
  --vsic-navy-300: #93b0d5;
  --vsic-navy-400: #5c83b8;
  --vsic-navy-500: #38609b;
  --vsic-navy-600: #274a7d;
  --vsic-navy-700: #1c3a63;
  --vsic-navy-800: #122b4b;
  --vsic-navy-900: #0b1f3a;
  --vsic-navy-950: #061324;

  /* Blue — secondary / interactive. #2563EB is the anchor (600). */
  --vsic-blue-50:  #eff5ff;
  --vsic-blue-100: #dbe8fe;
  --vsic-blue-200: #bfd7fe;
  --vsic-blue-300: #93bbfd;
  --vsic-blue-400: #609afa;
  --vsic-blue-500: #3b82f6;
  --vsic-blue-600: #2563eb;
  --vsic-blue-700: #1d4ed8;
  --vsic-blue-800: #1e40af;
  --vsic-blue-900: #1e3a8a;

  /* Cyan — accent. #06B6D4 is the anchor (500). */
  --vsic-cyan-50:  #ecfeff;
  --vsic-cyan-100: #cffafe;
  --vsic-cyan-200: #a5f3fc;
  --vsic-cyan-300: #67e8f9;
  --vsic-cyan-400: #22d3ee;
  --vsic-cyan-500: #06b6d4;
  --vsic-cyan-600: #0891b2;
  --vsic-cyan-700: #0e7490;
  --vsic-cyan-800: #155e75;
  --vsic-cyan-900: #164e63;

  /* Amber — highlight. #F59E0B is the anchor (500). */
  --vsic-amber-50:  #fffbeb;
  --vsic-amber-100: #fef3c7;
  --vsic-amber-200: #fde68a;
  --vsic-amber-300: #fcd34d;
  --vsic-amber-400: #fbbf24;
  --vsic-amber-500: #f59e0b;
  --vsic-amber-600: #d97706;
  --vsic-amber-700: #b45309;
  --vsic-amber-800: #92400e;
  --vsic-amber-900: #78350f;

  /* Neutral — slate-leaning so it sits comfortably beside the navy. */
  --vsic-neutral-0:   #ffffff;
  --vsic-neutral-50:  #f8fafc;
  --vsic-neutral-100: #f1f5f9;
  --vsic-neutral-200: #e2e8f0;
  --vsic-neutral-300: #cbd5e1;
  --vsic-neutral-400: #94a3b8;
  --vsic-neutral-500: #64748b;
  --vsic-neutral-600: #475569;
  --vsic-neutral-700: #334155;
  --vsic-neutral-800: #1e293b;
  --vsic-neutral-900: #0f172a;

  /* Status */
  --vsic-success: #16a34a;
  --vsic-warning: #f59e0b;
  --vsic-danger:  #dc2626;
  --vsic-info:    #0891b2;

  /* ---------------------------------------------------------------------
     2. SEMANTIC COLOUR
     What components actually reference.

     --vsic-primary / -secondary / -accent are injected by base.html from
     ThemeConfiguration. They are deliberately NOT declared here: declaring
     them would shadow the database value. The fallbacks make this file
     render correctly on its own (e.g. in isolation or a style guide).

     --vsic-highlight has no ThemeConfiguration field, so it is defined here.
     --------------------------------------------------------------------- */

  --vsic-highlight: var(--vsic-amber-500);

  /* ROLE OF EACH DATABASE FIELD
     ThemeConfiguration.secondary_color holds a pale tint (#B1C6E8 today),
     not an interactive colour. Reading it as text or as a solid button fill
     produces white-on-pastel — unreadable, and it would break again the next
     time an administrator picks a light shade.

     So the three fields are mapped to the roles they actually hold:
       primary_color   -> brand surfaces AND the interactive colour
       secondary_color -> the soft tint behind chips, hovers and icon tiles
       accent_color    -> the highlight

     Hover and active states are derived with color-mix rather than pinned to
     a ramp step, so they track whatever the administrator chooses. The plain
     declaration above each color-mix is the fallback for engines without it. */

  --vsic-brand-primary:        var(--vsic-primary, var(--vsic-navy-900));
  --vsic-brand-primary-hover:  var(--vsic-navy-800);
  --vsic-brand-primary-hover:  color-mix(in srgb, var(--vsic-brand-primary) 84%, #000);
  --vsic-brand-primary-active: var(--vsic-navy-950);
  --vsic-brand-primary-active: color-mix(in srgb, var(--vsic-brand-primary) 70%, #000);
  --vsic-brand-primary-soft:   var(--vsic-navy-50);
  --vsic-brand-primary-soft:   color-mix(in srgb, var(--vsic-brand-primary) 8%, #fff);

  /* "secondary" in the design system means interactive: links, active nav,
     eyebrows, focus. It follows the primary brand colour. */
  --vsic-brand-secondary:        var(--vsic-primary, var(--vsic-blue-600));
  --vsic-brand-secondary-hover:  var(--vsic-blue-800);
  --vsic-brand-secondary-hover:  color-mix(in srgb, var(--vsic-brand-secondary) 78%, #000);
  --vsic-brand-secondary-active: var(--vsic-blue-900);
  --vsic-brand-secondary-active: color-mix(in srgb, var(--vsic-brand-secondary) 64%, #000);

  /* The one place the database's secondary_color belongs: a soft wash.
     Mixed with white so even a mid-tone admin value stays a background. */
  --vsic-brand-secondary-soft:   var(--vsic-blue-50);
  --vsic-brand-secondary-soft:   color-mix(in srgb, var(--vsic-secondary, var(--vsic-blue-200)) 42%, #fff);

  --vsic-brand-accent:        var(--vsic-accent, var(--vsic-cyan-500));
  --vsic-brand-accent-hover:  var(--vsic-cyan-600);
  --vsic-brand-accent-hover:  color-mix(in srgb, var(--vsic-brand-accent) 84%, #000);
  --vsic-brand-accent-active: var(--vsic-cyan-700);
  --vsic-brand-accent-active: color-mix(in srgb, var(--vsic-brand-accent) 70%, #000);
  --vsic-brand-accent-soft:   var(--vsic-cyan-50);
  --vsic-brand-accent-soft:   color-mix(in srgb, var(--vsic-brand-accent) 12%, #fff);

  --vsic-brand-highlight:       var(--vsic-highlight);
  --vsic-brand-highlight-hover: var(--vsic-amber-600);
  --vsic-brand-highlight-soft:  var(--vsic-amber-50);

  /* Surfaces */
  --vsic-surface:         var(--vsic-neutral-0);
  --vsic-surface-subtle:  var(--vsic-neutral-50);
  --vsic-surface-muted:   var(--vsic-neutral-100);
  --vsic-surface-inverse: var(--vsic-navy-900);

  /* Text — all pairings below meet WCAG AA on their intended surface. */
  --vsic-text-primary:   var(--vsic-navy-900);
  --vsic-text-secondary: var(--vsic-neutral-600);
  --vsic-text-muted:     var(--vsic-neutral-500);
  --vsic-text-inverse:   var(--vsic-neutral-0);
  --vsic-text-link:      var(--vsic-brand-secondary);
  --vsic-text-link-hover: var(--vsic-brand-secondary-hover);

  /* Readable-on-tint variants of the brand colours, for badge and chip text
     sitting on their own *-soft background. */
  --vsic-on-secondary-soft: var(--vsic-brand-secondary-active);
  --vsic-on-accent-soft:    var(--vsic-amber-800);
  --vsic-on-accent-soft:    color-mix(in srgb, var(--vsic-brand-accent) 55%, #000);

  /* Borders */
  --vsic-border:        var(--vsic-neutral-200);
  --vsic-border-strong: var(--vsic-neutral-300);
  --vsic-border-brand:  var(--vsic-brand-secondary);

  /* Glass — used by the header and stat cards. */
  --vsic-glass-bg:        rgba(255, 255, 255, 0.72);
  --vsic-glass-bg-dark:   rgba(11, 31, 58, 0.72);
  --vsic-glass-border:    rgba(255, 255, 255, 0.28);
  --vsic-glass-blur:      16px;
  --vsic-glass-saturate:  180%;

  /* Signature gradients */
  --vsic-gradient-brand: linear-gradient(135deg, var(--vsic-navy-900) 0%, var(--vsic-blue-700) 100%);
  --vsic-gradient-accent: linear-gradient(135deg, var(--vsic-blue-600) 0%, var(--vsic-cyan-500) 100%);
  --vsic-gradient-hero: linear-gradient(160deg, var(--vsic-navy-950) 0%, var(--vsic-navy-800) 45%, var(--vsic-blue-800) 100%);
  --vsic-gradient-sheen: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);

  /* ---------------------------------------------------------------------
     3. TYPOGRAPHY
     Families come from the database (--font-* set by typography.py).
     Fallbacks keep the page readable if that service ever returns nothing.
     --------------------------------------------------------------------- */

  --vsic-font-body:    var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --vsic-font-heading: var(--font-heading, var(--vsic-font-body));
  --vsic-font-display: var(--font-display, var(--vsic-font-heading));
  --vsic-font-nav:     var(--font-navigation, var(--vsic-font-body));
  --vsic-font-button:  var(--font-button, var(--vsic-font-body));
  --vsic-font-mono:    var(--font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);

  /* Fluid scale — min at 320px viewport, max at 1280px. */
  --vsic-text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --vsic-text-sm:   clamp(0.8125rem, 0.79rem + 0.13vw, 0.875rem);
  --vsic-text-base: clamp(0.9375rem, 0.91rem + 0.16vw, 1rem);
  --vsic-text-md:   clamp(1rem, 0.96rem + 0.21vw, 1.125rem);
  --vsic-text-lg:   clamp(1.125rem, 1.06rem + 0.31vw, 1.3125rem);
  --vsic-text-xl:   clamp(1.25rem, 1.15rem + 0.52vw, 1.625rem);
  --vsic-text-2xl:  clamp(1.5rem, 1.33rem + 0.83vw, 2.125rem);
  --vsic-text-3xl:  clamp(1.875rem, 1.58rem + 1.46vw, 2.75rem);
  --vsic-text-4xl:  clamp(2.25rem, 1.75rem + 2.50vw, 3.5rem);
  --vsic-text-5xl:  clamp(2.75rem, 1.96rem + 3.96vw, 4.5rem);

  --vsic-weight-regular:  400;
  --vsic-weight-medium:   500;
  --vsic-weight-semibold: 600;
  --vsic-weight-bold:     700;

  --vsic-leading-tight:   1.15;
  --vsic-leading-snug:    1.3;
  --vsic-leading-normal:  1.6;
  --vsic-leading-relaxed: 1.75;

  --vsic-tracking-tight:  -0.02em;
  --vsic-tracking-normal: 0;
  --vsic-tracking-wide:   0.04em;
  --vsic-tracking-caps:   0.12em;

  /* Comfortable measure for long-form copy. */
  --vsic-measure: 68ch;

  /* ---------------------------------------------------------------------
     4. SPACE — 8pt grid, with 4px half-steps at the small end.
     --------------------------------------------------------------------- */

  --vsic-space-3xs: 0.25rem;  /*  4px */
  --vsic-space-2xs: 0.5rem;   /*  8px */
  --vsic-space-xs:  0.75rem;  /* 12px */
  --vsic-space-sm:  1rem;     /* 16px */
  --vsic-space-md:  1.5rem;   /* 24px */
  --vsic-space-lg:  2rem;     /* 32px */
  --vsic-space-xl:  3rem;     /* 48px */
  --vsic-space-2xl: 4rem;     /* 64px */
  --vsic-space-3xl: 6rem;     /* 96px */
  --vsic-space-4xl: 8rem;     /* 128px */

  /* Vertical rhythm between major page sections — fluid. */
  --vsic-section-y: clamp(3rem, 1.6rem + 7vw, 7rem);

  /* ---------------------------------------------------------------------
     5. LAYOUT
     --------------------------------------------------------------------- */

  --vsic-container-sm: 40rem;   /*  640px — prose */
  --vsic-container-md: 60rem;   /*  960px */
  --vsic-container-lg: 75rem;   /* 1200px — default */
  --vsic-container-xl: 87.5rem; /* 1400px — wide media */
  --vsic-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---------------------------------------------------------------------
     6. RADIUS
     --------------------------------------------------------------------- */

  --vsic-radius-xs:   4px;
  --vsic-radius-sm:   8px;
  --vsic-radius-md:   12px;
  --vsic-radius-lg:   16px;
  --vsic-radius-xl:   24px;
  --vsic-radius-2xl:  32px;
  --vsic-radius-pill: 999px;
  --vsic-radius-circle: 50%;

  /* ---------------------------------------------------------------------
     7. ELEVATION
     Tinted with the brand navy rather than neutral black so shadows sit
     naturally against the palette.
     --------------------------------------------------------------------- */

  --vsic-shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.06);
  --vsic-shadow-sm: 0 2px 8px rgba(11, 31, 58, 0.08);
  --vsic-shadow-md: 0 8px 20px rgba(11, 31, 58, 0.10);
  --vsic-shadow-lg: 0 16px 36px rgba(11, 31, 58, 0.14);
  --vsic-shadow-xl: 0 28px 60px rgba(11, 31, 58, 0.18);
  --vsic-shadow-glow: 0 12px 32px rgba(37, 99, 235, 0.28);
  --vsic-shadow-glow-accent: 0 12px 32px rgba(6, 182, 212, 0.30);
  --vsic-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  /* ---------------------------------------------------------------------
     8. MOTION
     Durations stay short; easing does the expressive work.
     --------------------------------------------------------------------- */

  --vsic-duration-instant: 80ms;
  --vsic-duration-fast:    160ms;
  --vsic-duration-normal:  260ms;
  --vsic-duration-slow:    420ms;
  --vsic-duration-slower:  680ms;

  --vsic-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --vsic-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --vsic-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vsic-ease-linear: linear;

  --vsic-transition-base: all var(--vsic-duration-normal) var(--vsic-ease-out);
  --vsic-transition-color: color var(--vsic-duration-fast) var(--vsic-ease-out),
                           background-color var(--vsic-duration-fast) var(--vsic-ease-out),
                           border-color var(--vsic-duration-fast) var(--vsic-ease-out);

  /* ---------------------------------------------------------------------
     9. 3D
     Shared perspective so tilt effects across the site agree with each other.
     --------------------------------------------------------------------- */

  --vsic-perspective: 1600px;
  --vsic-tilt-max: 3deg;

  /* Hover lift. Deliberately small — an academic site should feel settled,
     not springy. Nothing here exceeds 4px. */
  --vsic-lift-sm: -2px;
  --vsic-lift-md: -4px;
  --vsic-lift-lg: -6px;

  /* ---------------------------------------------------------------------
     10. Z-INDEX — named scale; never author a raw z-index in a component.
     --------------------------------------------------------------------- */

  --vsic-z-below:     -1;
  --vsic-z-base:       0;
  --vsic-z-raised:     10;
  --vsic-z-sticky:     100;
  --vsic-z-header:     200;
  --vsic-z-drawer:     300;
  --vsic-z-backdrop:   400;
  --vsic-z-modal:      500;
  --vsic-z-lightbox:   600;
  --vsic-z-popover:    700;
  --vsic-z-toast:      800;
  --vsic-z-max:        9999;

  /* ---------------------------------------------------------------------
     11. FOCUS
     --------------------------------------------------------------------- */

  --vsic-focus-ring-color: var(--vsic-brand-secondary);
  --vsic-focus-ring-width: 3px;
  --vsic-focus-ring-offset: 2px;
}