/* ============================================================
   16:40 Dijital — Design Tokens
   Ink-on-paper palette, fluid type, print-inspired accents.
   ============================================================ */

:root {
  /* --- Color: core --- */
  --ink: #0e0e10;
  --ink-soft: #1a1a1e;
  --ink-mute: #4c4c52;
  --paper: #f4f1ec;
  --paper-soft: #eceae2;
  --paper-line: #ddd8ce;
  --white: #fffdf9;

  /* --- Color: signal accent (print green) --- */
  --accent: #00a651;
  --accent-deep: #007a3b;
  --accent-soft: rgba(0, 166, 81, 0.12);

  /* --- Color: CMYK micro-accents (graphic art only) --- */
  --cmyk-c: #00aeef;
  --cmyk-m: #ec008c;
  --cmyk-y: #ffd400;
  --cmyk-k: #0e0e10;

  /* --- Pillar accents --- */
  --pillar-etiket: #00a651;
  --pillar-tabela: #ffc53d;
  --pillar-matbaa: #00aeef;
  --pillar-promosyon: #ec008c;
  --pillar-dijital: #4f7cff;
  --pillar-grafik: #8b5cf6;

  /* --- Semantic (dark sections are default; .theme-paper flips) --- */
  --bg: var(--ink);
  --bg-raise: var(--ink-soft);
  --fg: var(--paper);
  --fg-mute: #a8a5a0;
  --line: rgba(244, 241, 236, 0.14);

  /* --- Typography --- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (min @360px, max @1440px) */
  --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm: clamp(0.84rem, 0.8rem + 0.18vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --text-md: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --text-lg: clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --text-xl: clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --text-2xl: clamp(2.6rem, 1.9rem + 3.6vw, 5.2rem);
  --text-hero: clamp(3.4rem, 2rem + 7.5vw, 9rem);
  --text-mega: clamp(4.2rem, 2.4rem + 11vw, 13rem);

  /* --- Spacing (8px base) --- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;
  --s-section: clamp(5rem, 4rem + 6vw, 10rem);

  /* --- Layout --- */
  --container: 84rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 4px;
  --radius-lg: 12px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur: 0.6s;
  --dur-slow: 1.1s;

  /* --- Z layers --- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-transition: 300;
}

/* Paper (light) theme for alternating sections/pages */
.theme-paper {
  --bg: var(--paper);
  --bg-raise: var(--white);
  --fg: var(--ink);
  --fg-mute: var(--ink-mute);
  --line: rgba(14, 14, 16, 0.14);
}