/* ============================================================
   Beatfold — core design system
   Single source of truth for tokens, typography, buttons, nav,
   footer and motion. Loaded by every page before its own styles.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Google_Sans_Flex/static/GoogleSansFlex_24pt-Regular.ttf') format('truetype')}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/Google_Sans_Flex/static/GoogleSansFlex_24pt-Medium.ttf') format('truetype')}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Google_Sans_Flex/static/GoogleSansFlex_24pt-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Google Sans Flex';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Google_Sans_Flex/static/GoogleSansFlex_24pt-Bold.ttf') format('truetype')}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* --- surfaces (dark, identical to the app) --- */
  --bg:#111112;
  --card:#18181a;
  --card-2:#1d1d1f;
  --card-3:#232326;
  --chip:#1d1d1f;

  /* --- borders: thin and quiet, the primary separator --- */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.18);

  /* --- text --- */
  --heading:#ffffff;
  --text:#ededeb;
  --text-2:#a8a8a4;   /* body — deliberately lower contrast */
  --head-2:#8b8b87;   /* meta / labels */

  /* --- accent: one colour, used sparingly --- */
  --brand:#FF3D31;
  --brand-dim:rgba(255,61,49,.14);
  --brand-line:rgba(255,61,49,.32);

  /* --- controls --- */
  --btn-bg:#fafaf8;--btn-fg:#111112;
  --nav-bg:rgba(17,17,18,.82);--menu-bg:rgba(17,17,18,.97);

  /* --- typography --- */
  --font:"Google Sans Flex",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
  /* fluid heading scale */
  --t-h1:clamp(38px,5.4vw,62px);
  --t-h2:clamp(27px,3.5vw,42px);
  --t-h3:clamp(18px,1.5vw,21px);
  --t-h4:16px;
  /* body scale — 5 steps, no half-pixel drift */
  --t-xs:12px;
  --t-sm:13px;
  --t-base:14px;
  --t-md:15px;
  --t-lg:clamp(15.5px,1.4vw,17px);

  /* --- spacing scale (4px base) --- */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px; --s-6:24px;  --s-8:32px;  --s-10:40px;
  --s-12:48px;--s-16:64px; --s-20:80px;
  --gap:14px;                                  /* default grid gap */
  --section-y:clamp(76px,10vw,132px);          /* vertical section rhythm */

  /* --- radii --- */
  --r-xs:6px; --r-sm:8px; --r-md:10px;
  --r:12px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  /* --- layout --- */
  --maxw:1160px;
  --pad:max(22px,5vw);
  --nav-h:66px;

  /* --- motion --- */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.18s;
  --t-med:.35s;
}

:root[data-theme="light"]{
  --bg:#EDEDE8;
  --card:#F6F6F3;
  --card-2:#e9e9e3;
  --card-3:#dedfd8;
  --chip:#e7e7e1;

  --line:rgba(18,18,24,.10);
  --line-2:rgba(18,18,24,.16);
  --line-3:rgba(18,18,24,.24);

  --heading:#232322;
  --text:#3a3a36;
  --text-2:#63635e;
  --head-2:#7d7d77;

  --brand:#C81E12;                 /* darkened to clear AA contrast on light */
  --brand-dim:rgba(200,30,18,.10);
  --brand-line:rgba(200,30,18,.30);

  --btn-bg:#232322;--btn-fg:#F6F6F3;
  --nav-bg:rgba(237,237,232,.82);--menu-bg:rgba(237,237,232,.97);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none;scroll-padding-top:calc(var(--nav-h) + 24px)}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.5;font-size:var(--t-lg);letter-spacing:-.011em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  scrollbar-width:none;-ms-overflow-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--brand);color:#fff}
.ic{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}

/* --- accessibility: a visible, consistent focus ring everywhere --- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:var(--r-xs)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--card);color:var(--heading);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:12px 18px;font-size:var(--t-base);font-weight:600}
.skip-link:focus{left:var(--pad);top:12px}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);position:relative}
.section{padding-block:var(--section-y);position:relative;scroll-margin-top:calc(var(--nav-h) + 14px)}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.028em;line-height:1.05;color:var(--heading);text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1.02}
.h-sec{font-size:var(--t-h2);margin:var(--s-3) 0 0}
.h-sec .mut,h1 .mut,h2 .mut{color:var(--head-2)}
.lead{color:var(--text-2);font-size:var(--t-lg);line-height:1.6;font-weight:400;text-wrap:pretty}

/* mono eyebrow — the section label */
.eyebrow{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--head-2);
  display:inline-flex;gap:7px;align-items:baseline}
.eyebrow b{color:var(--brand);font-weight:600}

