/* =========================================================================
   BIJAK DESIGN TOKENS
   Every colour, size and spacing used in styles.css comes from here.
   Change a value once and it updates across the whole site.
   Documentation: DESIGN-SYSTEM.md (project root)
   ========================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Colour: brand (taken from the logo and catalogue) ---- */
  --c-ink: #0B1F3A;          /* logo navy — body text, dark sections, footer */
  --c-blue: #1B5586;         /* catalogue blue — hero, primary buttons */
  --c-blue-deep: #123E63;    /* pressed / hover state of blue */
  --c-swoosh: #1E8BFF;       /* logo swoosh — links, focus ring, data bars */
  --c-signal: #22B5E3;       /* cyan — accents on dark backgrounds only */

  /* ---- Colour: dark "control room" surfaces ---- */
  --c-void: #040B18;         /* hero, footer — deepest background */
  --c-night: #071630;        /* dark content sections */
  --c-glass: rgba(255, 255, 255, 0.045);      /* glass panel fill on dark */
  --c-glass-strong: rgba(255, 255, 255, 0.08);
  --c-glass-line: rgba(148, 197, 255, 0.18);  /* glass panel border */
  --c-grid: rgba(56, 150, 255, 0.16);         /* background grid lines */

  /* ---- Colour: light surfaces & neutrals ---- */
  --c-paper: #FFFFFF;
  --c-mist: #F2F6FB;         /* alternate light section background */
  --c-line: #DCE6F2;         /* borders and dividers on light */
  --c-line-dark: rgba(255, 255, 255, 0.12); /* borders on dark */
  --c-text: #0B1F3A;
  --c-text-muted: #4A5E73;
  --c-on-dark: #FFFFFF;
  --c-on-dark-muted: #B9CDE2;

  /* ---- Colour: functional ---- */
  --c-wa: #25D366;           /* WhatsApp actions only (navy text on top for contrast) */
  --c-wa-hover: #1EBE5A;
  --c-danger: #B42318;

  /* ---- Typography ---- */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.5rem, 10.4vw, 4.9rem);
  --fs-h2: clamp(1.7rem, 5.4vw, 2.6rem);
  --fs-h3: 1.15rem;
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --lh-tight: 1.04;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;
  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;

  /* ---- Space (4px base) ---- */
  --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;

  /* ---- Layout ---- */
  --gutter: 20px;
  --maxw: 1160px;
  --measure: 60ch;
  --section-y: var(--s-8);
  --nav-h: 64px;

  /* ---- Shape (radius follows hierarchy: small controls → large panels) ---- */
  --r-sm: 8px;    /* chips' inner items, logo tiles */
  --r-md: 12px;   /* buttons, inputs */
  --r-lg: 20px;   /* panels and tier cards */
  --r-pill: 999px;

  /* ---- Elevation & glow ---- */
  --shadow-float: 0 14px 34px -14px rgba(11, 31, 58, 0.35);   /* menus, floating buttons */
  --shadow-lift: 0 18px 40px -22px rgba(27, 85, 134, 0.45);   /* light cards on hover */
  --glow-blue: 0 0 0 1px rgba(30, 139, 255, 0.25), 0 24px 70px -24px rgba(30, 139, 255, 0.55);
  --glow-wa: 0 10px 30px -10px rgba(37, 211, 102, 0.65);
  --grad-border: linear-gradient(135deg, rgba(30, 139, 255, 0.95), rgba(34, 181, 227, 0.3) 45%, rgba(255, 255, 255, 0.05));
  --grad-text: linear-gradient(180deg, #FFFFFF 35%, #A9CEFF 100%);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 1200ms;
  --dur-enter: 700ms;      /* the one hero entrance sequence */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Layers ---- */
  --z-nav: 50;
  --z-bar: 40;
}

@media (min-width: 960px) {
  :root {
    --gutter: 32px;
    --section-y: var(--s-9);
  }
}