/* variables.css — design tokens. Brand colours come from the SMK PGRI 1 Kediri logo. */
:root {
  /* Brand */
  --blue: #184B89;          /* primary: navbar text, buttons, markers, emphasis */
  --blue-hover: #123B6D;
  --blue-deep: #0E2C52;     /* footer, admin sidebar */
  --blue-100: #DCE6F4;
  --blue-50: #EEF3FA;
  --violet: #7A7AB9;        /* secondary accent, charts, illustration */
  --violet-100: #E4E4F2;
  --violet-50: #F3F3FA;
  --yellow: #CDCB4A;        /* small accents only — never text on white (contrast) */
  --yellow-soft: #F6F5D8;
  --ink: #222323;           /* body text */
  --ink-2: #474B52;         /* secondary text */
  --ink-3: #636871;         /* muted text (≥ 4.5:1 on white) */
  --white: #FFFFFF;

  /* Extended blue theme (landing) */
  --navy-950: #040C1C;
  --navy-900: #071634;
  --navy-800: #0B2350;
  --navy-700: #12306A;
  --electric: #2F7BFF;
  --electric-soft: rgba(47, 123, 255, 0.16);
  --sky: #6FD0FF;
  --lime: #DCE35B;          /* brighter logo yellow for dark backgrounds */
  --grad-brand: linear-gradient(135deg, #0B2350 0%, #184B89 48%, #2F7BFF 100%);
  --grad-text: linear-gradient(100deg, #6FD0FF 0%, #2F7BFF 45%, #DCE35B 100%);
  --grad-text-dark: linear-gradient(100deg, #184B89 0%, #2F7BFF 60%, #5B5BD6 100%);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.18);
  --shadow-glow: 0 12px 40px -8px rgba(47, 123, 255, 0.55);
  --shadow-float: 0 30px 80px -20px rgba(7, 22, 52, 0.35);

  /* Surfaces & lines */
  --bg: #FFFFFF;
  --surface-2: #F6F7F9;
  --surface-3: #EEF0F3;
  --line: #E3E6EB;
  --line-strong: #CBD1DA;

  /* Semantic */
  --ok: #1D6B45;  --ok-bg: #E6F2EB;
  --warn: #7A5D00; --warn-bg: #FBF3D6;
  --danger: #B42318; --danger-bg: #FDECEA;
  --info: var(--blue); --info-bg: var(--blue-50);

  /* Typography */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.875rem;  /* 14 */
  --fs-base: 1rem;    /* 16 */
  --fs-md: 1.125rem;  /* 18 */
  --fs-lg: 1.25rem;   /* 20 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 1.9vw, 2.625rem);
  --fs-display: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  --lh-tight: 1.15;
  --lh-snug: 1.3;

  /* Spacing (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: 16px;
  --container: 1200px;

  /* Shape & depth */
  --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-3: 0 16px 40px rgba(14, 44, 82, 0.18);
  --focus: 0 0 0 3px rgba(24, 75, 137, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms; --t: 240ms; --t-slow: 420ms;

  /* Layers */
  --z-nav: 50; --z-sheet: 70; --z-toast: 90;

  --nav-h: 64px;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}