/* ============================================
   tokens.css — sirkaSigma-main (site `sirkaSigma` foundation)
   Mobile DRAWN at 390 (anchor); desktop INVENTED at --vw-base 1440 (mobile-only-mode.md).
   Mobile-first: :root = mobile, then 768–1023 pseudo-tablet, then 1024+ desktop.
   TYPE desktop floors = max(round(D-base*1024/1440), T-1023) — brief-page BA-INV-P1 (D6).
   Spacing/layout keep the standard D-min (header-h: BA-HDR-2).
============================================ */
:root {
  --vw-base: 1440px; /* INVENTED */
  --max-vw: min(100vw, calc(1920px + calc((1920px - var(--vw-base)) * 0.015)));

  /* Colors — brief-page §4.4 */
  --color-ink: #232323;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-ink-08: rgba(35, 35, 35, 0.08);    /* light-hero header rule (Performance 4:413) */
  --color-primary: var(--color-ink);
  --color-text: var(--color-ink);
  --color-bg: var(--color-white);

  /* Typography — BA-F1 */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Line-height (unitless) + letter-spacing (em) — brief-page §4.2 */
  --lh-display-hero: 0.95;
  --lh-cta-display: 0.88;
  --lh-h2: 0.88;
  --lh-h3: 0.88;
  --lh-label-display: 0.88;
  --lh-lead: 1.35;
  --lh-title-m: 1.2;
  --lh-body-s-medium: 1.2;
  --lh-body-s-semibold: 1.19;
  --lh-legal: 1.275;
  --ls-display: -0.04em;   /* display-hero, cta-display, h2, h3, label-display */
  --ls-body: -0.03em;      /* lead, title-m, body-s-medium, legal */
  --ls-body-s-semibold: -0.05em;

  /* Borders */
  --border-header: 1.5px solid var(--color-white-08);
  --border-row: 1px solid var(--color-ink);

  /* Z-index */
  --z-header: 2;

  /* FONT SCALE — MOBILE (anchor 390): clamp(M-min, M-base + (vw-390)*0.015, M-max) */
  --text-display-hero:    clamp(46px, calc(56px + (var(--max-vw) - 390px) * 0.015), 90px);
  --text-cta-display:     clamp(46px, calc(56px + (var(--max-vw) - 390px) * 0.015), 56px);
  --text-h2:              clamp(39px, calc(48px + (var(--max-vw) - 390px) * 0.015), 77px);
  --text-h3:              clamp(23px, calc(28px + (var(--max-vw) - 390px) * 0.015), 42px);
  --text-label-display:   clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 26px);
  --text-lead:            clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 26px);
  --text-title-m:         clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 18px);
  --text-body-s-medium:   clamp(11px, calc(14px + (var(--max-vw) - 390px) * 0.015), 14px);
  --text-body-s-semibold: clamp(11px, calc(14px + (var(--max-vw) - 390px) * 0.015), 14px);
  --text-legal:           clamp(11px, calc(13px + (var(--max-vw) - 390px) * 0.015), 13px);
  --text-body: var(--text-body-s-medium);

  /* LAYOUT — header bar height (header slice, consumed by the hero bg offset) */
  --header-h: clamp(53px, calc(64px + (var(--max-vw) - 390px) * 0.015), 80px);   /* 64 @390 */
}

/* PSEUDO-TABLET 768–1023 (no tablet layer): clamp(M-767, M-767 + (vw-768)*0.025, M-max) — FD-184 */
@media (min-width: 768px) {
  :root {
    --text-display-hero:    clamp(61.66px, calc(61.66px + (var(--max-vw) - 768px) * 0.025), 90px);
    --text-cta-display:     56px;
    --text-h2:              clamp(53.66px, calc(53.66px + (var(--max-vw) - 768px) * 0.025), 77px);
    --text-h3:              clamp(33.66px, calc(33.66px + (var(--max-vw) - 768px) * 0.025), 42px);
    --text-label-display:   clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 26px);
    --text-lead:            clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 26px);
    --text-title-m:         18px;
    --text-body-s-medium:   14px;
    --text-body-s-semibold: 14px;
    --text-legal:           13px;

    --header-h: clamp(69.66px, calc(69.66px + (var(--max-vw) - 768px) * 0.025), 80px);   /* 76.03 @1023 */
  }
}

