/* ==========================================================================
   Design tokens — SwifTrans AB
   Single source of truth for color, type, spacing, radius, shadow, motion.
   ========================================================================== */

@layer tokens {
  @font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-condensed-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-condensed-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700.woff2") format("woff2");
  }

  :root {
    /* ---- Color: dark surfaces ---- */
    --navy-950: #07152b;
    --navy-900: #0b1f3a;
    --navy-800: #102a4c;

    /* ---- Color: Transport accent ---- */
    --orange-500: #f26a1b;
    --orange-400: #ff8a3d;
    --orange-300: #ffb27a;
    --orange-700: #b84e10; /* small text / AA-safe accent on light grounds */

    /* ---- Color: Consultancy accent ---- */
    --teal-600: #12707c;
    --teal-500: #1c8d9a;
    --teal-300: #7fd1d9;

    /* ---- Color: Homepage hero gateway cards ---- */
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --green-600: #16a34a;
    --green-700: #15803d;

    /* ---- Color: light surfaces + text ---- */
    --sand-50: #f6f4f0;
    --white: #ffffff;
    --ink-900: #14202e;
    --ink-600: #4a5868;

    /* ---- Semantic aliases ---- */
    --surface-dark: var(--navy-950);
    --surface-dark-raised: var(--navy-800);
    --surface-light: var(--white);
    --surface-sand: var(--sand-50);
    --text-on-dark: var(--white);
    --text-on-dark-muted: color-mix(in oklab, var(--white) 70%, var(--navy-950));
    --text-on-light: var(--ink-900);
    --text-on-light-muted: var(--ink-600);
    --focus-ring: var(--orange-400);

    /* ---- Type families ---- */
    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ---- Fluid type scale ---- */
    --step-hero: clamp(2.75rem, 2rem + 4.5vw, 6rem);
    --step-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
    --step-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --step-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --step-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --step-body: 1rem;
    --step-small: 0.875rem;
    --step-eyebrow: 0.8125rem;

    /* ---- Spacing (8px grid) ---- */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 6rem;
    --section-pad: clamp(4rem, 10vw, 8rem);

    /* ---- Layout ---- */
    --content-max: 1200px;
    --gutter: 1.25rem;

    /* ---- Radius ---- */
    --radius-sm: 14px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ---- Shadow ---- */
    --shadow-sm: 0 1px 2px rgb(7 21 43 / 0.08);
    --shadow-md: 0 12px 32px -12px rgb(7 21 43 / 0.35);
    --shadow-lg: 0 24px 48px -16px rgb(7 21 43 / 0.45);
    --border-hairline: 1px solid rgb(20 32 46 / 0.1);
    --border-hairline-dark: 1px solid rgb(255 255 255 / 0.12);

    /* ---- Motion ---- */
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-ui: 260ms;
    --dur-reveal: 700ms;

    /* ---- Z-index ---- */
    --z-progress: 100;
    --z-header: 90;
    --z-menu: 95;
  }
}