/* ==========================================================================
   BEYRSOL — Design Tokens
   Source: beyrsol-design-system (tokens/colors, typography, spacing,
   radius, shadow, motion). Values are 1:1 with the approved design.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap");

:root{

  /* --- brand core --------------------------------------------------- */
  --blue-600:#010ed0;   /* primary */
  --blue-100:#dedfff;   /* pale lavender */
  --blue-200:#b0c6e6;   /* light steel blue */
  --ink-900:#151515;    /* near-black */

  /* --- derived blues (interaction states) --------------------------- */
  --blue-700:#010ba6;
  --blue-800:#01087c;
  --blue-500:#2b37e0;
  --blue-050:#f0f1ff;

  /* --- neutrals ----------------------------------------------------- */
  --white:#ffffff;
  --ink-700:#3d3d3d;
  --ink-500:#6b6b6b;
  --ink-300:#a8a8a8;
  --ink-200:#d8d8d8;
  --ink-100:#ececec;
  --ink-050:#f7f7f8;

  /* --- semantic ----------------------------------------------------- */
  --green-600:#0f7a52;
  --green-050:#e6f4ee;
  --amber-600:#a8690a;
  --amber-050:#fdf2e0;
  --red-600:#c02026;
  --red-050:#fbe9ea;

  /* --- semantic aliases --------------------------------------------- */
  --brand:var(--blue-600);
  --brand-hover:var(--blue-700);
  --brand-active:var(--blue-800);
  --brand-tint:var(--blue-100);
  --brand-tint-soft:var(--blue-050);

  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-muted:var(--ink-300);
  --text-brand:var(--blue-600);
  --text-on-brand:var(--white);
  --text-on-brand-muted:rgba(255,255,255,.72);

  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-sunken:var(--ink-050);
  --surface-tint:var(--blue-050);
  --surface-brand:var(--blue-600);
  --surface-brand-deep:var(--blue-800);
  --surface-ink:var(--ink-900);

  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-900);
  --border-brand:var(--blue-600);
  --border-on-brand:rgba(255,255,255,.28);

  --focus-ring:var(--blue-500);

  /* --- gradients & washes ------------------------------------------- */
  --wash-cover:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.82) 55%,var(--blue-100) 100%);
  --wash-brand:linear-gradient(160deg,var(--blue-600) 0%,var(--blue-800) 100%);
  --wash-protect:linear-gradient(180deg,rgba(1,14,208,0) 0%,rgba(1,8,124,.85) 100%);
  --brand-grid:repeating-radial-gradient(circle at 0% 108%,transparent 0 148px,rgba(255,255,255,.14) 148px 149px);

  /* --- typography ---------------------------------------------------- */
  --font-sans:"Hanken Grotesk","TT Firs Neue","Helvetica Neue",Helvetica,sans-serif;
  --font-display:var(--font-sans);

  --fw-thin:200;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-demibold:600;
  --fw-bold:700;

  --fs-display-xxl:104px;
  --fs-display-xl:76px;
  --fs-display-lg:56px;
  --fs-display-md:44px;
  --fs-display-sm:34px;
  --fs-title:26px;
  --fs-body-lg:20px;
  --fs-body:17px;
  --fs-body-sm:15px;
  --fs-caption:13px;
  --fs-label:11px;

  --lh-tight:0.96;
  --lh-snug:1.1;
  --lh-heading:1.16;
  --lh-body:1.55;
  --lh-relaxed:1.7;

  --ls-mega:0.34em;
  --ls-label:0.18em;
  --ls-eyebrow:0.1em;
  --ls-tight:-0.02em;
  --ls-tighter:-0.035em;

  /* --- spacing -------------------------------------------------------- */
  --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;

  --shell-w:1600px;
  --shell-pad:48px;
  --gutter:24px;
  --rule:1px;

  /* --- radius --------------------------------------------------------- */
  --radius-none:0;
  --radius-xs:3px;
  --radius-sm:5px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-xl:22px;
  --radius-pill:999px;

  /* --- shadow --------------------------------------------------------- */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(21,21,21,.06);
  --shadow-sm:0 2px 6px rgba(21,21,21,.07);
  --shadow-md:0 8px 24px rgba(21,21,21,.09);
  --shadow-lg:0 20px 56px rgba(21,21,21,.13);
  --shadow-brand:0 12px 32px rgba(1,14,208,.22);
  --inset-hairline:inset 0 0 0 1px var(--border-subtle);
  --inset-hairline-brand:inset 0 0 0 1px rgba(1,14,208,.24);

  /* --- motion --------------------------------------------------------- */
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.5,0,1,1);
  --dur-instant:90ms;
  --dur-fast:150ms;
  --dur-base:220ms;
  --dur-slow:420ms;
  --transition-base:all var(--dur-base) var(--ease-standard);
}

/* ==========================================================================
   Responsive token scaling — the whole type scale steps down together so
   the design keeps its proportions on laptop, tablet and phone.
   ========================================================================== */

/* Laptop / small desktop */
@media (max-width:1180px){
  :root{
    --shell-pad:36px;
    --fs-display-xxl:84px;
    --fs-display-xl:62px;
    --fs-display-lg:48px;
    --fs-display-md:38px;
    --fs-display-sm:30px;
    --fs-title:23px;
    --fs-body-lg:19px;
  }
}

/* Tablet */
@media (max-width:900px){
  :root{
    --shell-pad:28px;
    --fs-display-xxl:64px;
    --fs-display-xl:48px;
    --fs-display-lg:38px;
    --fs-display-md:32px;
    --fs-display-sm:26px;
    --fs-title:21px;
    --fs-body-lg:18px;
    --fs-body:16px;
  }
}

/* Phone */
@media (max-width:600px){
  :root{
    --shell-pad:20px;
    --fs-display-xxl:44px;
    --fs-display-xl:36px;
    --fs-display-lg:30px;
    --fs-display-md:27px;
    --fs-display-sm:23px;
    --fs-title:19px;
    --fs-body-lg:17px;
    --fs-body:16px;
    --fs-body-sm:15px;
  }
}