/*!
 * WISeKey 2026 — design token
 * Bóc từ wisekey-web-redesign-master/index.html, giữ nguyên nội dung gốc.
 * Nguồn tham chiếu: component-library.html, WEBDEV_BRIEF.md
 */
/* ==========================================================================
   WISeKey homepage redesign — v2, "Precision Instrument"
   Brand basis: WISeKey Brand Kit v1.0. Brand red corrected to the TRUE logo
   value #ED1C24 per Carlos, 12 Aug 2026.
   This version takes deliberate creative latitude beyond the kit; every
   departure is marked  [LATITUDE]  with its reason, and catalogued in
   PHASE2_NOTES_v2.md §3.
   ========================================================================== */:root{
  /* ---------- Brand red: one coherent family, hue 357.7deg, sat 85%,
     stepped in lightness from the true logo red. Every step measured. ------ */
  --red:      #ED1C24;   /* TRUE brand red (logo). 4.38:1 on white -> large text, numerals, logo */
  --red-600:  #D01018;   /* 5.57:1 both ways -> small text, links, primary fills */
  --red-700:  #AA0D13;   /* 7.56:1 -> hover */
  --red-800:  #800A0F;   /* 10.67:1 -> press, focus ring */
  --red-400:  #F15056;   /* 5.01:1 on navy -> accents on dark */
  --red-300:  #F57F84;   /* 6.87:1 on navy -> eyebrows / links on dark */
  --red-050:  #FDEBEC;   /* tinted surface */

  /* ---------- Neutrals. Kit ladder, plus two deeper steps for the
     full-bleed dark moments.  [LATITUDE] --void / --navy-900 added. ------- */
  --void:     #060D18;
  --navy-900: #081426;
  --navy:     #0B1F3A;   /* kit */
  --navy-2:   #15325C;   /* kit */
  --black:    #231F20;   /* kit — logo near-black */
  --ink:      #111111;   /* kit */
  --graphite: #3A3A3C;   /* kit */
  --slate:    #6B6F76;   /* kit */
  --steel:    #9BA0A8;   /* kit */
  --mist:     #D6D9DE;   /* kit */
  --fog:      #EEF0F3;   /* kit */
  --paper:    #F7F8FA;   /* kit */
  --white:    #FFFFFF;

  /* on-dark text steps */
  --on-dark-1:#FFFFFF;
  --on-dark-2:#C9CFD9;   /* 11.4:1 on navy */
  --on-dark-3:#8E97A6;   /*  5.6:1 on navy */

  /* ---------- Semantic ---------- */
  --fg-1:var(--ink); --fg-2:var(--graphite); --fg-3:var(--slate);
  --bg-1:var(--white); --bg-2:var(--paper); --bg-3:var(--fog);
  --border-subtle:var(--mist); --border-control:var(--slate);
  --accent:var(--red); --accent-text:var(--red-600);
  --success:#1E8A4C; --warning:#C97A0A; --danger:#C72A1C; --info:#15325C;
  --focus-ring:2px solid var(--red-800); --focus-offset:2px;

  /* ---------- Type.  [LATITUDE] The kit specifies Arial/Helvetica and flags
     it as a stand-in for an unknown corporate face. Arial has no true 800/900,
     which caps the display register the brief asks for. Inter Tight is a
     Helvetica-class grotesque with real heavy weights — and Inter is already
     loaded by the live site's own wisekey-layout CSS, so this is closer to
     what WISeKey actually renders than the kit's guess. One-line revert. --- */
  --font-sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Inter Tight","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;   /* kit */

  /* [LATITUDE] display top end raised 72 -> 104px; the rest is the kit scale */
  --fs-mega:clamp(36px,5.1vw,76px);
  --fs-display:clamp(34px,5vw,72px);
  --fs-h1:clamp(30px,3.6vw,52px);
  --fs-h2:clamp(26px,2.6vw,38px);
  --fs-h3:22px; --fs-h4:18px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px;
  --fs-caption:12px; --fs-eyebrow:12px;
  --lh-tight:1.02; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --tk-eyebrow:0.14em; --tk-tight:-0.02em; --tk-mega:-0.035em;

  /* ---------- Space, 4px grid (kit) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --s-11:176px;

  --r-none:0; --r-sm:2px; --r-md:4px; --r-lg:8px; --r-pill:999px;

  --shadow-1:0 1px 2px rgba(17,17,17,.06), 0 1px 1px rgba(17,17,17,.04);
  --shadow-2:0 4px 12px rgba(17,17,17,.08), 0 2px 4px rgba(17,17,17,.04);
  --shadow-3:0 12px 32px rgba(17,17,17,.12), 0 4px 8px rgba(17,17,17,.06);
  --shadow-4:0 24px 64px rgba(8,20,38,.18), 0 8px 16px rgba(8,20,38,.10);

  --ease:cubic-bezier(.22,.61,.36,1);          /* kit */
  --ease-io:cubic-bezier(.65,0,.35,1);         /* kit */
  --dur-1:140ms; --dur-2:220ms; --dur-3:420ms; /* kit */
  --dur-4:720ms;                               /* [LATITUDE] draw-ins */

  /* [LATITUDE] container 1200 -> 1320 for the wider editorial measure */
  --container:1320px; --container-narrow:960px;
}