/* ==========================================================================
   _tokens.css — design token layer 3, and the catalogue for layers 1 and 2
   ==========================================================================

   WHAT THIS FILE IS

   The reference emits an inline <style> block at the end of <body> on all 25
   pages. The six declarations in it exist in NO stylesheet anywhere in the
   reference — grep master.css / customV1.css / nuxt.css for `0758e9` and you
   get zero hits. Yet `--layoutcolor` is consumed 116 times and
   `--layoutcolor2` 25 times. Without this file the site loses its entire
   brand colour and every element that reads --aspectratio collapses.

   This file reproduces that block, and nothing else. It deliberately does NOT
   restate the :root blocks in master.css or customV1.css — those stay where
   they are, as the single source of truth for their own layer. Duplicating
   them here would create two definitions that silently diverge on the first
   edit, which is the exact failure a "single source" is meant to prevent.

   LOAD POSITION

   Last (tagPriority 9 in nuxt.config.ts), which is the same cascade position
   the inline <style> held in the reference — <head> links come before a
   late-<body> <style> in document order. Same order in, same values out.

   *** DO NOT ADD !important TO ANYTHING IN THIS FILE ***

   Two of the six declarations below are deliberately INERT. customV1.css wins
   them with !important on a custom property, which beats a normal declaration
   from any origin including this one:

     --borderstyle   customV1.css:21  16px !important   BEATS the 0 below
     --screen        customV1.css:26  1220px !important BEATS the 1300px below

   So the effective values are 16px and 1220px, and `.container` really is
   1220px wide — not the 1300px the reference's HTML appears to declare. Add
   !important here and every page shifts 40px per side while every rounded
   corner flattens to 0. This is intentional bug-for-bug fidelity with the
   reference; it is not a mistake waiting to be tidied up.
   ========================================================================== */

:root {
  --layoutcolor: #0758e9;   /* brand primary   — 116 consumers, declared ONLY here */
  --layoutcolor2: #101840;  /* brand secondary —  25 consumers, declared ONLY here */
  --LayoutCssClass: 1;      /* read by nothing (0 consumers); kept for fidelity */
  --borderstyle: 0;         /* INERT — loses to customV1.css:21 !important → 16px */
  --screen: 1300px;         /* INERT — loses to customV1.css:26 !important → 1220px */
  --aspectratio: 1/1;       /* 6 consumers, declared ONLY here */
}

/* ==========================================================================
   CATALOGUE — the other two layers, for reference only. No declarations below
   this line; everything here is a pointer to where the value actually lives.
   ==========================================================================

   LAYER 1 — master.css:104-112
     --hsize: 36px          control height (37 consumers)
     --brdcolor: #e6e6e6    default border
     --bgcolor: #fff
     --fontsize: 14px
     --gap: 8px             THE spacing atom — 591 consumers, the most-used
                            token in the project. Multiples are written as
                            calc(N * var(--gap)) with N in {0.5,1,1.5,2,3}.
     --zmax: 9999
     --mainprdcount: 4
     --stickytop: 68px

   LAYER 2 — customV1.css:3-35 (overrides --hsize → 40px, --fontsize → 20px)
     --fontsizev1..v15      18 26 53 35 14 65 136 19 23 48 32 16 22 42 96 px
     --borderstyle: 16px !important      THE radius token — 150 consumers
     --textcolorv1: #222    --textcolorv2: #7e8e9b
     --brdcolorv1: #bababa  --brdcolorv2: #cdcdcd
     --screen: 1220px !important
     --gradient             90deg rainbow, referenced exactly once
     --gradientv1: #f0f1f9  --bg: #f5f5f5
     --fontratio: 1         fluid-type multiplier; see the ladder below

   MEDIA-QUERY OVERRIDES — all left in their original files
     --gap        24px   @media (min-width:1101px)   customV1.css:1243
     --gap        16px   @media (max-width:1100px)   customV1.css:2108
     --hsize      40px   @media (max-width:1100px)   master.css:8345
     --fontratio  0.7 / 0.8 / 0.9 / 1.0 / 1.0 / 1.1 across six 100px bands
                  1101-1200 / 1201-1300 / 1301-1400 / 1401-1500 /
                  1501-1600 / 1601-1700          customV1.css:2522-2552
                  NOTE: no band covers <=1100px or >=1701px, so 375, 768 and
                  1920 all resolve to the base 1. Of the four gating
                  viewports only 1280 lands in a band (-> 0.8), which is why
                  1366 is probed as well.
     --prdcount   10-step ladder 768px -> 4001px, split between
                  .bs-narrowscreen-site and .bs-fullscreen-site
                                                   master.css:9999-10057

   NOT a :root override, despite appearances:
     --borderstyle 0     @media (min-width:1101px) on `.bs-banner-theme-v11`
                         ONLY                       customV1.css:1079-1081
                         A directly-matching declaration on the element beats
                         an inherited one regardless of the ancestor's
                         !important, which is why this works. Do not hoist it.

   WHAT THE SYSTEM ACTUALLY IS
     Two real tokens carry it: --gap (591 uses) and --borderstyle (150 uses).
     There is NO token for shadow, transition duration, or easing — 33
     distinct box-shadow values and 12 distinct durations are hard-coded
     across the vendor sheets. clamp()/min()/max() are never used; fluid type
     is faked with the --fontratio multiplier. Normalising any of this would
     change rendering, so none of it is normalised.
   ========================================================================== */