/* DESKTOP 1024+ (INVENTED D-base at --vw-base 1440): clamp(D-min(D6), D-base * vw/1440, D-max) */
@media (min-width: 1024px) {
  :root {
    --text-display-hero:    clamp(68.03px, calc(90px * (var(--max-vw) / var(--vw-base))), 120px);
    --text-cta-display:     56px; /* held — label inside a 48px control (brief-page §4.2 note) */
    --text-h2:              clamp(60.03px, calc(77px * (var(--max-vw) / var(--vw-base))), 103px);
    --text-h3:              clamp(40.03px, calc(42px * (var(--max-vw) / var(--vw-base))), 56px);
    --text-label-display:   clamp(26px, calc(26px * (var(--max-vw) / var(--vw-base))), 35px);
    --text-lead:            clamp(26px, calc(26px * (var(--max-vw) / var(--vw-base))), 35px);
    --text-title-m:         clamp(18px, calc(18px * (var(--max-vw) / var(--vw-base))), 24px);
    --text-body-s-medium:   clamp(14px, calc(14px * (var(--max-vw) / var(--vw-base))), 19px);
    --text-body-s-semibold: clamp(14px, calc(14px * (var(--max-vw) / var(--vw-base))), 19px);
    --text-legal:           clamp(13px, calc(13px * (var(--max-vw) / var(--vw-base))), 17px);

    --header-h: clamp(76.03px, calc(80px * (var(--max-vw) / var(--vw-base))), 107px);   /* 80 @1440 */
  }
}

/* ============================================
   NEW — site sirkaSigma (added by sirkaSigma-services, brief-page §4.2–§4.4).
   Existing tokens above are the site's — untouched.
============================================ */
:root {
  --font-serif: "Oranienbaum", "Times New Roman", Georgia, serif;

  --color-ink-80: rgba(35, 35, 35, 0.8);
  --color-img-placeholder: #D9D9D9;

  --lh-display-serif: 0.8;
  --lh-h2-serif: 0.8;
  --lh-title-display: 1.15;
  --lh-card-title: 1.1;
  --lh-cta-display-s: 0.88;
  --lh-number: 1;
  --lh-link-label: 1.275;
  --lh-body-m-medium: 1.2;
  --ls-card-title: 0em;

  --z-sticky-cta: 3;
  --cta-s-h: 36px;   /* contact CTAs: 36 DRAWN at 0–1023 */

  --text-display-serif:  clamp(69px, calc(84px + (var(--max-vw) - 390px) * 0.015), 134px);
  --text-h2-serif:       clamp(46px, calc(56px + (var(--max-vw) - 390px) * 0.015), 90px);
  --text-title-display:  clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 48px);
  --text-card-title:     clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 48px);
  --text-cta-display-s:  clamp(36px, calc(44px + (var(--max-vw) - 390px) * 0.015), 44px);
  --text-number:         clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 18px);
  --text-link-label:     clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 18px);
  --text-body-m-medium:  clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 18px);
}

@media (min-width: 768px) {
  :root {
    --text-display-serif:  clamp(89.66px, calc(89.66px + (var(--max-vw) - 768px) * 0.025), 134px);
    --text-h2-serif:       clamp(61.66px, calc(61.66px + (var(--max-vw) - 768px) * 0.025), 90px);
    --text-title-display:  clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 48px);
    --text-card-title:     clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 48px);
    --text-cta-display-s:  44px;
    --text-number:         18px;
    --text-link-label:     18px;
    --text-body-m-medium:  18px;
  }
}

@media (min-width: 1024px) {
  :root {
    --cta-s-h: 48px;   /* INVENTED — control height ≥ 48 on desktop (mobile-only-mode §3) */

    --text-display-serif:  clamp(96.03px, calc(134px * (var(--max-vw) / var(--vw-base))), 179px);
    --text-h2-serif:       clamp(68.03px, calc(90px * (var(--max-vw) / var(--vw-base))), 120px);
    --text-title-display:  clamp(44.03px, calc(48px * (var(--max-vw) / var(--vw-base))), 64px);
    --text-card-title:     clamp(44.03px, calc(48px * (var(--max-vw) / var(--vw-base))), 64px);
    --text-cta-display-s:  44px;  /* held — label inside a 36/48 control */
    --text-number:         clamp(18px, calc(18px * (var(--max-vw) / var(--vw-base))), 24px);
    --text-link-label:     clamp(18px, calc(18px * (var(--max-vw) / var(--vw-base))), 24px);
    --text-body-m-medium:  clamp(18px, calc(18px * (var(--max-vw) / var(--vw-base))), 24px);
  }
}