/* ==========================================================================
   SYSIN TECHNOLOGIES — DESIGN TOKENS
   Single source of truth. Every colour, font, radius, shadow and spacing
   value in the site resolves back to a variable declared here.

   When migrating to React: import this file once in `src/index.css`
   (or copy the :root block into a `theme.css`). Nothing else changes.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     1. BRAND COLOURS
     --------------------------------------------------------------- */
  --c-primary: #0081bd;          /* buttons, top bar, links            */
  --c-primary-hover: #006b9d;
  --c-primary-dark: #003057;     /* gradient start on CTA button       */
  --c-accent: #52abff;           /* tags, "Read briefing", highlights  */

  /* Navy / dark surfaces */
  --c-navy-900: #0b1c2d;         /* section headings                   */
  --c-navy-850: #0f1825;         /* stat cards                         */
  --c-navy-800: #05182b;         /* industry card body text            */
  --c-navy-700: #002a55;         /* CTA panel background               */
  --c-navy-600: #060a10;         /* media overlay gradient base        */

  /* Slate (muted UI text) */
  --c-slate-600: #3e5068;
  --c-slate-400: #7f92aa;

  /* ---------------------------------------------------------------
     2. NEUTRAL / INK SCALE
     --------------------------------------------------------------- */
  --c-ink-900: #1d1d1d;          /* h1, nav links                      */
  --c-ink-850: #282828;          /* lead paragraphs                    */
  --c-ink-800: #313131;          /* card titles, about body            */
  --c-ink-750: #333333;          /* "Read More" links                  */
  --c-ink-700: #3b3939;          /* briefing titles                    */
  --c-ink-600: #454545;          /* footer text                        */
  --c-ink-500: #606060;          /* testimonial quotes                 */
  --c-ink-400: #757575;          /* sub-captions                       */
  --c-ink-100: #171717;

  --c-white: #ffffff;
  --c-black: #000000;

  /* ---------------------------------------------------------------
     3. SURFACES & TINTS
     --------------------------------------------------------------- */
  --c-surface: #ffffff;
  --c-surface-alt: #fbfcff;      /* Our Solutions panel                */
  --c-tint-indigo: #f4f5ff;      /* industry card 1 / 3 / 5            */
  --c-tint-violet: #f7f4ff;      /* industry card 2                    */
  --c-tint-cyan: #edfbff;        /* industry card 4                    */
  --c-tint-blue: #c4d2ff;
  --c-mist: #e8edf5;             /* media excerpt text                 */

  /* Borders */
  --c-border: #f4f4f4;
  --c-border-soft: #ededed;
  --c-border-mid: #e2e2e2;
  --c-border-strong: #e3e3e3;
  --c-border-image: #e6e6e6;
  --c-border-stat: #3b3b3b;
  --c-divider: rgba(0, 0, 0, 0.1);

  /* Status / misc */
  --c-star: #f0b558;             /* rating stars                       */

  /* ---------------------------------------------------------------
     4. TYPEFACES
     Figma uses six families. Each is mapped to a role so components
     never hard-code a family name.
     --------------------------------------------------------------- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --font-alt: "Montserrat", "Inter", system-ui, sans-serif;
  --font-ui: "Roboto", "Inter", system-ui, sans-serif;
  --font-display: "Heebo", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------------
     5. TYPE SCALE  (fluid: min @360px  →  max @1728px design width)
     --------------------------------------------------------------- */
  /* Stepped down ~12% from the Figma scale, and the leading with it. The
     frame was drawn at 1728px for one screen at a time; across nine sections
     the display sizes and the 1.8 leading were adding a screen and a half of
     scrolling on their own. Headings still lead the page — they just no
     longer set the page's height. */
  --fs-display: clamp(1.85rem, 1.25rem + 2.4vw, 2.4rem);  /* 38.4px hero h1    */
  --fs-h2: clamp(1.55rem, 1.15rem + 1.8vw, 2.2rem);       /* 35.2px section h2 */
  --fs-h2-sm: clamp(1.45rem, 1.1rem + 1.5vw, 1.95rem);    /* 31.2px CTA h2     */
  --fs-h3: clamp(1.08rem, 1rem + 0.4vw, 1.18rem);         /* 18.9px card title */
  --fs-h4: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);          /* 17.6px            */
  --fs-lead: clamp(0.97rem, 0.92rem + 0.24vw, 1.09rem);   /* 17.4px hero lead  */
  --fs-body-lg: clamp(0.95rem, 0.92rem + 0.16vw, 1.02rem);/* 16.3px            */
  --fs-body: 0.97rem;                                     /* 15.5px            */
  --fs-sm: 0.875rem;                                      /* 14px              */
  --fs-xs: 0.85rem;                                       /* 13.6px            */
  --fs-2xs: 0.74rem;                                      /* 11.8px            */
  --fs-stat: clamp(1.5rem, 1.15rem + 1vw, 1.8rem);        /* 28.8px stat       */
  --fs-featured: clamp(1.25rem, 0.95rem + 1.2vw, 1.65rem);/* 26.4px media      */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.45;
  --lh-relaxed: 1.62;
  --lh-loose: 1.8;

  /* ---------------------------------------------------------------
     6. SPACING SCALE (4px base)
     --------------------------------------------------------------- */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-7: 1.75rem;   /* 28px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-14: 3.5rem;   /* 56px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */
  --sp-24: 6rem;     /* 96px */

  /* Vertical rhythm.
     `--section-py` is applied to BOTH edges of every section, so the gap
     between two sections is 2× this value — 112px at the design width.
     It was 76px a side (152px between sections), which on pages carrying
     eight or nine sections added up to most of a screen of empty space.
     Sections still read as separate blocks at this distance; what went is
     the part you had to scroll past. */
  --section-py: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  /* Distance from a section heading block to the content below it (~42px). */
  --head-gap: clamp(1.3rem, 1rem + 1.1vw, 2.05rem);

  /* ---------------------------------------------------------------
     7. LAYOUT
     --------------------------------------------------------------- */
  --design-width: 1728px;        /* Figma frame width                  */
  /* Tightened from the Figma frame's 1490 / 1630: the full width left the
     copy running very long on large monitors. Everything else — the hero
     arrows, the banner controls, the wide panel — is derived from these two,
     so this is the only place the measure is set. */
  --container-max: 1320px;       /* Figma: 1490, content x=119 → x=1609 */
  --container-wide: 1440px;      /* "Our Solutions" panel (Figma: 1630) */
  --container-pad: clamp(1rem, 0.4rem + 2.6vw, 2rem);
  --header-h: 104px;
  --topbar-h: 36px;

  /* ---------------------------------------------------------------
     8. RADII

     Declared as Bootstrap's OWN variables rather than a parallel scale,
     so `.rounded`, `.rounded-3`, cards, buttons and every other stock
     Bootstrap component picks up the Figma radii for free.

     The --r-* names below are thin aliases kept for readability in our
     own CSS — they are not a second source of truth.
     --------------------------------------------------------------- */
  --bs-border-radius-sm: 6px;
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 20px;
  --bs-border-radius-xl: 23px;   /* media / briefing cards           */
  --bs-border-radius-xxl: 30px;  /* "Our Solutions" panel            */
  --bs-border-radius-pill: 999px;

  --r-sm: var(--bs-border-radius-sm);
  --r-md: var(--bs-border-radius);
  --r-lg: var(--bs-border-radius-lg);
  --r-xl: var(--bs-border-radius-xl);
  --r-2xl: var(--bs-border-radius-xxl);
  --r-pill: var(--bs-border-radius-pill);

  /* Project extension — Bootstrap's scale stops at xxl, the CTA panel
     in the design is 40px. */
  --r-3xl: 40px;

  /* ---------------------------------------------------------------
     9. SHADOWS
     --------------------------------------------------------------- */
  /* Kept deliberately shallow — the design reads as flat/minimal, so
     shadows separate surfaces rather than lift them. */
  --sh-topbar: none;
  --sh-header:0 8px 10px rgba(11, 28, 45, 0.07);
  --sh-header-stuck: 0 6px 24px rgba(11, 28, 45, 0.07);
  --sh-card: 0 2px 10px rgba(11, 28, 45, 0.03);
  --sh-tile: 0 2px 14px rgba(11, 28, 45, 0.04);
  --sh-card-hover: 0 10px 28px rgba(11, 28, 45, 0.08);

  /* ---------------------------------------------------------------
     10. GRADIENTS
     --------------------------------------------------------------- */
  --g-cta-button: linear-gradient(90deg, var(--c-primary-dark) 0%, var(--c-accent) 100%);
  --g-media-overlay: linear-gradient(
    180deg,
    rgba(6, 10, 16, 0.15) 0%,
    rgba(6, 10, 16, 0.65) 50%,
    rgba(6, 10, 16, 0.97) 100%
  );

  /* ---------------------------------------------------------------
     11. MOTION
     --------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s var(--ease);
  --t-base: 0.25s var(--ease);
  --t-slow: 0.4s var(--ease);

  /* ---------------------------------------------------------------
     12. BOOTSTRAP 5.3 BRIDGE

     Re-points Bootstrap's own variables at the Sysin palette so stock
     components — grid, offcanvas, navbar, buttons, links, focus rings —
     render on-brand with no Sass rebuild. (Radii are handled in §8,
     which declares the --bs-border-radius-* scale directly.)
     --------------------------------------------------------------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-body);
  --bs-body-color: var(--c-ink-850);
  --bs-body-bg: var(--c-surface);
  --bs-emphasis-color: var(--c-navy-900);
  --bs-secondary-color: var(--c-ink-400);

  --bs-primary: var(--c-primary);
  --bs-primary-rgb: 0, 129, 189;
  --bs-primary-text-emphasis: var(--c-primary-dark);
  --bs-primary-bg-subtle: var(--c-tint-indigo);
  --bs-primary-border-subtle: var(--c-tint-blue);

  --bs-link-color: var(--c-primary);
  --bs-link-color-rgb: 0, 129, 189;
  --bs-link-hover-color: var(--c-primary-hover);
  --bs-link-hover-color-rgb: 0, 107, 157;

  --bs-border-color: var(--c-border);
  --bs-border-color-translucent: var(--c-divider);
  --bs-heading-color: var(--c-navy-900);

  /* Grid gutter — also used as the gap token for our own flex rows. */
  --bs-gutter-x: 1.5rem;

  /* Focus ring picks up the brand colour. */
  --bs-focus-ring-color: rgba(0, 129, 189, 0.3);

  /* Offcanvas (mobile navigation) */
  --bs-offcanvas-width: min(340px, 86vw);
  --bs-offcanvas-bg: var(--c-white);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-padding-x: 1.75rem;
  --bs-offcanvas-padding-y: 1.25rem;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-base: 0s;
    --t-slow: 0s;
  }
}