/* ==========================================================================
   "Modernist" layer — tokens for the home/chrome redesign ported from
   project/B2BStoreAnaSayfa.dc.html (a Claude Design prototype built on the
   "Modernist" design system in project/_ds/modernist-<hash>/styles.css).
   NOTE: never let an asterisk and a slash land back to back with nothing
   between them inside a comment in this file (a glob-style directory name
   is the easy way to do it by accident). CSS comments end at the first
   such pair wherever it appears, so that sequence silently truncates the
   comment and can swallow everything after it up to the next rule the
   parser can resync on. This is exactly the bug that once dropped this
   whole token block; it's called out here so it isn't reintroduced.

   Every `--m-*` token below is a DIRECT transcription of a literal value
   from that prototype — nothing here is invented. None of the six
   declarations above are touched, and none of these are read by the vendor
   sheets: `--gap` and `--borderstyle` are deliberately NOT reused (see the
   spacing/radius notes), so this layer cannot shift 1100px-breakpoint
   layout the way consuming --gap would.

   Consumers: app/components/common/SiteHeader.vue, SiteFooter.vue, and
   every app/components/home/*.vue. Component <style scoped> blocks must
   reference these variables rather than hard-coding the prototype's values
   again — see CLAUDE-facing plan for the full mapping table.
   ========================================================================== */

