/* ============================================================
   WizIT — Design Tokens  ·  "IT is a human adventure"
   Brand palette, type, spacing, motion. Self-hosted Open Sans.
   ============================================================ */

/* ---------- Open Sans (body / UI) ---------- */
@font-face { font-family:'Open Sans'; src:url('../fonts/OpenSans-Regular.woff2')  format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('../fonts/OpenSans-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('../fonts/OpenSans-Bold.woff2')     format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans'; src:url('../fonts/OpenSans-ExtraBold.woff2')format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ---------- Open Sans Condensed (display) ---------- */
@font-face { font-family:'Open Sans Condensed'; src:url('../fonts/OpenSans_Condensed-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans Condensed'; src:url('../fonts/OpenSans_Condensed-Bold.woff2')     format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans Condensed'; src:url('../fonts/OpenSans_Condensed-ExtraBold.woff2')format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

/* ---------- Open Sans SemiCondensed (subheads / nav) ---------- */
@font-face { font-family:'Open Sans SemiCondensed'; src:url('../fonts/OpenSans_SemiCondensed-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans SemiCondensed'; src:url('../fonts/OpenSans_SemiCondensed-SemiBold.woff2')format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Open Sans SemiCondensed'; src:url('../fonts/OpenSans_SemiCondensed-Bold.woff2')    format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ============ BRAND PALETTE (sampled from the WizIT logo) ============ */
  --navy:        #1B3A57;   /* primary — dominant brand color  */
  --navy-deep:   #122A41;   /* pressed / dark surface / hover-darken */
  --navy-soft:   #2A4E70;
  --periwinkle:  #A4ADCD;   /* secondary — supporting cool tone */
  --periwinkle-lt:#C9CFE2;
  --periwinkle-dk:#7E89AD;
  --tan:         #B39672;   /* accent — the single warm highlight (THE "IT") */
  --tan-lt:      #D7C2A4;
  --tan-dk:      #8A7250;

  /* ============ NEUTRALS ============ */
  --ink:      #0E1C2B;      /* near-black, never pure black */
  --graphite: #2C3A48;
  --slate:    #5A6A7A;
  --mist:     #8C9AAB;
  --fog:      #C8D0D9;
  --cloud:    #E6EAF0;
  --paper:    #F4F6F9;      /* subtle alt surface */
  --white:    #FFFFFF;

  /* ============ SEMANTIC ============ */
  --success: #3F8F6E;
  --danger:  #B5483E;

  /* ============ FOREGROUND / BACKGROUND ============ */
  --fg-1: var(--ink);
  --fg-2: var(--graphite);
  --fg-3: var(--slate);
  --fg-4: var(--mist);
  --bg-1: var(--white);
  --bg-2: var(--paper);
  --bg-3: var(--cloud);

  /* ============ STROKES ============ */
  --stroke-1: rgba(14,28,43,.06);   /* hairline */
  --stroke-2: rgba(14,28,43,.14);   /* default border */
  --stroke-3: rgba(14,28,43,.24);   /* strong */
  --stroke-on-dark: rgba(255,255,255,.16);

  /* ============ ELEVATION (navy-tinted, never pure black) ============ */
  --shadow-1: 0 1px 2px rgba(14,28,43,.06), 0 1px 1px rgba(14,28,43,.04);
  --shadow-2: 0 4px 10px rgba(14,28,43,.07), 0 2px 4px rgba(14,28,43,.04);
  --shadow-3: 0 16px 32px rgba(14,28,43,.12), 0 4px 8px rgba(14,28,43,.06);
  --shadow-navy: 0 14px 30px rgba(27,58,87,.22);
  --shadow-focus: 0 0 0 3px rgba(27,58,87,.30);

  /* ============ RADII (shape lock: cards 16, inputs/buttons 10, pills 999) ============ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ============ SPACING (4-pt scale) ============ */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  /* ============ TYPE FAMILIES ============ */
  --font-display: 'Open Sans Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-subhead: 'Open Sans SemiCondensed', 'Arial Narrow', sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ============ MOTION (Emil-grade custom curves) ============ */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);     /* enter — strong, responsive */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);    /* on-screen movement */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);     /* iOS-like */
  --dur-1: 140ms;   /* micro: press / hover */
  --dur-2: 220ms;   /* default UI */
  --dur-3: 420ms;   /* enter / exit */
}