/* ============================================================
   BEINC — Global Styles
   Design tokens, resets, typography, shared utilities
   ============================================================
   This file is loaded on EVERY page before any section CSS.
   It defines the visual foundation of the entire site.
   ============================================================ */


/* ── DESIGN TOKENS ── */
/* Source: FINAL_Beinc2026_BrandGuide.pdf */
:root {

    /* ── Colors — Brand Palette ── */
    /* Names match the official brand guide */
    --color-white:          #FFFBF0;     /* "White" — primary background, light text */
    --color-greyish:        #C9C3BD;     /* "Grey-ish" — dividers, secondary text, strokes */
    --color-darkgreyish:    #3C3B3A;     /* "Dark Grey-ish" — raised surfaces on dark bg (e.g. cards) */
    --color-black:          #262626;     /* "Black" — nav bar, dark surfaces */
    --color-black2:         #191716;     /* "Black2" — primary text, deepest dark */

    /* ── Colors — Web Accent Colours (Service) ── */
    --color-orange-comms:           #E38214;
    --color-green-packaging:        #63AB4A;
    --color-blue-web:               #429CEB;
    --color-red-brand:              #D13D3D;
    --color-pink-name-ideation:     #ED8FB8;
    --color-yellow-graphic-design:  #F0BA2B;
    --color-purple-app-platform:           #9879F0;

    /* ── Colors — Utility ── */
    --color-grid:           #444444;     /* Grid overlay lines (canvas hover effect) */

    /* Semantic aliases (map brand names to functional roles) */
    --color-bg:             var(--color-black2);
    --color-text:           var(--color-black2);
    --color-surface:        var(--color-black);
    --color-border:         var(--color-greyish);


    /* ── Typography ── */
    /* Headings & Subheadings: Indivisible Medium, -75 tracking */
    /* Body Copy: Sora Variable, 18pt+ = -75 tracking, 18pt- = -25 tracking */
    --font-heading:         "indivisible", sans-serif;
    --font-body:            "Sora", sans-serif;
    --font-fallback:        system-ui, -apple-system, sans-serif;

    --font-weight-regular:  400;
    --font-weight-medium:   500;

    /* Font sizes — base scale */
    --text-xs:              14px;
    --text-sm:              16px;
    --text-base:            18px;
    --text-lg:              28px;
    --text-xl:              32px;
    --text-2xl:             48px;
    --text-3xl:             clamp(2rem, 7vw, 6rem);

    /* Letter spacing (from Illustrator tracking values) */
    /* Brand guide: -75 tracking = -0.075em, -25 tracking = -0.025em */
    --tracking-tight:       -0.075em;    /* Headings, subheadings, nav links, CTAs (-75) */
    --tracking-body:        -0.025em;    /* Body copy under 18pt (-25) */
    --tracking-body-lg:     -0.075em;    /* Body copy 18pt and above (-75) */

    /* Line heights */
    --leading-none:         1;           /* Tight headings */
    --leading-tight:        1.1;         /* Display text */
    --leading-snug:         1.2;         /* Sub-labels */
    --leading-normal:       1.4;         /* Body content */
    --leading-relaxed:      1.6;         /* Readable body text */


    /* ── Spacing ── */
    --space-1:              4px;
    --space-2:              8px;
    --space-3:              12px;
    --space-4:              16px;
    --space-5:              24px;
    --space-6:              32px;
    --space-7:              36px;
    --space-8:              40px;
    --space-9:              60px;
    --space-10:             120px;


    /* ── Button Typography ── */
    /* Indivisible Medium, same negative tracking as headings */
    --font-btn:             var(--font-heading);
    --font-weight-btn:      var(--font-weight-medium);
    --tracking-btn:         var(--tracking-tight);   /* -0.075em */
    --text-btn:             clamp(14px, 1.1vw, 18px);

    /* ── Button Spacing ── */
    --btn-pad-x:            clamp(20px, 2.5vw, 36px);
    --btn-pad-y:            clamp(10px, 1.2vw, 16px);

    /* ── Border Radius ── */
    /* 4px is the site-wide default — use --radius for everything */
    --radius:               4px;         /* Default — nav bar, buttons, cards, images */
    --radius-sm:            2px;         /* Subtle rounding (indicators, small elements) */
    --radius-lg:            10px;        /* Available if needed */
    --radius-xl:            16px;        /* Available if needed */


    /* ── Guide Lines (dashed) ── */
    --guide-width:          1px;
    --guide-style:          dashed;
    --guide-color:          var(--color-grid);
    --guide-border:         var(--guide-width) var(--guide-style) var(--guide-color);


    /* ── Transitions & Easing ── */
    --ease-primary:         cubic-bezier(0.77, 0, 0.175, 1);   /* Main animation curve */
    --ease-out-expo:        cubic-bezier(0.16, 1, 0.3, 1);     /* Entrance animations */
    --ease-gentle:          cubic-bezier(0.45, 0, 0.55, 1);    /* Breathing, subtle */

    --duration-fast:        0.3s;
    --duration-normal:      0.5s;
    --duration-slow:        0.7s;


    /* ── Container Widths ── */
    --container-narrow:     720px;       /* Blog text, about copy, readable content */
    --container-default:    1280px;      /* Most sections — standard max-width */
    --container-wide:       1600px;      /* Wide layouts, full-bleed with padding */

    /* ── Container Padding ── */
    /* Desktop (>=1024px): 2% left/right */
    /* Tablet+Phone (<1024px): 4% left/right — overridden in media query below */
    --pad-x:                2%;          /* Left/right side padding */
    --pad-y:                10vh;        /* Top/bottom section spacing */
    --pad-top-nav:          13vh;        /* Top offset for sticky/vh sections behind nav */


    /* ── Breakpoints (reference only — CSS vars don't work in @media) ── */
    /* Wide:          >=1600px                                            */
    /* Desktop:       1200px – 1599px                                     */
    /* Small desktop: 1024px – 1199px                                     */
    /* Tablet:        768px – 1023px  (hamburger shows)                   */
    /* Phone:         <=767px         (hamburger shows)                   */


    /* ── Focus & Accessibility ── */
    --focus-ring-color:     var(--color-blue-web);
    --focus-ring-width:     2px;
    --focus-ring-offset:    2px;


    /* ── Z-Index Scale ── */
    --z-base:               1;
    --z-content:            2;
    --z-elevated:           3;
    --z-indicator:          5;
    --z-hamburger:          10;
    --z-modal:              50;
    --z-3d-shape:           100;
    --z-overlay:            999;
    --z-nav:                1000;
}


