/* ============================================================================
   İkimiz — Design tokens
   Ported verbatim from the "İkimiz" design system (Bizim Köşemiz project).
   Two moods, one palette:
     - Mavi Saat (light, default) — hopeful evening blue
     - Gece      (dark)           — [data-theme="dark"]
   ========================================================================== */

/* ---- Webfonts (Turkish-complete, latin-ext). Self-host for production. ---- */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Caveat:wght@400;500;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap");

/* ============================ Colors ====================================== */
:root {
  /* ---- Neutral / cool paper ramp ---- */
  --paper-50:  #FBFCFE;
  --paper-100: #F4F6FB;
  --paper-200: #ECEFF4;
  --paper-300: #DEE3EC;
  --paper-400: #C6CDDB;
  --slate-500: #8992A6;

  /* ---- Ink (deep navy text) ---- */
  --ink-700: #3A4864;
  --ink-800: #26354F;
  --ink-900: #1B2A44;

  /* ---- Navy (primary) ---- */
  --navy-200: #C6D2E6;
  --navy-300: #9AACCB;
  --navy-400: #6480AC;
  --navy-500: #3E5C8A;
  --navy-600: #314B74;
  --navy-700: #26385A;

  /* ---- Apricot (warm accent / romance) ---- */
  --apricot-200: #F7DFCC;
  --apricot-300: #F0C9AC;
  --apricot-400: #EBB48C;
  --apricot-500: #DD9B6A;
  --apricot-600: #C67F4D;

  /* ---- Steel (calm study blue) ---- */
  --steel-soft: #DCE8EE;
  --steel-400:  #6E97AB;
  --steel-500:  #5E8AA0;
  --steel-600:  #4C7284;

  /* ---- Sage (success / growth) ---- */
  --sage-100: #EAF1E8;
  --sage-200: #DCE7DA;
  --sage-300: #B9CFB4;
  --sage-400: #8FB088;
  --sage-500: #6E9C7B;
  --sage-600: #557D62;

  /* ---- Gold (celebration / reward) ---- */
  --gold-200: #F7E4B8;
  --gold-300: #F0CF8E;
  --gold-400: #E6B455;
  --gold-500: #D69B34;

  /* ================= Semantic — Mavi Saat (light) ================= */
  --surface-page:    var(--paper-200);
  --surface-card:    var(--paper-50);
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #E4E9F1;
  --surface-study:   #E9EFF3;   /* calm blue focus background */
  --surface-inverse: var(--ink-900);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted:     #67718A;
  --text-on-accent: #F7FAFF;
  --text-on-study:  #17323E;

  --border-soft:   var(--paper-300);
  --border-strong: var(--paper-400);
  --border-focus:  var(--navy-400);

  --accent:        var(--navy-500);
  --accent-hover:  var(--navy-600);
  --accent-press:  var(--navy-700);
  --accent-soft:   #DEE6F2;

  /* warm accent — apricot: love notes, romantic tags, warmth touches */
  --warm:      var(--apricot-400);
  --warm-soft: var(--apricot-200);

  --study:       var(--steel-500);
  --study-hover: var(--steel-600);
  --study-soft:  var(--steel-soft);

  --success:   var(--sage-500);
  --celebrate: var(--gold-500);
  --warning:   var(--gold-400);
  --danger:    #C85C4A;

  --progress-track: var(--paper-300);
  --progress-fill:  var(--navy-500);

  --link:       var(--navy-500);
  --link-hover: var(--navy-700);

  /* confetti palette (celebration micro-animations) */
  --confetti-1: var(--navy-400);
  --confetti-2: var(--gold-400);
  --confetti-3: var(--apricot-400);
  --confetti-4: var(--steel-500);
}

