/* Verbitir Design System — Colors & Typography
 * v1.0 — Locked palette + type system per brand_identity.md (2026-04-28)
 */

/* ──────────────────────────────────────────────────────────
 * FONTS
 * Inter — UI body / labels / numerals (use 'tnum' for tabular)
 * Pixelify Sans — wordmark + brand moments (pixel-art DNA)
 * ────────────────────────────────────────────────────────── */
/* Self-hosted 2026-08-18. Previously an @import from fonts.googleapis.com, which sent
 * every visitor IP to Google on first paint, before any consent interaction — a KVKK
 * cross-border transfer on the same site that hosts our Aydınlatma Metni.
 * Files are OFL-1.1; licence and copyright notices ship in /fonts/OFL.txt.
 * latin-ext is REQUIRED, not optional: ğ ş İ live there, ı is U+0131 in latin. */
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Pixelify Sans — latin-ext */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/pixelify-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Pixelify Sans — latin */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/pixelify-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ─────────── PRIMITIVE TOKENS ─────────── */

  /* Gold family — primary brand */
  --verbitir-gold:        #FFCB1F;
  --verbitir-gold-light:  #FFE873;
  --verbitir-gold-mid:    #F4B511;
  --verbitir-gold-deep:   #C68A0F;   /* AA-passing as text on white at 14px+ */

  /* Forest family — text + structure */
  --verbitir-forest:      #1A2E1A;   /* Body text default, mark outline */
  --verbitir-forest-soft: #3D5A3F;   /* Secondary text, hover */
  --verbitir-forest-mid:  #6B856E;   /* Tertiary, captions, dividers on dark */

  /* Surfaces */
  --verbitir-bg:          #FFFFFF;
  --verbitir-bg-cream:    #FFF9E8;   /* Warm alternate canvas */
  --verbitir-bg-elevated: #FFFFFF;   /* Cards on cream */
  --verbitir-line:        #E8E2D1;
  --verbitir-line-soft:   #F2EDDC;

  /* Status — warm-aligned, never neon */
  --verbitir-success:      #4A8A3F;
  --verbitir-success-fill: #E8F0E5;
  --verbitir-warning:      #B57610;
  --verbitir-warning-fill: #E89B0E;
  --verbitir-warning-soft: #FCEFD2;
  --verbitir-error:        #B84A2C;
  --verbitir-error-soft:   #F7E4DD;
  --verbitir-info:         #4A6B8A;
  --verbitir-info-soft:    #E1E8F0;

  /* ─────────── SEMANTIC ALIASES ─────────── */
  --bg:           var(--verbitir-bg);
  --bg-alt:       var(--verbitir-bg-cream);
  --bg-elevated:  var(--verbitir-bg-elevated);

  --fg:           var(--verbitir-forest);
  --fg-soft:      var(--verbitir-forest-soft);
  --fg-muted:     var(--verbitir-forest-mid);
  --fg-on-gold:   var(--verbitir-forest);  /* HARD RULE: forest text on gold */
  --fg-on-dark:   var(--verbitir-bg);
  --fg-gold:      var(--verbitir-gold-deep); /* gold-as-text uses deep variant */

  --accent:       var(--verbitir-gold);
  --accent-hover: var(--verbitir-gold-deep);
  --accent-soft:  var(--verbitir-gold-light);

  --line:         var(--verbitir-line);
  --line-soft:    var(--verbitir-line-soft);

  /* ─────────── TYPOGRAPHY ─────────── */
  --font-ui:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-pixel:  'Pixelify Sans', 'Inter', sans-serif;  /* Pixelify is the brand-moment / wordmark voice; Inter fallback */
  --font-mono:   ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Type scale */
  --fs-12: 12px;  /* tiny labels, legal */
  --fs-13: 13px;  /* helper, captions */
  --fs-14: 14px;  /* small body */
  --fs-15: 15px;  /* default body in dense UIs */
  --fs-16: 16px;  /* default body */
  --fs-18: 18px;  /* lead body */
  --fs-20: 20px;  /* h6 / card title */
  --fs-24: 24px;  /* h5 */
  --fs-28: 28px;  /* h4 */
  --fs-32: 32px;  /* h3 */
  --fs-36: 36px;  /* h2 */
  --fs-44: 44px;  /* h1 marketing */
  --fs-56: 56px;  /* hero */

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --tracking-pixel:  -0.01em;   /* tight on Pixelify */
  --tracking-normal: 0;
  --tracking-caps:   0.08em;    /* small letterspaced labels */

  /* ─────────── SPACING / RADII / SHADOWS ─────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;   /* default card radius */
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* Shadows — forest-tinted, never gray */
  --shadow-xs: 0 1px 2px rgba(26, 46, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 46, 26, 0.08), 0 1px 2px rgba(26, 46, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 46, 26, 0.08), 0 2px 4px rgba(26, 46, 26, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 46, 26, 0.10), 0 4px 8px rgba(26, 46, 26, 0.05);
  --shadow-gold-glow: 0 0 0 4px rgba(255, 203, 31, 0.25);

  /* Layout */
  --container-max: 1200px;
  --bp-mobile:  768px;
  --bp-tablet:  1024px;

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ─────────── MODAL LAYOUT TOKENS (Verbitir prototype, Rev E.2-B)
   * Project-scoped sizing for the S11/S12/S13/S14 modal pattern.
   * Restored after a Rev I edit accidentally elided this block.
   * Bound in site.css via `.vb-modal { padding: var(--modal-padding) }`,
   * `.vb-field { gap: var(--modal-label-input-gap) }`, etc.
   */
  --modal-padding:           32px;     /* outer card padding all sides */
  --modal-title-gap:         24px;     /* H3/sub-paragraph → first field */
  --modal-field-gap:         20px;     /* row → next row, vertical */
  --modal-grid-col-gap:      16px;     /* 2-col field row column gap */
  --modal-label-input-gap:    8px;     /* label → input vertical */
  --modal-input-padding:     12px 16px; /* input internal padding (height ~46px) */
  --modal-cta-gap:           28px;     /* last field → submit CTA */
  --modal-cta-footer-gap:    12px;     /* CTA → secondary button/footer text */

  /* ─────────── RESPONSIVE BREAKPOINTS (Rev I) ───────────
   * Mobile-first cascade. CSS uses @container vbframe (min-width: …)
   * against the frame's own width — so frames at different widths in the
   * design canvas render different layouts side-by-side. The Viewport
   * tweak sets --vb-frame-width on the active frame to scrub through.
   */
  --bp-mobile:        375px;   /* iPhone SE / standard iPhone */
  --bp-mobile-large:  414px;   /* iPhone Pro Max / Android XL */
  --bp-tablet:        768px;   /* iPad portrait — switch from hamburger to inline nav */
  --bp-tablet-large:  1024px;  /* iPad landscape / small laptop — full desktop nav */
  --bp-desktop:       1440px;  /* design target */

  /* ─────────── FLUID TYPE (Rev I9, units corrected Rev I.2) ───────────
   * clamp(min, cqw-preferred, max) so type scales between mobile and desktop
   * targets without media-query jumps. preferred uses cqw (container-query
   * width unit) so it tracks the FRAME's own inline-size set via
   * --vb-frame-width — not the browser viewport. Requires that the using
   * element sits inside a container (.vb-frame has container-type: inline-size).
   */
  --text-h1:        clamp(36px, 4.5cqw, 56px);
  --text-h2:        clamp(28px, 3.2cqw, 48px);
  --text-h3:        clamp(20px, 2cqw, 28px);
  --text-body-lg:   clamp(16px, 1.5cqw, 20px);
  --text-body:      clamp(14px, 1.15cqw, 16px);
  --text-caption:   clamp(12px, 1cqw, 14px);
}

  /* ─────────── MODAL LAYOUT TOKENS (Verbitir prototype, E.2-B) ───────────
   * Project-scoped sizing for the S11/S12/S13/S14 modal pattern. Lives
   * next to the design-system primitives so any future modal inherits
   * the same rhythm. Not part of the upstream design system; safe to
   * lift wholesale if/when the system absorbs a Modal component.
   */
  --modal-padding:           32px;     /* outer card padding all sides */
  --modal-title-gap:         24px;     /* H3/sub-paragraph → first field */
  --modal-field-gap:         20px;     /* row → next row, vertical */
  --modal-grid-col-gap:      16px;     /* 2-col field row column gap */
  --modal-label-input-gap:    8px;     /* label → input vertical */
  --modal-input-padding:     12px 16px; /* input internal padding (height ~46px) */
  --modal-cta-gap:           28px;     /* last field → submit CTA */
  --modal-cta-footer-gap:    12px;     /* CTA → secondary button/footer text */
}

/* ─────────── BASE ─────────── */
html { font-family: var(--font-ui); color: var(--fg); background: var(--bg); }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─────────── SEMANTIC TYPE ─────────── */
.h-hero, h1.hero {
  font-family: var(--font-ui);
  font-size: var(--fs-56);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg);
}
h1, .h1 {
  font-family: var(--font-ui);
  font-size: var(--fs-44);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}
h2, .h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-22, 22px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h5, .h5 {
  font-family: var(--font-ui);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.wordmark {
  font-family: var(--font-pixel);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-pixel);
  color: var(--fg);
}
.label-caps {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.body-lead { font-size: var(--fs-18); line-height: var(--lh-body); color: var(--fg); }
.body { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--fg); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-body); color: var(--fg-soft); }
.caption { font-size: var(--fs-13); line-height: 1.45; color: var(--fg-muted); }
.numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* RTL helpers */
[dir="rtl"] .flip-on-rtl { transform: scaleX(-1); }