/* ═══════════════════════════════════════════════════════════════════════════
   SVEI — Design tokens  ("Precision Tech")
   Palette derived from the SVEI logo: signal red + circuit cyan on deep ink.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --sv-red:          #E31B23;
  --sv-red-dark:     #B8151C;
  --sv-red-light:    #FF3B43;
  --sv-red-soft:     rgba(227, 27, 35, .10);

  --sv-cyan:         #22C6E8;
  --sv-cyan-deep:    #0E7C99;
  --sv-cyan-soft:    rgba(34, 198, 232, .12);

  --sv-amber:        #FDB714;

  /* ── Neutrals ──────────────────────────────────────────────────────────── */
  --sv-ink:          #0A0D14;
  --sv-ink-2:        #131822;
  --sv-ink-3:        #1E2532;
  --sv-slate:        #5A5C5E;
  --sv-slate-2:      #8A8E93;
  --sv-line:         #E4E7EC;
  --sv-line-dark:    rgba(255, 255, 255, .10);
  --sv-bg:           #FFFFFF;
  --sv-bg-alt:       #F5F6F8;
  --sv-bg-tint:      #FAFBFC;

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --sv-success:      #16A34A;
  --sv-warning:      #F59E0B;
  --sv-danger:       #DC2626;
  --sv-info:         #0EA5E9;

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --sv-text:         var(--sv-ink);
  --sv-text-muted:   var(--sv-slate);
  --sv-text-invert:  #FFFFFF;

  /* ── Typography ────────────────────────────────────────────────────────── */
  /* Each page links only the font stylesheet for its own language (see
     _Layout.cshtml), so 'Inter' is no longer listed as an Arabic fallback —
     it is not downloaded on Arabic pages and naming it would only cost a
     failed lookup. IBM Plex Sans Arabic ships Latin subsets of its own, so
     mixed content like "SVEI" and figures still render in the same family. */
  --sv-font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sv-font-ar: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sv-font:    var(--sv-font-en);
  --sv-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace;

  --sv-fs-xs:   0.75rem;    /* 12 */
  --sv-fs-sm:   0.875rem;   /* 14 */
  --sv-fs-base: 1rem;       /* 16 */
  --sv-fs-lg:   1.125rem;   /* 18 */
  --sv-fs-xl:   1.375rem;   /* 22 */
  --sv-fs-2xl:  1.75rem;    /* 28 */
  --sv-fs-3xl:  2.25rem;    /* 36 */
  --sv-fs-4xl:  3rem;       /* 48 */
  --sv-fs-5xl:  3.75rem;    /* 60 */

  --sv-lh-tight: 1.15;
  --sv-lh-snug:  1.35;
  --sv-lh-base:  1.7;

  --sv-fw-normal:   400;
  --sv-fw-medium:   500;
  --sv-fw-semibold: 600;
  --sv-fw-bold:     700;
  --sv-fw-black:    800;

  /* ── Spacing (4px scale) ───────────────────────────────────────────────── */
  --sv-1:  0.25rem;
  --sv-2:  0.5rem;
  --sv-3:  0.75rem;
  --sv-4:  1rem;
  --sv-5:  1.5rem;
  --sv-6:  2rem;
  --sv-7:  2.5rem;
  --sv-8:  3rem;
  --sv-9:  4rem;
  --sv-10: 5rem;
  --sv-11: 6rem;
  --sv-12: 8rem;

  --sv-section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* ── Radii — sharp, engineered, never pill-shaped ──────────────────────── */
  --sv-r-xs: 2px;
  --sv-r-sm: 4px;
  --sv-r:    6px;
  --sv-r-md: 8px;
  --sv-r-lg: 12px;
  --sv-r-xl: 16px;

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --sv-shadow-xs: 0 1px 2px rgba(10, 13, 20, .06);
  --sv-shadow-sm: 0 2px 8px rgba(10, 13, 20, .07);
  --sv-shadow:    0 6px 20px rgba(10, 13, 20, .09);
  --sv-shadow-lg: 0 14px 40px rgba(10, 13, 20, .13);
  --sv-shadow-xl: 0 24px 64px rgba(10, 13, 20, .18);
  --sv-glow-red:  0 0 0 4px var(--sv-red-soft);
  --sv-glow-cyan: 0 0 24px rgba(34, 198, 232, .35);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --sv-ease:      cubic-bezier(.22, .61, .36, 1);
  --sv-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --sv-t-fast:    .16s;
  --sv-t:         .28s;
  --sv-t-slow:    .5s;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --sv-container: 1240px;
  --sv-container-narrow: 880px;
  --sv-gutter: clamp(1rem, 4vw, 2.5rem);
  --sv-header-h: 76px;

  /* ── Gradients ─────────────────────────────────────────────────────────── */
  --sv-grad-brand: linear-gradient(135deg, var(--sv-red) 0%, var(--sv-red-dark) 100%);
  --sv-grad-tech:  linear-gradient(135deg, var(--sv-cyan) 0%, var(--sv-cyan-deep) 100%);
  --sv-grad-ink:   linear-gradient(160deg, var(--sv-ink) 0%, var(--sv-ink-3) 100%);
  --sv-grad-mix:   linear-gradient(120deg, var(--sv-red) 0%, var(--sv-cyan) 100%);

  --sv-z-header: 900;
  --sv-z-drawer: 950;
  --sv-z-modal:  1000;
  --sv-z-toast:  1100;
}

/* Arabic / RTL swaps the font stack */
html[lang="ar"] { --sv-font: var(--sv-font-ar); }

/* ── Dark section context (used inside .sv-dark blocks) ──────────────────── */
.sv-dark {
  --sv-text:       #FFFFFF;
  --sv-text-muted: rgba(255, 255, 255, .68);
  --sv-bg:         var(--sv-ink);
  --sv-bg-alt:     var(--sv-ink-2);
  --sv-line:       var(--sv-line-dark);
}

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