/* Kuzucuklar design tokens — the single source of every colour, type size, space, radius, shadow and easing.
   Components only reference these variables. The night theme (body.night) and the breakpoints
   below redefine tokens here, so components need no per-theme colour rules.

   Breakpoints: tablet ≤1000px · narrow-desktop ≤1100px · mobile ≤700px · small phone ≤360px */

:root {
  /* ── Typography ───────────────────────────────────────────── */
  --font-sans: 'Kuzucuklar Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  --weight-bold: 800;
  --weight-semibold: 700;

  /* Size scale (px). Lower numbers are smaller. */
  --text-25: 6px;
  --text-50: 8px;
  --text-75: 9px;
  --text-100: 10px;
  --text-150: 11px;
  --text-200: 12px;
  --text-250: 13px;
  --text-300: 14px;
  --text-350: 15px;
  --text-400: 17px;
  --text-500: 20px;
  --text-550: 22px;
  --text-600: 23px;
  --text-700: 30px;

  /* Roles: headings and the hero lead adapt per breakpoint. */
  --text-display: clamp(45px, 4.3vw, 66px);
  --text-h2: 42px;
  --text-h2-lg: 47px;
  --text-h3: var(--text-600);
  --text-lead: var(--text-400);
  --text-body: var(--text-350);

  --leading-display: 1.13;
  --leading-heading: 1.15;
  --leading-body: 1.8;
  --leading-snug: 1.6;
  --tracking-display: -.035em;
  --tracking-heading: -.025em;
  --tracking-eyebrow: .07em;
  --tracking-label: .12em;

  /* ── Layout & spacing ─────────────────────────────────────── */
  --content: 1200px;
  --gutter: 62px;
  --section-space: 80px;
  --header-height: 110px;
  --page-top: 14px; /* gap between the header and the first content on every page */

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-pill: 99px;
  --radius-button: 40px;
  --radius-panel: 36px;
  --radius-card: 30px;
  --radius-box: 25px;
  --radius-scene: 22px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-story: cubic-bezier(.45, .05, .25, 1);
  --theme-fade: 2s;

  /* ── Core colours ─────────────────────────────────────────── */
  --color-bg: #faf8f5;
  --color-ink: #3d3e78; /* logo dark purple, DESIGN.md primary */
  --color-muted: #5e607b;
  --color-accent: #6957b5;
  --color-line: #ddd9e7;
  --color-surface: #fffdfa;
  --color-soft: #eee8fa;
  --color-white: #fff;
  --heading-em: #7965b3;

  --page-bg: radial-gradient(ellipse at 0 45%, #ece6f96b, transparent 33%), radial-gradient(ellipse at 100% 70%, #e7eff77d, transparent 32%), var(--color-bg);

  /* Frosted glass for small decorative controls */
  --glass-fill: linear-gradient(125deg, #ffffffc9, #fff8fc86 45%, #e7edff8c);
  --glass-edge: #ffffffdb;
  --glass-shadow: 0 12px 36px #65608b14, inset 0 1px 1px #ffffffed, inset 0 -1px 1px #b4b5cf24;
  --glass-solid: #f8f4fc;
  --glass-hover-shadow: 0 6px 15px #65608b24, inset 0 1px 1px #fff;
  --glass-blur: blur(6px) saturate(135%);

  /* Primary button */
  --btn-fill: linear-gradient(135deg, #7665c3, #6753ac 75%); /* light end keeps white text ≥ 4.5:1 */
  --btn-text: #fff;
  --btn-edge: #ffffff66;
  --btn-highlight: #ffffff80;
  --btn-shadow: inset 0 1px 1px #ffffff80, inset 0 -2px 3px #44317220, 0 8px 20px #6b57a62b;
  --btn-shadow-hover: inset 0 1px 1px #ffffff80, 0 12px 25px #6b57a639;
  --btn-glow: #9a85dc40;

  /* Day / night toggle */
  --toggle-text: #5b6082;
  --toggle-knob: linear-gradient(145deg, #fff, #fff7e5);
  --toggle-knob-shadow: 0 2px 6px #5a527526, inset 0 0 0 1px #fff;

  /* Sky */
  --sky-bg: radial-gradient(ellipse at 76% 31%, #bfcff178, transparent 36%), radial-gradient(ellipse at 95% 6%, #ead2ea9c, transparent 40%), radial-gradient(ellipse at 38% 18%, #fff8e9e8, transparent 36%), radial-gradient(ellipse at 10% 20%, #d1e8f4a3, transparent 37%), linear-gradient(180deg, #f1edf6, #f6f1ed 70%, var(--color-bg));
  --cloud: #fffdf9;
  --cloud-shadow: #bfc8d210;
  --cloud-opacity: .85;
  --moon: #f7eed1;
  --star: #fff2ce;
  --shooting-star: #fff6d3;
  --shoot-trigger: #f8e9bb;
  --sun: #ffe39a;
  --sun-glow: #fff0b8;

  /* Printed-paper surfaces keep the same colours in both themes */
  --text-book: clamp(16px, 3.8cqw, 20px);
  --text-book-compact: clamp(16px, 3.4cqw, 18px);
  --reader-copy-fill: #fff9edf2;
  --reader-number-fill: #fff9eddf;
  --paper: #fffdf7;
  --paper-ink: #3d3e78;
  --paper-muted: #6e6b7e;
  --paper-fold: #766c60;
  --spread-shadow: 0 20px 55px #68608020, 0 2px 7px #6860800d;

  /* "How it works" icons */
  --step-1-fill: linear-gradient(135deg, #ffffffd9, #d9cdf3a6);
  --step-1-ink: #7661b1;
  --step-2-fill: linear-gradient(135deg, #fffcf5e8, #f1cddfa1);
  --step-2-ink: #9a5976;
  --step-3-fill: linear-gradient(135deg, #fffdf4ed, #cde5f0bd);
  --step-3-ink: #507782;

  /* Theme cards */
  --card-edge: #fff;
  --card-shadow: 0 10px 35px #7165880b;
  --card-shadow-hover: 0 18px 35px #71658818;
  --scene-family: #dfe9de;
  --scene-label-bg: #fff9f2e6;
  --scene-label-edge: #ffffffad;
  --scene-winter: radial-gradient(ellipse at 50% 20%, #68658a, #353f63 75%);
  --scene-winter-ink: #f3eedc;
  --scene-snow: #e7d4a3;
  --scene-sharing: radial-gradient(ellipse at 26% 15%, #fff1ec, #eddae7 65%, #dce4f1);
  --scene-sharing-ink: #70596c;
  --scene-heart: #a06180;

  /* Trust panel */
  --panel: #f0edf7;
  --mascot-fill: linear-gradient(135deg, #ffffffb8, #cbddef73 50%, #f3d7e478);
  --mascot-edge: #ffffffc4;
  --mascot-shadow: inset 0 3px 15px #ffffff9c, 0 16px 35px #9286a71a;
  --check-fill: #fffafc;
  --check-ink: #756498;

  /* Closing glow, footer, dialog */
  --closing-glow: radial-gradient(ellipse at 28% 65%, #d9e7f380, transparent 49%), radial-gradient(ellipse at 70% 45%, #eddaef85, transparent 50%), radial-gradient(ellipse at 50% 80%, #fff0de91, transparent 55%);
  --closing-glow-opacity: 1;
  --footer-line: #ded9e77d;
  --dialog-shadow: 0 20px 80px #1e23502a;
  --dialog-backdrop: #1e235066;

  /* ── Hero story illustration ──────────────────────────────── */
  --stage-glow-edge: #ffffffb8;
  --stage-glow-fill: radial-gradient(ellipse at 26% 18%, #ffffffd0, transparent 26%), radial-gradient(ellipse at 81% 77%, #fff0cb80, transparent 40%), radial-gradient(ellipse at 13% 64%, #a9d6ef55, transparent 42%), linear-gradient(135deg, #f8f6ff70, #e3d8ee33 45%, #d4e3f350 65%, #fff7ea80);
  --stage-glow-shadow: inset 8px 8px 22px #ffffff90, inset -6px -9px 22px #c1b7da38, 0 25px 70px #8b8bbd14;
  --story-line: #9b8bc9;
  --photo-frame: #fffdfa;
  --photo-shadow: 0 1.2cqw 3cqw #5a52751f, 0 .2cqw .5cqw #5a527514;
  --photo-placeholder: linear-gradient(160deg, #e4e6ec, #bcc3d0);
  --toon-shadow: #5a527522;
  --toon-halo: radial-gradient(circle, #fff6dccc, #f3e8ff66 45%, transparent 70%);
  --book-shadow: #4e426426;
  --page-edge-left: #eee7da;
  --page-edge-right: #efe8db;
  --text-line: #ddd5e8;
  --text-line-title: #b6a6dd;
  --page-number: #a8a1bd;
  --art-day: linear-gradient(#d7ebf4, #f3f0e4);
  --art-dusk: linear-gradient(#f5d6df, #fbeedd);
  --art-night: linear-gradient(#58608e, #9a92bf);
  --art-sun-dusk: #ffc9a3;
  --art-moon: #fff4d6;
  --art-moon-glow: #fff4d6aa;
  --hill-near: #bfdcb6;
  --hill-far: #a9d0a6;
  --hill-near-night: #7f9a98;
  --hill-far-night: #6f8c8e;
  --tree: #94c39c;
  --tree-night: #6f9a85;
  --trunk: #9a7b67;
  --cover-fill: radial-gradient(ellipse at 30% 15%, #ffffff40, transparent 45%), linear-gradient(160deg, #b4a3e6, #8673cc);
  --cover-spine: #4e3f8a40;
  --cover-lining: linear-gradient(270deg, #f6f1ea, #ece4f4);
  --cover-faces-light: #ffffff55;
  --cover-face-edge: #ffffffd0;
  --cover-face-bg: #f6efe6;
  --cover-face-shadow: #4e3f8a30;
  --copy-shadow: #4e426430;
  --parcel: linear-gradient(180deg, #f6dccd, #efcdbd);
  --parcel-lid: linear-gradient(180deg, #f7e1d4, #ecc8b7);
  --parcel-shadow: #8a6a6a22;
  --parcel-lid-shadow: #8a6a6a1c;
  --ribbon: #b9a6e8;
  --ribbon-lid: #a998e0;
  --roof: #c8b8ec;
  --wall: #fbf4ea;
  --wall-shadow: #6b5e8a1c;
  --door: #9fc3dc;
  --house-heart: #d78aa9;
  --route: #b4a6d8;
  --phone-body: linear-gradient(150deg, #4a4c70, #2f3152);
  --phone-shadow: 0 1.6cqw 3cqw #2f315233, inset 0 0 0 .25cqw #ffffff22;
  --phone-screen: linear-gradient(180deg, #f3eefb, #fdf8f2);
  --phone-notch: #2f3152;
  --play-edge: #ffffffb0;
  --play-shadow: #6b57a633;
  --play-glow: #9a85dc66;
  --wave: #a596d6;
  --wave-alt: #c3a7d8;
  --wave-playing: #7d69c4;
  --wave-playing-alt: #b88bc9;
  --sample-tag: #7a7898;

  /* ── Order wizard ─────────────────────────────────────────── */
  --order-card-fill: #fffdfaeb;
  --order-card-edge: #ffffffe6;
  --order-card-shadow: 0 14px 40px #65608b14;
  --order-drop-edge: #b9acd9;
  --order-drop-fill: #f6f2fdb3;
  --order-avatar-ring: #fff;
  --order-avatar-shadow: 0 6px 16px #5a527526;
  --order-step-done: #b9acd9;
  --order-error: #a8456a;
  /* Placeholder art for drawing styles that have no sample illustration yet */
  --style-pencil-art: repeating-linear-gradient(-35deg, #f6e9d988 0 6px, #fff8ef 6px 13px), linear-gradient(160deg, #fdf3e4, #f1e2f0);
  --style-paper-art: radial-gradient(circle at 30% 70%, #cfe3d4 0 22%, transparent 23%), radial-gradient(circle at 72% 64%, #f3d3de 0 26%, transparent 27%), linear-gradient(170deg, #e4eef8, #fbf1e6);
  --style-art-ink: #6e6b7e;
  /* Sticky header fade, shown after scrolling */
  --header-fade: linear-gradient(180deg, #fffdfaf5 0%, #fffdfad9 55%, #fffdfa00 100%);

  /* Sign-in buttons: Google and Apple brand button colours */
  --google-btn-bg: #fff;
  --google-btn-text: #1f1f1f;
  --google-btn-edge: #747775;
  --apple-btn-bg: #000;
  --apple-btn-text: #fff;
  --apple-btn-edge: #000;
}

body.night {
  --color-bg: #252841;
  --color-ink: #f5efea;
  --color-muted: #d0ccde;
  --color-accent: #c9b9f4;
  --color-line: #50516b;
  --color-surface: #30334e;
  --color-soft: #424362;
  --heading-em: #cbbbf2;

  --page-bg: radial-gradient(ellipse at 0 45%, #45406445, transparent 33%), radial-gradient(ellipse at 100% 70%, #3d50634d, transparent 32%), var(--color-bg);

  --glass-fill: linear-gradient(125deg, #62637b66, #49455f5c 45%, #404b6959);
  --glass-edge: #d8d4f052;
  --glass-shadow: 0 12px 36px #11152c26, inset 0 1px 1px #e0dfff42, inset 0 -1px 1px #b4b5cf20;
  --glass-solid: #44445f;

  --btn-fill: linear-gradient(135deg, #d9c9f3, #bfb7e9);
  --btn-text: #302747;
  --btn-edge: #eee7ff99;
  --btn-shadow: inset 0 1px 1px #fff9, 0 8px 24px #14152e2b;
  --btn-shadow-hover: var(--btn-shadow);
  --btn-glow: #c9b9f440;

  --toggle-text: #eee9f7;
  --toggle-knob: linear-gradient(135deg, #8c88aa, #5b5c80);
  --toggle-knob-shadow: inset 0 1px 1px #fff5, 0 2px 6px #15172f40;

  --sky-bg: radial-gradient(ellipse at 78% 31%, #79769d5e, transparent 37%), radial-gradient(ellipse at 15% 10%, #4b637966, transparent 45%), radial-gradient(ellipse at 50% 20%, #6b526450, transparent 40%), linear-gradient(#30334f, #35334e 65%, var(--color-bg));
  --cloud-opacity: .14;

  --card-edge: #d4d2e526;

  --panel: #30334e;
  --mascot-fill: linear-gradient(135deg, #bbb0d033, #86a8c529, #d2a5c321);
  --mascot-edge: #dad5eb47;
  --mascot-shadow: inset 0 3px 15px #ffffff17, 0 16px 35px #14162e1a;
  --check-fill: #49465f;
  --check-ink: #e0d0ff;

  --closing-glow-opacity: .16;

  --stage-glow-edge: #e2dbff40;
  --stage-glow-fill: radial-gradient(ellipse at 26% 18%, #dcd8ff30, transparent 26%), radial-gradient(ellipse at 81% 77%, #e7b8c322, transparent 40%), radial-gradient(ellipse at 13% 64%, #98c4f226, transparent 42%), linear-gradient(135deg, #ada2cd1a, #70669120 50%, #b1bded1c);
  --stage-glow-shadow: inset 8px 8px 22px #ddd6ff1a, inset -6px -9px 22px #b9acd024, 0 25px 70px #10142b22;
  --story-line: #cbbbf2;
  --photo-frame: #f4efe8;
  --toon-halo: radial-gradient(circle, #fff3d455, #cbbbf233 45%, transparent 70%);
  --phone-body: linear-gradient(150deg, #7b7ca0, #585a7e);
  --phone-shadow: 0 1.6cqw 3cqw #11152c40, inset 0 0 0 .25cqw #ffffff30;

  --order-card-fill: #30334ef0;
  --order-card-edge: #d4d2e526;
  --order-card-shadow: 0 14px 40px #11152c33;
  --order-drop-edge: #8f88b4;
  --order-drop-fill: #ffffff0d;
  --order-avatar-ring: #e5defa80;
  --order-avatar-shadow: 0 6px 16px #11152c4d;
  --order-step-done: #8f88b4;
  --order-error: #f3a9c0;
  --header-fade: linear-gradient(180deg, #252841f5 0%, #252841d9 55%, #25284100 100%);
  --google-btn-bg: #131314;
  --google-btn-text: #e3e3e3;
  --google-btn-edge: #8e918f;
  --apple-btn-edge: #ffffff59;
}

@media (max-width: 1000px) {
  :root {
    --gutter: 35px;
    --text-display: 47px;
    --text-lead: var(--text-350);
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 25px;
    --section-space: 55px;
    --header-height: 90px;
    --page-top: 8px;
    --text-display: clamp(28px, 8.4vw, 34px);
    --text-h2: 33px;
    --text-h2-lg: 37px;
    --text-lead: var(--text-300);
    --text-body: var(--text-300);
  }
}