/* AKIPIA design system — tokens.
   Source: Figma prj_akipia_int › 🎛️ Design systém (36:3112): Atoms › Colours, Typography Desktop / Mobile, Grid.
   Every component and page in styles.css / responsive.css reads these variables; nothing else hardcodes the scale.
   Breakpoints: mobile < 768 · tablet 768–1023 (mobile layout, wider margin) · desktop ≥ 1024 (12-col grid, 1440 = design). */

/* ES Klarheit Grotesk — WOFF2 only (Regular converted from the original OTF, the rest supplied by the client 31/10) */
@font-face{font-family:"Klarheit";src:url(fonts/ESKlarheitGrotesk-Rg.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Klarheit";src:url(fonts/ESKlarheitGrotesk-It.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Klarheit";src:url(fonts/ESKlarheitGrotesk-Md.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Klarheit";src:url(fonts/ESKlarheitGrotesk-MdIt.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Klarheit";src:url(fonts/ESKlarheitGrotesk-Bd.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Klarheit";src:url(fonts/ESKlarheitGrotesk-BdIt.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
/* Metric-matched fallback (Arial scaled to Klarheit Regular) — no layout shift when the webfont swaps in */
@font-face{font-family:"Klarheit Fallback";src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:107.96%;ascent-override:88%;descent-override:20.38%;line-gap-override:0%}
/* Display/Number, Text/Quote and the 404 digits are "Extralight" (200) in Figma — that cut is still missing, the browser
   uses Regular until ESKlarheitGrotesk-XLt.woff2 is added to fonts/ and this line is uncommented:
@font-face{font-family:"Klarheit";src:url(fonts/ESKlarheitGrotesk-XLt.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap} */

:root{
  /* ---------- colour (Atoms › Colours) ---------- */
  --walnut:#2D231E; --walnut80:#554D48; --walnut70:#69625D; --walnut60:#7D7772; --walnut40:#A5A19C; --walnut20:#CDCBC6; --walnut10:#E1E0DB;
  --ivory:#F5F5F0; --ivory80:rgba(245,245,240,.8); --ivory70:rgba(245,245,240,.7); --ivory60:rgba(245,245,240,.6);
  --ivory40:rgba(245,245,240,.4); --ivory20:rgba(245,245,240,.2); --ivory10:rgba(245,245,240,.1);
  --taupe:#D2CDC3; --taupe80:#D9D5CC; --taupe70:#DCD9D0; --taupe60:#E0DDD5; --taupe40:#E7E5DE; --taupe20:#EEEDE7; --taupe10:#F1F1EB;
  --clay:#9B645A; --clay80:#AD8178; --clay70:#B68F87; --clay60:#BF9E96; --clay40:#D1BBB4; --clay20:#E3D8D2; --clay10:#ECE6E1; --clayHover:#87554C;
  --white:#FFFFFF;
  /* surfaces */
  --glass:rgba(45,35,30,.88); --glass-card:rgba(45,35,30,.6);

  /* ---------- typography (Typography Desktop) — size / line-height / tracking ---------- */
  --font:"Klarheit","Klarheit Fallback","Helvetica Neue",Arial,sans-serif;
  --t-display:136px; --l-display:136px; --k-display:-.035em;      /* Display/Hero */
  --t-number:72px;   --l-number:72px;   --k-number:-.02em;       /* Display/Number (Extralight) */
  --t-h1:80px;  --l-h1:84px;  --k-h1:-.03em;                      /* H1 Page title */
  --t-h2:56px;  --l-h2:60px;  --k-h2:-.02em;                      /* H2 Section title */
  --t-h3:40px;  --l-h3:46px;  --k-h3:-.015em;                       /* H3 Block title */
  --t-h4:28px;  --l-h4:36px;  --k-h4:-.01em;                       /* H4 Card title */
  --t-fname:32px; --l-fname:38px; --k-fname:-.01em;                 /* H4 Founder name (Founding investors, all three equal) */
  --t-h5:20px;  --l-h5:26px; --k-h5:-.005em;                                /* H5 Name (Medium) */
  --t-h6:16px;  --l-h6:22px;                                      /* H6 Small title (Medium) */
  --t-lead:24px; --l-lead:34px; --k-lead:-.005em;                            /* Text/Lead */
  --t-body-l:18px; --l-body-l:28px;                               /* Text/Body L */
  --t-body:16px; --l-body:24px;                                   /* Text/Body */
  --t-body-s:14px; --l-body-s:22px;                               /* Text/Body S */
  --t-quote:44px; --l-quote:52px; --k-quote:-.01em;                            /* Text/Quote (Extralight) */
  --t-label:12px; --l-label:14px; --k-label:.06em;                /* Meta/Label (Medium, caps) */
  --t-meta:14px; --l-meta:20px;                                   /* Meta/Meta */
  --t-caption:12px; --l-caption:16px;                             /* Meta/Caption */
  --t-btn:16px; --t-btn-s:14px;                                   /* UI/Button, Button S */
  --t-link:16px; --l-link:22px;                                   /* UI/Link */
  --t-nav:16px;                                                   /* UI/Nav (Medium) */

  /* ---------- grid (Atoms › Grid) ---------- */
  --cols:12; --gutter:24px; --maxw:1320px;
  --gut:max(60px, calc((100vw - var(--maxw)) / 2));               /* side margin: 60 px, grows beyond 1440 */
  --cw:min(var(--maxw), calc(100vw - 2 * var(--gut)));             /* content width */
  --col:calc((var(--cw) - 11 * var(--gutter)) / 12);               /* one column (88 px at 1440) */
  --c3:calc(3 * var(--col) + 2 * var(--gutter));                   /* 312 */
  --c4:calc(4 * var(--col) + 3 * var(--gutter));                   /* 424 */
  --c5:calc(5 * var(--col) + 4 * var(--gutter));                   /* 536 */
  --c6:calc(6 * var(--col) + 5 * var(--gutter));                   /* 648 */
  --c7:calc(7 * var(--col) + 6 * var(--gutter));                   /* 760 */
  --c9:calc(9 * var(--col) + 8 * var(--gutter));                   /* 1088 */
  --c11:calc(11 * var(--col) + 10 * var(--gutter));                /* 1208 */

  /* ---------- spacing ---------- */
  --sec-y:140px;          /* section padding */
  --head-gap:64px;        /* heading → content */
  --btn-h:52px; --btn-tile:40px;
}

/* ---------- tablet + mobile (Typography Mobile, Grid Mobile 390: 4 cols · gutter 16 · margin 20) ---------- */
@media (max-width:1023px){
  :root{
    --t-display:52px; --l-display:52px; --k-display:-.02em;
    --t-number:48px;  --l-number:48px;
    --t-h1:44px; --l-h1:46px; --k-h1:-.02em;
    --t-h2:36px; --l-h2:40px; --k-h2:-.015em;
    --t-h3:28px; --l-h3:34px; --k-h3:-.01em;
    --t-h4:24px; --l-h4:30px; --k-h4:-.01em;
    --t-fname:28px; --l-fname:34px;
    --t-h5:18px; --l-h5:24px;
    --t-lead:20px; --l-lead:28px;
    --t-quote:30px; --l-quote:38px;
    --cols:4; --gutter:16px;
    --gut:20px; --cw:calc(100vw - 2 * var(--gut));
    --sec-y:80px; --head-gap:40px;
    --btn-h:48px; --btn-tile:36px;
  }
}
/* ---------- tablet 768–1023 (BF-321): type between Mobile and Desktop, more air ---------- */
@media (min-width:768px) and (max-width:1023px){
  :root{
    --gut:40px;
    --t-display:80px; --l-display:80px; --k-display:-.03em;
    --t-h1:56px; --l-h1:60px; --k-h1:-.025em;
    --t-h2:44px; --l-h2:48px; --k-h2:-.02em;
    --t-h3:32px; --l-h3:38px; --k-h3:-.015em;
    --t-quote:34px; --l-quote:42px;
    --sec-y:104px; --head-gap:48px;
  }
}