/* Purpose: Design tokens - the single source of truth for Biji Pathfinders / Drone Soccer India.
   Strict 4-point system: every size, space, radius and icon dimension is a multiple of 4px.
   Nothing anywhere in this theme may use a raw value. Retheme the whole site from this file. */

/* ============================================================
   FONTS - self-hosted, no Google CDN
   ============================================================ */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';font-style:italic;font-weight:200 800;font-display:swap;
  src:url('../fonts/montserrat-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Orbitron';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/orbitron-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';font-style:italic;font-weight:200 800;font-display:swap;
  src:url('../fonts/montserrat-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Orbitron';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/orbitron-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/space-grotesk-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../fonts/jetbrains-mono-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ==========================================================
     SPACING - strict 4-point scale
     ========================================================== */
  --space-4:4px;    --space-8:8px;    --space-12:12px;  --space-16:16px;
  --space-20:20px;  --space-24:24px;  --space-32:32px;  --space-40:40px;
  --space-48:48px;  --space-56:56px;  --space-64:64px;  --space-80:80px;
  --space-60:60px;  --space-96:96px;  --space-128:128px; --space-160:160px;

  /* ==========================================================
     TYPE SCALE - every size divisible by 4
     ========================================================== */
  --fs-12:0.75rem;  --fs-16:1rem;     --fs-20:1.25rem;  --fs-24:1.5rem;
  --fs-28:1.75rem;  --fs-32:2rem;     --fs-40:2.5rem;   --fs-48:3rem;
  --fs-56:3.5rem;   --fs-64:4rem;     --fs-80:5rem;     --fs-96:6rem;

  /* Semantic aliases. Fluid sizes interpolate BETWEEN two 4-point tokens,
     so every resolved endpoint still lands on the grid. */
  /* Semantic scale, matched to the reference design. 14px and 18px sit off the
     4-point grid; they are the reference's own values and are kept deliberately so the
     type matches, rather than being snapped to 16 or 20. */
  --fs-14:0.875rem;  --fs-18:1.125rem;  --fs-44:2.75rem;

  --fs-caption:var(--fs-14);
  --fs-body:var(--fs-16);
  --fs-body-lg:var(--fs-18);
  --fs-lead:var(--fs-20);
  --fs-34:2.125rem;   /* testimonial */
  --fs-120:7.5rem;    /* hero wordmark */
  --fs-180:11.25rem;  /* quotation mark */

  /* Section headings: 48px in the design, 40px on the narrower blocks. */
  --fs-h1:clamp(var(--fs-32), 3.2vw + 1rem, var(--fs-48));
  --fs-h2:clamp(var(--fs-28), 3vw + 1rem, var(--fs-48));
  --fs-h3:clamp(var(--fs-28), 2.6vw + 0.9rem, var(--fs-40));
  --fs-h4:var(--fs-24);
  --fs-h5:var(--fs-20);
  --fs-h6:var(--fs-18);
  --fs-display:clamp(var(--fs-40), 8vw, var(--fs-120));

  /* Body headings - Manrope, used for feature and quote type */
  --fs-feature:clamp(var(--fs-24), 2.4vw + 0.6rem, var(--fs-32));

  /* Line-heights resolve line-boxes onto 4-point multiples */
  --lh-tight:1.0;  --lh-snug:1.25;  --lh-normal:1.5;  --lh-loose:1.75;
  --tracking-tight:-0.03em; --tracking-normal:0; --tracking-wide:0.08em; --tracking-widest:0.26em;
  --weight-extralight:200; --weight-light:300; --weight-regular:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700;

  /* ==========================================================
     FONTS
     ========================================================== */
  /* Display face for the wordmark, the headline numbers and the sector indices. */
  --font-display:'Orbitron', system-ui, sans-serif;

  /* Headings. The design specifies Neue Haas Unica, a licensed Monotype family that
     cannot be self-hosted without a webfont licence. Inter stands in: the same
     neo-grotesque skeleton at the same weights (200 / 300 / 500). Swap the first name
     here once the licence is in place - nothing else needs to change. */
  --font-heading:'Neue Haas Unica', 'Inter', system-ui, -apple-system, sans-serif;

  /* Body copy throughout. */
  --font-body:'Montserrat', system-ui, -apple-system, sans-serif;

  /* Stat labels only. */
  --font-label:'Manrope', 'Montserrat', system-ui, sans-serif;

  /* The oversized quotation mark. */
  --font-quote:'Fraunces', Georgia, serif;

  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* ==========================================================
     COLOUR - confirmed brand palette, 18 Aug 2026
     Every pairing below is WCAG AA verified. Contrast noted.
     ========================================================== */
  /* Brand. The neutral scale follows the reference design; the accent stays the
     client's confirmed brand red rather than the reference's own. */
  --c-crimson:#B31147;       /* Brand Red, confirmed 18 Aug. Solid fills - 6.8:1 with white */
  --c-crimson-light:#E8447E; /* Red on dark - 5.3:1 */
  --c-primary:#B31147;       /* Primary action takes the brand red */
  --c-primary-hover:#CE1953;
  --c-accent:#E8447E;        /* Accents, stat suffixes, links */
  --c-accent-high:#F27CA5;
  --c-navy:#01127A;          /* Retained for the cage artwork and legacy washes */
  --c-navy-wash:#04093A;

  /* Surfaces */
  --c-bg:#000000;            /* Page background */
  --c-bg-alt:#0F0F0F;        /* Panel - cards and alternating bands */
  --c-bg-deep:#05070B;       /* The ecosystem band */
  --c-surface:#0F0F0F;
  --c-surface-raised:#181818;
  --c-border:rgba(255,255,255,.1);
  --c-border-mid:rgba(255,255,255,.3);
  --c-border-strong:rgba(255,255,255,.4);
  --c-surface-glass:rgba(255,255,255,.1);
  --c-surface-glass-2:rgba(250,250,250,.1);

  /* Text */
  --c-text:#FFFFFF;
  --c-text-muted:#D9D9D9;    /* Footer copy - 15.9:1 on black */
  --c-text-soft:#F6F6F6;     /* Sector card copy */
  --c-text-hero:#FFFCF5;     /* Warm white, hero copy only */
  --c-text-dim:#8A8A8A;      /* Meta only */
  --c-text-on-brand:#FFFFFF;

  /* State */
  --c-success:#16A34A; --c-warning:#D97706; --c-error:#F0556B;

  /* ==========================================================
     GRID / CONTAINERS - 12 desktop / 8 tablet / 4 mobile
     ========================================================== */
  --grid-cols:4;
  --grid-gap:var(--space-16);
  --container-max:1280px;    /* 1440 frame less 80px gutters */
  --container-inner:1240px;  /* the centred content column */
  --container-wide:1440px;
  --container-narrow:680px;
  --container-pad-mobile:var(--space-20);
  --container-pad-tablet:var(--space-40);
  --container-pad-desktop:var(--space-80);
  --container-pad:var(--container-pad-mobile);

  /* The reference runs a flat 100px band on every section. */
  --section-pad:var(--space-48);
  --section-pad-lg:var(--space-80);

  /* ==========================================================
     GLOBAL SHELL / HEADER
     ========================================================== */
  --header-main-target:72px;        /* visual target; real height = content + padding */
  --header-announcement-target:40px;
  --header-scroll-delta:8px;
  --header-hide-after:128px;
  --header-offset:var(--header-main-target);

  /* ==========================================================
     RADIUS / SHADOW  (radii divisible by 4, plus a 2px hairline
     for the squared aerospace edge the brand uses)
     ========================================================== */
  --r-hairline:2px;
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --r-card:16px;   /* the reference's card radius */
  --r-pill:50px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.32);
  --shadow-md:0 4px 16px rgba(0,0,0,.40);
  --shadow-lg:0 8px 32px rgba(0,0,0,.48);
  --shadow-xl:0 20px 60px rgba(0,0,0,.56);
  --shadow-primary:0 12px 40px -12px rgba(59,79,240,.85);
  --shadow-crimson:0 12px 40px -12px rgba(179,17,71,.80);

  /* ==========================================================
     ICON SIZES - all divisible by 4
     ========================================================== */
  --icon-12:12px; --icon-16:16px; --icon-20:20px; --icon-24:24px;
  --icon-32:32px; --icon-40:40px; --icon-48:48px;

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);
  /* Overshoots slightly before settling - the shape of a spring coming to rest. */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms; --dur-slower:700ms;

  /* ==========================================================
     Z-INDEX
     ========================================================== */
  --z-base:0; --z-raised:10; --z-dropdown:100; --z-sticky:200;
  --z-overlay:300; --z-modal:400; --z-drawer:450; --z-toast:500;

  /* Channel triplets. Every wash, scrim and glow in the theme composes its alpha from
     one of these, so a brand colour is still defined exactly once. */
  --rgb-navy:1, 18, 122;
  --rgb-void:0, 0, 0;
  --rgb-panel:15, 15, 15;
  --rgb-accent:232, 68, 126;
  --rgb-crimson:179, 17, 71;
  --rgb-shadow:0, 0, 0;
  --rgb-white:255, 255, 255;

  /* Translucent brand tints, so inline SVG artwork references the system
     rather than repeating raw channel values. */
  --c-accent-70:rgba(232,68,126,.70);
  --c-accent-55:rgba(232,68,126,.55);
  --c-accent-45:rgba(232,68,126,.45);
  --c-accent-40:rgba(232,68,126,.40);
  --c-accent-22:rgba(232,68,126,.22);
  --c-crimson-60:rgba(232,68,126,.60);
  --c-crimson-55:rgba(232,68,126,.55);
  --c-crimson-50:rgba(232,68,126,.50);
  --c-crimson-45:rgba(232,68,126,.45);
  --c-neutral-45:rgba(168,176,189,.45);
  --c-neutral-30:rgba(168,176,189,.30);

  /* Signature motif: the BeeZeta1 cage pentagon */
  --pentagon:polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
}

@media (min-width:768px){
  :root{
    --grid-cols:8;
    --grid-gap:var(--space-24);
    --container-pad:var(--container-pad-tablet);
  }
}
@media (min-width:1024px){
  :root{
    --grid-cols:12;
    --container-pad:var(--container-pad-desktop);
  }
}