:root {
  /* — color — */
  --m-bg: #f5f8fd;
  --m-ink: #0b1b34;
  --m-accent: #1d4ed8;
  --m-rule: #dde5f3;
  --m-accent-tint: #e9f0ff;
  --m-accent-tint-border: #cfdeff;
  --m-accent-muted: #c8d7f2;
  --m-accent-on-dark: #7fa8ff;

  /* Ink-on-light text alphas — color-mix(in srgb, var(--m-ink) N%, transparent) */
  --m-ink-55: color-mix(in srgb, var(--m-ink) 55%, transparent);
  --m-ink-60: color-mix(in srgb, var(--m-ink) 60%, transparent);
  --m-ink-66: color-mix(in srgb, var(--m-ink) 66%, transparent);
  --m-ink-70: color-mix(in srgb, var(--m-ink) 70%, transparent);
  --m-ink-72: color-mix(in srgb, var(--m-ink) 72%, transparent);
  --m-ink-76: color-mix(in srgb, var(--m-ink) 76%, transparent);
  --m-ink-78: color-mix(in srgb, var(--m-ink) 78%, transparent);
  --m-ink-80: color-mix(in srgb, var(--m-ink) 80%, transparent);

  /* Bg-on-dark text/rule alphas — color-mix(in srgb, var(--m-bg) N%, transparent) */
  --m-onink-22: color-mix(in srgb, var(--m-bg) 22%, transparent);
  --m-onink-26: color-mix(in srgb, var(--m-bg) 26%, transparent);
  --m-onink-55: color-mix(in srgb, var(--m-bg) 55%, transparent);
  --m-onink-60: color-mix(in srgb, var(--m-bg) 60%, transparent);
  --m-onink-66: color-mix(in srgb, var(--m-bg) 66%, transparent);
  --m-onink-68: color-mix(in srgb, var(--m-bg) 68%, transparent);
  --m-onink-70: color-mix(in srgb, var(--m-bg) 70%, transparent);
  --m-onink-72: color-mix(in srgb, var(--m-bg) 72%, transparent);
  --m-onink-82: color-mix(in srgb, var(--m-bg) 82%, transparent);

  /* White card surface: no new token — use var(--bgcolor), master.css:107 (#fff). */

  /* — spacing atom scale (the prototype's own literal px values) — */
  --m-s-3: 3px;   --m-s-6: 6px;   --m-s-7: 7px;   --m-s-8: 8px;
  --m-s-9: 9px;   --m-s-10: 10px; --m-s-11: 11px; --m-s-12: 12px;
  --m-s-13: 13px; --m-s-14: 14px; --m-s-16: 16px; --m-s-18: 18px;
  --m-s-20: 20px; --m-s-22: 22px; --m-s-24: 24px; --m-s-26: 26px;
  --m-s-28: 28px; --m-s-30: 30px; --m-s-32: 32px; --m-s-34: 34px;
  --m-s-40: 40px; --m-s-42: 42px; --m-s-44: 44px; --m-s-48: 48px;
  --m-s-56: 56px; --m-s-64: 64px; --m-s-68: 68px;

  /* Layout scaffolding */
  --m-container: 1240px;
  --m-header-h: var(--stickytop); /* 68px, master.css:112 — same value, matched deliberately */
  --m-sticky-top: 96px;
  --m-hero-card-min-h: 430px;
  --m-chart-h: 150px;

  /* Section rhythm — fluid clamp()s, named by where they're used */
  --m-section-x: clamp(20px, 4vw, 48px);
  --m-section-y-hero-top: clamp(48px, 7vw, 96px);
  --m-section-y-lg: clamp(56px, 7vw, 96px);
  --m-section-y-md: clamp(48px, 6vw, 80px);
  --m-section-y-quote: clamp(56px, 7vw, 88px);
  --m-gap-hero: clamp(32px, 5vw, 72px);
  --m-gap-split: clamp(24px, 4vw, 64px);
  --m-gap-wide: clamp(28px, 4vw, 72px);
  --m-gap-demo: clamp(28px, 4vw, 64px);
  --m-gap-stat: clamp(20px, 3vw, 48px);

  /* One-off floating-badge offsets (hero card decorations) */
  --m-float-sync-right: -18px;
  --m-float-sync-bottom: -26px;
  --m-float-badge-left: -26px;
  --m-float-badge-top: -22px;

  /* — radius — */
  /* Deliberately none: the prototype's radius is 0 everywhere. No
     --m-radius-* token exists on purpose — do not add border-radius to any
     home/chrome component, and do not reach for --borderstyle (customV1.css
     :21, 16px !important) here. */

  /* — border — */
  --m-rule-w: 2px;
  --m-border: var(--m-rule-w) solid var(--m-rule);
  --m-border-ink: var(--m-rule-w) solid var(--m-ink);

  /* `.btn` from project/_ds/.../styles.css:114-136 — every prototype button
     is that class plus inline overrides for color/height/font-size only, so
     these structural values (border WIDTH, padding, gap) are the same on
     every button in the page and are never touched by the buttons' own
     inline styles. */
  --m-btn-border-w: 1px;
  --m-btn-pad-y: 8px;
  --m-btn-pad-x: 14.4px;   /* var(--space-3) * 1.2 in the source DS */
  --m-btn-ghost-pad-x: 4px; /* var(--space-1), .btn-ghost's padding-inline override */
  --m-btn-gap: 6px;

  /* — shadow — copied verbatim from project/_ds/.../styles.css:61-63 */
  --m-shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --m-shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --m-shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* — transition / animation duration & easing — */
  --m-dur-rise: .35s;
  --m-dur-revealx: .4s;
  --m-dur-panel-row: .45s;
  --m-dur-rise-panel: .5s;
  --m-dur-reveal: .8s;
  --m-dur-reveal-slow: 1s;
  --m-dur-bar: .9s;
  --m-dur-bar-long: 1.2s;
  --m-dur-sweep: 2.6s;
  --m-dur-marquee: 34s;
  --m-dur-count: 1100ms;
  --m-ease-reveal: cubic-bezier(.2, .7, .3, 1);
  --m-ease-bar: cubic-bezier(.2, .8, .3, 1);

  /* — typography — font-family intentionally excluded (project fonts stay:
     Mukta ≥1101px / Wix Madefor Display ≤1100px, customV1.css:1246,2224).
     Values below are size/weight/rhythm only, transcribed verbatim. */
  --m-fw-medium: 500;
  --m-fw-semibold: 600;
  --m-fw-bold: 700;
  --m-fw-black: 800;

  --m-fs-11: 11px;     --m-fs-11-5: 11.5px; --m-fs-12: 12px;   --m-fs-12-5: 12.5px;
  --m-fs-13: 13px;     --m-fs-13-5: 13.5px; --m-fs-14: 14px;   --m-fs-14-5: 14.5px;
  --m-fs-15: 15px;     --m-fs-15-5: 15.5px; --m-fs-16: 16px;   --m-fs-17: 17px;
  --m-fs-17-5: 17.5px; --m-fs-18: 18px;     --m-fs-19: 19px;   --m-fs-20: 20px;
  --m-fs-22: 22px;     --m-fs-24: 24px;     --m-fs-26: 26px;   --m-fs-30: 30px;

  /* Fluid font sizes — one token per distinct clamp(), named by usage */
  --m-fs-fluid-hero: clamp(40px, 5.6vw, 76px);       /* hero h1 */
  --m-fs-fluid-cta: clamp(32px, 4.6vw, 60px);        /* demo band h2 */
  --m-fs-fluid-stat: clamp(38px, 4.6vw, 62px);       /* feature-grid counters */
  --m-fs-fluid-h2-xl: clamp(30px, 3.8vw, 50px);      /* özellikler / sektörler h2 */
  --m-fs-fluid-h2-lg: clamp(30px, 3.6vw, 46px);      /* platform h2 */
  --m-fs-fluid-h2-md: clamp(28px, 3.4vw, 44px);      /* nasıl çalışır / entegrasyon / rollout h2 */
  --m-fs-fluid-h2-sm: clamp(28px, 3.2vw, 42px);      /* güven h2 */
  --m-fs-fluid-h2-xs: clamp(26px, 3vw, 38px);        /* sss h2 */
  --m-fs-fluid-quote: clamp(24px, 2.8vw, 36px);      /* pull-quote blockquote */

  /* Line-height — named by literal value (×100) */
  --m-lh-100: 1;    --m-lh-104: 1.04; --m-lh-105: 1.05; --m-lh-106: 1.06;
  --m-lh-108: 1.08; --m-lh-110: 1.1;  --m-lh-120: 1.2;  --m-lh-124: 1.24;
  --m-lh-160: 1.6;  --m-lh-162: 1.62; --m-lh-165: 1.65; --m-lh-170: 1.7;

  /* Letter-spacing — `n` prefix = negative */
  --m-ls-n40: -0.04em;  --m-ls-n35: -0.035em; --m-ls-n30: -0.03em;
  --m-ls-n25: -0.025em; --m-ls-n20: -0.02em;  --m-ls-n15: -0.015em;
  --m-ls-n10: -0.01em;
  --m-ls-2: 0.02em; --m-ls-4: 0.04em; --m-ls-6: 0.06em;
  --m-ls-8: 0.08em; --m-ls-10: 0.1em;
}

/* Anchor-nav smooth scroll — the prototype's `html { scroll-behavior:
   smooth }` (.dc.html:18). Global because SiteHeader's #platform/#ozellikler/
   #entegrasyon/#sektorler/#sss links now live on every page. Respects
   reduced-motion at the source rather than fighting it per animation. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