/* ── RESET ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
    overflow-x: clip; /* clip without BFC — prevents horizontal scroll, no scroll container created */
}

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--tracking-body);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

img,
video {
    display: block;
    max-width: 100%;
}


/* ── FOCUS & ACCESSIBILITY ── */
/* Visible focus ring for keyboard navigation — hidden for mouse clicks */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

:focus:not(:focus-visible) {
    outline: none;
}



/* ── SCROLLBAR — Hidden ── */
::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }


/* ── RESPONSIVE OVERRIDES ── */
/* Tablet + Phone: wider side padding */
@media (max-width: 1023px) {
    :root {
        --pad-x: 4%;
    }
}


/* ── MOBILE: disable scroll-pinned animations ──
   The scroll-driven JS animations (hero parallax, MVP shrink, team shrink, TR)
   are disabled on mobile. These overrides make the sections display as normal
   static blocks instead of scroll-pinned viewports.

   overflow: clip (not hidden) is used throughout to avoid creating a BFC, which
   iOS Safari uses as a scroll boundary and stops momentum (kinetic) scroll. */
@media (max-width: 767px) {
    /* Disable sticky pinning for sections whose JS animations are still off on mobile */
    .hero-wrapper,
    .team-pinned,
    .tr-pinned {
        position: relative;
    }

    /* Collapse scroll-animation wrapper heights for sections still disabled on mobile */
    .team-scroll,
    .tr-scroll {
        height: auto;
    }
}


/* ── SHARED KEYFRAMES ── */

/* Text reveal wipe animations */
@keyframes wipeIn {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

@keyframes wipeOut {
    from { clip-path: inset(0 0% 0 0); }
    to   { clip-path: inset(0 0% 0 100%); }
}

/* CTA button shine sweep */
@keyframes ctaShineSweep {
    0%   { left: -120%; }
    100% { left: 120%; }
}