/* ═══════════════════════════════════════════════════════════════════
   BASE.CSS — Variables · Reset · Typography · Theme
   Global scope: applies to every page
═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts: Syne (display) + DM Sans (body) ─────────────── */

/* ── Design Tokens — DAY MODE (default) ────────────────────────── */
:root {

  /* Core palette */
  --c-bg:           #f8f6f2;     /* warm white */
  --c-surface:      #ffffff;
  --c-surface-2:    #f0ede8;
  --c-border:       #cac6c1;
  --c-border-light: #ece9e4;
  --c-text:         #1a1814;
  --c-text-2:       #4a4740;
  --c-muted:        #8c8880;

  /* Brand accents */
  --c-teal:         #2ecccc;
  --c-teal-dark:    #22a8a8;
  --c-teal-light:   rgba(46, 204, 204, 0.12);
  --c-orange:       #eb5406;
  --c-orange-dark:  #c44504;
  --c-orange-light: rgba(235, 84, 6, 0.12);

  /* Navbar */
  --c-nav-bg:       rgba(248, 246, 242, 0.92);
  --c-nav-border:   rgba(226, 221, 215, 0.8);

  /* Tile gradients — Day mode */
  --grad-1:  linear-gradient(135deg, #2ecccc 0%, #1a9999 100%);
  --grad-2:  linear-gradient(135deg, #eb5406 0%, #c44504 100%);
  --grad-3:  linear-gradient(135deg, #6c63ff 0%, #4c45cc 100%);
  --grad-4:  linear-gradient(135deg, #2ecccc 0%, #6c63ff 100%);
  --grad-5:  linear-gradient(135deg, #eb5406 0%, #f59e0b 100%);
  --grad-6:  linear-gradient(135deg, #10b981 0%, #2ecccc 100%);
  --grad-7:  linear-gradient(135deg, #6c63ff 0%, #ec4899 100%);
  --grad-8:  linear-gradient(135deg, #f59e0b 0%, #eb5406 100%);
  --grad-9:  linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-s1: linear-gradient(135deg, #2ecccc 0%, #22a8a8 100%);
  --grad-s2: linear-gradient(135deg, #6c63ff 0%, #4c45cc 100%);
  --grad-s3: linear-gradient(135deg, #10b981 0%, #2ecccc 100%);
  --grad-s4: linear-gradient(135deg, #eb5406 0%, #f59e0b 100%);
  --grad-s5: linear-gradient(135deg, #8b5cf6 0%, #6c63ff 100%);
  --grad-s6: linear-gradient(135deg, #2ecccc 0%, #6c63ff 100%);
  --grad-s7: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  --grad-s8: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-s9: linear-gradient(135deg, #f59e0b 0%, #eb5406 100%);
  --grad-s10:linear-gradient(135deg, #6c63ff 0%, #ec4899 100%);
  --grad-s11:linear-gradient(135deg, #2ecccc 0%, #10b981 100%);
  --grad-s12:linear-gradient(135deg, #eb5406 0%, #e11d48 100%);

  --grad-bin: linear-gradient(135deg, #f3ba2fff 0%, #f3ba2faa 100%);
  --grad-bmx: linear-gradient(135deg, #ff0201ff 0%, #ff0201aa 100%);
  --grad-bma: linear-gradient(135deg, #59aaa4ff 0%, #59aaa4aa 100%);
  --grad-bgt: linear-gradient(135deg, #1da2b4ff 0%, #1da2b4aa 100%);
  --grad-blo: linear-gradient(135deg, #fd8701ff 0%, #fd8701aa 100%);
  --grad-byb: linear-gradient(135deg, #f7a600ff 0%, #f7a600aa 100%);
  --grad-kuc: linear-gradient(135deg, #23af91ff 0%, #23af91aa 100%);
  --grad-okx: linear-gradient(135deg, #888888ff 0%, #888888aa 100%);
  --grad-pmx: linear-gradient(135deg, #38d102ff 0%, #38d102aa 100%);

  /* Typography */
  /*--font-display: 'Syne', system-ui, sans-serif;*/
  --font-display: 'Playfair Display', 'Noto Serif SC', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Radii */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.16);

  /* Motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.5, 0, 0.84, 0);
  --t-fast:    150ms;
  --t-base:    250ms;
  --t-slow:    400ms;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0em;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;
  --ls-widest: 0.12em;

  /* Section padding */
  --section-py: 5rem;
  --section-px: var(--sp-6);
  --container:  1320px;
}

/* ── BASICS ────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  background-color: black;
}
body {
  font-family: var(--font-body);
  background-color: var(--c-bg);
  color: var(--c-text);
  line-height: 1.65;
  letter-spacing: var(--ls-normal);
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
  overflow-x: hidden;
}

/* ── NIGHT MODE — activated when #theme-toggle is checked ────────── */
#theme-toggle:checked ~ * {
  background-color:#0d0d0d;
  color: #f0ede8;

  /* Core palette */
  --c-bg:           #0d0d0d;
  --c-surface:      #161616;
  --c-surface-2:    #1e1e1e;
  --c-border:       #cac6c1;
  --c-border-light: #ece9e4;
  --c-text:         #f0ede8;
  --c-text-2:       #b0ada8;
  --c-muted:        #666360;

  /* Navbar */
  --c-nav-bg:       rgba(13, 13, 13, 0.92);
  --c-nav-border:   rgba(42, 42, 42, 0.8);

  /* Tile gradients — Day mode */
  --grad-1:  linear-gradient(135deg, #1c7c7c 0%, #0f5858 100%);
  --grad-2:  linear-gradient(135deg, #792b03 0%, #682402 100%);
  --grad-3:  linear-gradient(135deg, #3a368d 0%, #2a2671 100%);
  --grad-4:  linear-gradient(135deg, #186c6c 0%, #383488 100%);
  --grad-5:  linear-gradient(135deg, #7d2c03 0%, #835506 100%);
  --grad-6:  linear-gradient(135deg, #086345 0%, #1a7070 100%);
  --grad-7:  linear-gradient(135deg, #373381 0%, #7d2651 100%);
  --grad-8:  linear-gradient(135deg, #784f06 0%, #7d2c04 100%);
  --grad-9:  linear-gradient(135deg, #095f42 0%, #03543a 100%);
  --grad-s1: linear-gradient(135deg, #1a7171 0%, #115252 100%);
  --grad-s2: linear-gradient(135deg, #312e76 0%, #27236a 100%);
  --grad-s3: linear-gradient(135deg, #096546 0%, #186a6a 100%);
  --grad-s4: linear-gradient(135deg, #7c2b03 0%, #845607 100%);
  --grad-s5: linear-gradient(135deg, #4b3284 0%, #383484 100%);
  --grad-s6: linear-gradient(135deg, #176262 0%, #34307f 100%);
  --grad-s7: linear-gradient(135deg, #7c2450 0%, #47307e 100%);
  --grad-s8: linear-gradient(135deg, #086043 0%, #02543a 100%);
  --grad-s9: linear-gradient(135deg, #805306 0%, #802d04 100%);
  --grad-s10:linear-gradient(135deg, #312e75 0%, #77254e 100%);
  --grad-s11:linear-gradient(135deg, #186868 0%, #085e41 100%);
  --grad-s12:linear-gradient(135deg, #812e04 0%, #731126 100%);

  --grad-bin: linear-gradient(135deg, #896c22bb 0%, #8f702388 100%);
  --grad-bmx: linear-gradient(135deg, #8a0000bb 0%, #93000088 100%);
  --grad-bma: linear-gradient(135deg, #305c59bb 0%, #35656288 100%);
  --grad-bgt: linear-gradient(135deg, #13636ebb 0%, #11626c88 100%);
  --grad-blo: linear-gradient(135deg, #904d00bb 0%, #904d0088 100%);
  --grad-byb: linear-gradient(135deg, #936301bb 0%, #92620188 100%);
  --grad-kuc: linear-gradient(135deg, #146352bb 0%, #16756088 100%);
  --grad-okx: linear-gradient(135deg, #555454bb 0%, #54545488 100%);
  --grad-pmx: linear-gradient(135deg, #1d6901bb 0%, #1e6d0188 100%);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:  0 4px 16px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.7);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem);   font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p  {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-text-2);
  letter-spacing: 0.01em;
}

/* Hidden theme toggle checkbox */
#theme-toggle { display: none; }

/* Day mode: show sun; night mode: show moon */
.icon-sun  { display: block; }
.icon-moon { display: none; }
#theme-toggle:checked ~ * .icon-sun  { display: none; }
#theme-toggle:checked ~ * .icon-moon { display: block; }

/* ── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* ── SELECTION ──────────────────────────────────────────────────── */
::selection { background: var(--c-teal); color: #fff; }