/* ============================================================
   BUTTONS — one system: primary / secondary / ghost / text
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:inherit;font-weight:500;font-size:var(--t-md);letter-spacing:-.01em;
  padding:11px 20px;border-radius:var(--r-md);border:1px solid transparent;
  white-space:nowrap;cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.btn .ic{width:16px;height:16px}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn--primary:hover{filter:brightness(.93)}
.btn--secondary{background:var(--card-2);color:var(--heading);border-color:var(--line-2)}
.btn--secondary:hover{background:var(--card-3);border-color:var(--line-3)}
.btn--ghost{background:transparent;color:var(--heading);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--card);border-color:var(--line-3)}
.btn--text{background:transparent;color:var(--heading);padding-inline:var(--s-1)}
.btn--text .ic{transition:transform var(--t-med) var(--ease)}
.btn--text:hover{color:var(--brand)}
.btn--text:hover .ic{transform:translateX(3px)}
.btn--lg{padding:13px 24px;font-size:var(--t-md)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ============================================================
   SURFACES — cards separated by background + border, not shadow
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t-med) var(--ease),background var(--t-med) var(--ease)}
.card--hover:hover{border-color:var(--line-2);background:var(--card-2)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--t-med) var(--ease),border-color var(--t-med) var(--ease)}
.nav.scrolled{background:var(--nav-bg);border-bottom-color:var(--line);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px)}
.nav__in{display:flex;align-items:center;gap:var(--s-6);height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:var(--s-2);color:var(--heading);
  transition:opacity var(--t-fast)}
.brand:hover{opacity:.75}
.brand__logo{height:28px;width:auto;display:block}
.logo-for-light{display:none}
:root[data-theme="light"] .logo-for-dark{display:none}
:root[data-theme="light"] .logo-for-light{display:block}
.nav__links{display:flex;gap:var(--s-8);margin-inline:auto}
.nav__links a{font-size:var(--t-base);color:var(--text-2);font-weight:500;
  position:relative;transition:color var(--t-fast)}
.nav__links a:hover{color:var(--heading)}
.nav__right{display:flex;align-items:center;gap:var(--s-3)}
.nav .btn--primary{padding:8px 16px;font-size:var(--t-base)}
.nav__theme,.nav__toggle{width:36px;height:36px;border-radius:var(--r-md);
  display:grid;place-items:center;color:var(--text-2);
  border:1px solid var(--line);background:transparent;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.nav__theme:hover,.nav__toggle:hover{color:var(--heading);border-color:var(--line-2);background:var(--card)}
.nav__theme .ic,.nav__toggle .ic{width:17px;height:17px}
.nav__theme .ic--moon{display:none}
:root[data-theme="light"] .nav__theme .ic--sun{display:none}
:root[data-theme="light"] .nav__theme .ic--moon{display:block}
.nav__toggle{display:none}

/* mobile menu */
.mm-scrim{position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity var(--t-med) var(--ease)}
.mm-scrim.open{opacity:1;pointer-events:auto}
.mobile-menu{position:fixed;inset:0 0 auto 0;z-index:99;background:var(--menu-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + var(--s-3)) var(--pad) var(--s-6);
  display:none;flex-direction:column;transform:translateY(-100%);pointer-events:none;
  transition:transform .4s var(--ease)}
.mobile-menu.open{transform:none;pointer-events:auto}
.mobile-menu a{padding:14px 4px;font-size:var(--t-lg);font-weight:500;color:var(--text-2);
  border-bottom:1px solid var(--line);transition:color var(--t-fast)}
.mobile-menu a:hover{color:var(--heading)}
.mobile-menu a:last-child{margin-top:var(--s-4);padding:13px 18px;border:none;
  border-radius:var(--r-md);background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:var(--t-md);text-align:center}

@media(max-width:920px){
  .nav__links{display:none}
  .nav__toggle{display:grid}
  .mobile-menu{display:flex}
  .nav .btn--primary{display:none}
}

/* scroll progress bar */
.progress{position:fixed;inset:0 auto auto 0;height:2px;width:100%;
  transform-origin:0 50%;transform:scaleX(0);z-index:120;background:var(--brand)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line);padding-block:var(--s-16) var(--s-8)}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s-10) var(--s-6)}
.foot-brand{max-width:34ch}
.foot-brand .brand{margin-bottom:var(--s-4)}
.foot-brand p{color:var(--text-2);font-size:var(--t-base);line-height:1.6}
.foot-col{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.foot-col h4{font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--head-2);font-family:var(--mono);margin-bottom:var(--s-1)}
.foot-col a{font-size:var(--t-base);color:var(--text-2);transition:color var(--t-fast)}
.foot-col a:hover{color:var(--heading)}
.foot-bot{margin-top:var(--s-12);padding-top:var(--s-6);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:space-between;
  align-items:center;color:var(--head-2);font-size:var(--t-sm)}
.foot-social{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.foot-social a{font-size:var(--t-sm);color:var(--text-2);transition:color var(--t-fast)}
.foot-social a:hover{color:var(--heading)}
@media(max-width:860px){
  .foot-top{grid-template-columns:1fr 1fr;gap:var(--s-8) var(--s-6)}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:480px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   MOTION — one calm, reversible reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.reveal--sm{transform:translateY(10px)}
.reveal--scale{transform:translateY(18px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}