/* ===================== Gece (dark) ===================== */
[data-theme="dark"] {
  --surface-page:    #141B2B;
  --surface-card:    #1E2740;
  --surface-raised:  #27324F;
  --surface-sunken:  #0F1420;
  --surface-study:   #182634;
  --surface-inverse: var(--paper-100);

  --text-primary:   #E9EDF6;
  --text-secondary: #C2CADB;
  --text-muted:     #8B95AC;
  --text-on-accent: #0E1626;
  --text-on-study:  #E4EEF2;

  --border-soft:   #2C3752;
  --border-strong: #3B486A;
  --border-focus:  #7E9AD0;

  --accent:        #7E9AD0;
  --accent-hover:  #94ABDB;
  --accent-press:  #ABBEE6;
  --accent-soft:   #2A3654;

  --warm:      #EBB48C;
  --warm-soft: #3A2E2A;

  --study:       #7FA9BE;
  --study-hover: #96BBCC;
  --study-soft:  #23323E;

  --success:   #8FB088;
  --celebrate: #E6B455;
  --warning:   #E6B455;
  --danger:    #E27A63;

  --progress-track: #2C3752;
  --progress-fill:  #7E9AD0;

  --link:       #9AB2DE;
  --link-hover: #B9CBEC;

  --confetti-1: #7E9AD0;
  --confetti-2: #E6B455;
  --confetti-3: #EBB48C;
  --confetti-4: #7FA9BE;
}

/* ============================ Typography ================================== */
:root {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script:  "Caveat", "Bradley Hand", cursive;
  --font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Scale ---- */
  --fs-display:  4rem;      /* 64 — hero moments */
  --fs-h1:       3rem;      /* 48 */
  --fs-h2:       2.25rem;   /* 36 */
  --fs-h3:       1.75rem;   /* 28 */
  --fs-h4:       1.375rem;  /* 22 */
  --fs-body-lg:  1.125rem;  /* 18 */
  --fs-body:     1rem;      /* 16 */
  --fs-body-sm:  0.875rem;  /* 14 */
  --fs-caption:  0.75rem;   /* 12 */

  /* ---- Line heights ---- */
  --lh-tight:  1.12;
  --lh-snug:   1.28;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ---- Weights ---- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---- Tracking ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;
}

/* ============================ Spacing ==================================== */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* layout */
  --container:  1120px;
  --container-narrow: 720px;
  --gutter: var(--space-5);
}

/* ======================= Radius / shadow / motion ======================== */
:root {
  /* ---- Corner radius ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ---- Shadows (cool, navy-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(27,42,68,.07);
  --shadow-sm: 0 1px 2px rgba(27,42,68,.07), 0 2px 6px rgba(27,42,68,.06);
  --shadow-md: 0 4px 10px rgba(27,42,68,.08), 0 10px 24px rgba(27,42,68,.10);
  --shadow-lg: 0 10px 24px rgba(27,42,68,.10), 0 22px 48px rgba(27,42,68,.16);
  --shadow-glow: 0 0 0 4px var(--accent-soft);
  --shadow-inset: inset 0 1px 2px rgba(27,42,68,.09);

  /* ---- Motion ---- */
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  480ms;
  --dur-lazy:  720ms;
  --ease-soft:   cubic-bezier(.22,.61,.36,1);
  --ease-inout:  cubic-bezier(.45,0,.35,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
    --dur-lazy: 0ms;
  }
}

/* ============================ Base elements =============================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-bold); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

small { font-size: var(--fs-body-sm); }

/* Handwriting accent helper */
.ik-script {
  font-family: var(--font-script);
  font-weight: var(--fw-medium);
  color: var(--accent);
  line-height: 1;
}

/* Overline / eyebrow */
.ik-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Entrance animations ---- */
@keyframes ik-fade-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ik-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ik-scale-in  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ik-float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Reveal-on-mount utility: set --ik-delay inline for a stagger. */
.ik-reveal { opacity: 0; animation: ik-fade-up var(--dur-slow) var(--ease-soft) var(--ik-delay, 0ms) forwards; }
.ik-reveal-scale { opacity: 0; animation: ik-scale-in var(--dur) var(--ease-bounce) var(--ik-delay, 0ms) forwards; }
.ik-float { animation: ik-float 5s var(--ease-inout) infinite; }

@media (prefers-reduced-motion: reduce) {
  .ik-reveal, .ik-reveal-scale { opacity: 1; animation: none; }
  .ik-float { animation: none; }
}