/* Blue Code — design tokens
   Source of truth: /tokens/tokens.json (same values).
   Desktop values match "Blue Code DevOps — Final Desktop" (1440 px).
   Mobile values match "Blue Code DevOps — Final Mobile" (390 px). */

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour — surfaces */
  --color-ink-950: #0A0B0D;   /* page background, dark sections */
  --color-ink-900: #0F1114;   /* cards on dark */
  --color-ink-850: #111317;   /* raised dark section (Platforms) */
  --color-bone-100: #ECEAE4;  /* light sections */
  --color-bone-50: #F2F0EB;   /* featured card, text on dark */

  /* Colour — brand */
  --color-accent: #2A45FF;          /* electric blue: primary CTA, final CTA band — white text 6.2:1 */
  --color-accent-soft: #8C9AFF;     /* focus rings, check icons on dark — 7.7:1 */
  --color-accent-glow: rgba(42, 69, 255, 0.35);
  --color-success: #3DDC84;         /* reserved, not used on the landing */

  /* Colour — text on dark */
  --color-text-dark-1: #F2F0EB;     /* primary   — 17.3:1 on ink-950 */
  --color-text-dark-2: #C9C7C1;     /* secondary — 11.7:1 */
  --color-text-dark-3: #9A9AA0;     /* tertiary  —  7.0:1 */
  --color-text-dark-dim: #8A8A92;   /* headline second line — 5.8:1 */

  /* Colour — text on light (bone-100) */
  --color-text-light-1: #0A0B0D;    /* 16.4:1 */
  --color-text-light-2: #3A3A40;    /*  9.4:1 */
  --color-text-light-3: #55555B;    /*  6.2:1 */

  /* Colour — lines */
  --color-line-dark: rgba(242, 240, 235, 0.12);
  --color-line-dark-soft: rgba(242, 240, 235, 0.08);
  --color-line-dark-card: rgba(242, 240, 235, 0.16);
  --color-line-dark-strong: rgba(242, 240, 235, 0.30);
  --color-line-dark-button: rgba(242, 240, 235, 0.50);
  --color-line-light: rgba(10, 11, 13, 0.20);
  --color-line-light-soft: rgba(10, 11, 13, 0.10);
  --color-line-accent: rgba(255, 255, 255, 0.25);

  /* Typography */
  --font-sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Fluid type scale: min (mobile 390) → max (desktop 1440) */
  --text-display-xl: clamp(48px, 9.44vw, 136px);  /* Final CTA headline */
  --text-display-l:  clamp(38px, 6.94vw, 100px);  /* Hero H1 */
  --text-h2:         clamp(40px, 5.55vw, 80px);   /* Section H2 */
  --text-h2-s:       clamp(34px, 4.44vw, 64px);   /* Delivery + FAQ H2 */
  --text-h2-recruit: clamp(34px, 3.9vw, 56px);
  --text-h3-section: clamp(28px, 3.05vw, 44px);   /* "What changes", sovereignty */
  --text-card-title: clamp(24px, 2.22vw, 32px);
  --text-plan-name:  clamp(30px, 3.05vw, 44px);
  --text-body-l:     clamp(17px, 1.46vw, 21px);
  --text-body:       clamp(16px, 1.18vw, 17px);
  --text-small:      15px;
  --text-label:      14px;

  --leading-display: 0.96;
  --leading-heading: 1.05;
  --leading-body: 1.5;
  --tracking-display: -0.05em;
  --tracking-heading: -0.04em;
  --tracking-title: -0.03em;

  /* Layout */
  --container-max: 1440px;
  --gutter: 64px;              /* page side padding */
  --grid-columns: 12;
  --grid-gap: 24px;
  --section-y: 120px;          /* vertical section padding */
  --section-y-tight: 96px;
  --section-gap: 64px;         /* header → content */
  --card-pad: 32px;
  --header-h: 88px;
  --measure: 600px;            /* max body line width */

  /* Radius & elevation — the system is square by design */
  --radius: 0;
  --shadow-featured: 0 0 0 1px var(--color-accent), 0 24px 80px rgba(42, 69, 255, 0.25);
  --shadow-cta-hover: 0 10px 36px var(--color-accent-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fade: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 200ms;
  --dur-reveal: 900ms;
  --reveal-distance: 48px;
  --reveal-stagger: 80ms;

  /* Interaction */
  --target-min: 44px;
  --focus-ring: 2px solid var(--color-accent-soft);
  --focus-offset: 3px;
}

@media (max-width: 1199px) {
  :root { --gutter: 40px; --section-y: 96px; --section-y-tight: 80px; --section-gap: 48px; --card-pad: 28px; }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --grid-gap: 12px;
    --section-y: 64px;
    --section-y-tight: 56px;
    --section-gap: 28px;
    --card-pad: 22px;
    --header-h: 64px;
    --reveal-distance: 32px;
  }
}