/* ============================================================
   SVA — Société de la Vallée de l'Aluminium
   Design tokens: colors and typography
   ============================================================ */

/* --- Webfonts ----------------------------------------------- */
/* Inter is the official brand typeface (per normes graphiques). */
/* Self-hosted from /fonts. Three optical sizes are declared as     */
/* one family ("Inter") with size-adjust ranges so the browser      */
/* picks 18pt for body, 24pt for mid, 28pt for display headlines.  */

/* ── 18pt optical (body / small text) ─────────────────────── */
/* Available: Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;  font-display: swap;
  src: url('fonts/Inter_18pt-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;  font-display: swap;
  src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;  font-display: swap;
  src: url('fonts/Inter_18pt-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;  font-display: swap;
  src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;  font-display: swap;
  src: url('fonts/Inter_18pt-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter 18';
  font-style: normal;
  font-weight: 300;  font-display: swap;
  src: url('fonts/Inter_18pt-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter 18';
  font-style: normal;
  font-weight: 400;  font-display: swap;
  src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter 18';
  font-style: normal;
  font-weight: 500;  font-display: swap;
  src: url('fonts/Inter_18pt-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter 18';
  font-style: normal;
  font-weight: 600;  font-display: swap;
  src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter 18';
  font-style: normal;
  font-weight: 700;  font-display: swap;
  src: url('fonts/Inter_18pt-Bold.ttf') format('truetype');
}

/* ── 24pt optical (mid sizes / subheadings) ───────────────── */
/* Available: Medium 500, SemiBold 600 */
@font-face {
  font-family: 'Inter 24';
  font-style: normal;
  font-weight: 500;  font-display: swap;
  src: url('fonts/Inter_24pt-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter 24';
  font-style: normal;
  font-weight: 600;  font-display: swap;
  src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype');
}

/* ── 28pt optical (display headlines) ─────────────────────── */
/* Available: Medium 500, SemiBold 600, Bold 700 */
@font-face {
  font-family: 'Inter 28';
  font-style: normal;
  font-weight: 500;  font-display: swap;
  src: url('fonts/Inter_28pt-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter 28';
  font-style: normal;
  font-weight: 600;  font-display: swap;
  src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter 28';
  font-style: normal;
  font-weight: 700;  font-display: swap;
  src: url('fonts/Inter_28pt-Bold.ttf') format('truetype');
}

:root {
  /* ============================================================
     COLORS — Brand palette
     Source: SVA-normes-graphique.pdf, page 2
     ============================================================ */

  /* Primary — SVA Blue (Pantone 293C)
     "Le bleu représente bien la région du Saguenay par l'eau et le bleuet"
     Also synonymous with security / steady presence. */
  --sva-blue: #003EAB;            /* RGB 0 / 62 / 171 — the brand blue */
  --sva-blue-rgb: 0, 62, 171;

  /* Aluminum — Pantone Cool Gray 7C
     "Le gris représente bien évidemment l'aluminium." */
  --sva-aluminum: #989AA5;        /* RGB 152 / 154 / 165 */
  --sva-aluminum-rgb: 152, 154, 165;

  /* Aluminum Light — Cool Gray 7C @ 15% tint */
  --sva-aluminum-light: #D9DAE4;  /* RGB 217 / 218 / 228 */
  --sva-aluminum-light-rgb: 217, 218, 228;

  /* Aluminum Gradient — used in the V mark + the dot.
     Brushed-metal feel: light edges, deeper midtones. */
  --sva-aluminum-grad: linear-gradient(
    135deg,
    #E6E7EC 0%,
    #B8BAC5 22%,
    #989AA5 50%,
    #C9CBD3 78%,
    #ECEDF1 100%
  );
  --sva-aluminum-grad-vertical: linear-gradient(
    180deg,
    #E6E7EC 0%,
    #989AA5 50%,
    #ECEDF1 100%
  );

  /* Black / White — for noir & renversé logo treatments */
  --sva-black: #000000;
  --sva-white: #FFFFFF;

  /* ------------------------------------------------------------
     Neutrals (derived) — needed for UI work beyond the logotype.
     Ladder anchored to Cool Gray 7C, biased slightly cool to
     match the aluminum feel.
     ------------------------------------------------------------ */
  --neutral-50:  #F7F8FA;
  --neutral-100: #EFF0F3;
  --neutral-200: #D9DAE4;  /* = aluminum-light, 15% tint */
  --neutral-300: #C2C4CE;
  --neutral-400: #989AA5;  /* = aluminum */
  --neutral-500: #74767F;
  --neutral-600: #54565E;
  --neutral-700: #3A3B41;
  --neutral-800: #22232A;
  --neutral-900: #14151A;

  /* ------------------------------------------------------------
     Semantic — surface / foreground
     ------------------------------------------------------------ */
  --bg:        var(--sva-white);
  --bg-soft:   var(--neutral-50);
  --bg-muted:  var(--neutral-100);
  --bg-inset:  var(--neutral-200);

  --surface:        var(--sva-white);
  --surface-raised: var(--sva-white);

  --fg1: var(--neutral-900);    /* primary text */
  --fg2: var(--neutral-700);    /* secondary text */
  --fg3: var(--neutral-500);    /* tertiary / captions */
  --fg-muted: var(--neutral-400);
  --fg-on-blue: var(--sva-white);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  --accent:       var(--sva-blue);
  --accent-hover: #002F86;       /* darken ~10% */
  --accent-press: #002569;       /* darken ~18% */
  --accent-soft:  #E6EBF7;       /* very light blue tint */

  /* Status (derived — kept tight, complementing the cool palette) */
  --success: #2E7D5B;
  --warning: #B5811C;
  --danger:  #B33A3A;
  --info:    var(--sva-blue);

  /* ============================================================
     TYPOGRAPHY
     Source: SVA-normes-graphique.pdf, page 3
     "La typographie Inter a été utilisée pour le logo."
     "L'ensemble du nom a été écrit en majuscule afin de représenter
      la solidité. L'épaisseur des traits est la même pour tous les mots,
      afin que ceux-ci soient sur le même pied d'égalité."
     ============================================================ */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter 28', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-subhead: 'Inter 24', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter 18', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights (Inter variable axis) — Medium is the brand weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;   /* logo + nameplate weight */
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale — modular, 1.25 ratio, anchored at 16px body */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — tight for display, neutral for body,
     wide caps for the brand-style nameplates that mirror the logotype */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;   /* for brand-style ALL CAPS labels */

  /* ============================================================
     SPACING / RADII / SHADOW
     Derived — not in the official guide, but kept conservative
     to match the brand's clean, restrained feel.
     ============================================================ */

  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii — restrained. The logo itself is angular (V/A) with
     just the rounded valley curve, so we keep UI radii small. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows — soft, cool-tinted (aluminum) */
  --shadow-xs: 0 1px 2px rgba(20, 21, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.06), 0 1px 3px rgba(20, 21, 26, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(20, 21, 26, 0.08), 0 2px 4px -2px rgba(20, 21, 26, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(20, 21, 26, 0.10), 0 4px 6px -4px rgba(20, 21, 26, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(20, 21, 26, 0.12), 0 8px 10px -6px rgba(20, 21, 26, 0.08);

  /* Focus ring — accessible, brand-blue */
  --ring: 0 0 0 3px rgba(0, 62, 171, 0.35);

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-6);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   These provide reasonable defaults so authors writing prose
   inside SVA designs get on-brand output without effort.
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg1);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-family: var(--font-subhead);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg2);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg1);
  margin: 0 0 var(--space-4) 0;
  text-wrap: pretty;
}

small, .text-small {
  font-size: var(--text-sm);
  color: var(--fg2);
}

.eyebrow,
.overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}

/* Brand-style nameplate — mirrors the logotype rendering
   (Inter Medium, all caps, equal-weight strokes) */
.nameplate {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--sva-blue);
  line-height: var(--leading-tight);
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}
a:hover { color: var(--accent-hover); }
a:active { color: var(--accent-press); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

::selection {
  background: rgba(var(--sva-blue-rgb), 0.18);
  color: var(--fg1);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}