/* ================================================================
   REDESIGNED BASE CSS
   Tokens, variables, reset, and base styles
================================================================ */

/* ================================================================
   CSS TOKENS - LIGHT MODE (default)
================================================================ */

@font-face {
  font-family: "Quicksand-Bold";
  src: url("../fonts/Quicksand-SemiBold.ttf");
  src: url("../fonts/Quicksand-SemiBold.ttf");
}

:root {
  --paper:         #faf8f2;
  --paper-warm:    #f5f0e8;
  --paper-lines:   #e0d5c2;
  --kraft:         #c9b896;
  --kraft-dark:    #8a6e4a;
  --ink:           #2a1f12;
  --ink-mid:       #4a3d2e;
  --ink-light:     #7a6a58;
  --pencil:        #aaa;

  --sticky-yellow: #fff5a8;
  --sticky-pink:   #ffd4d4;
  --sticky-blue:   #cde8ff;
  --sticky-green:  #cdf0d8;
  --sticky-peach:  #ffe4cc;

  --washi-coral:    #f5a89a;
  --washi-mint:     #88ccbb;
  --washi-lavender: #c0aadd;
  --washi-sage:     #aac8a4;

  --red-pen:   #b83232;
  --blue-pen:  #1f5fa6;

  --font-serif: 'Libre Baskerville', Georgia, serif;
  --font-sans:  'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-hand:  'Kalam', cursive;
  --font-logo:  'Quicksand-Bold', -apple-system, sans-serif;

  /* Footer colors */
  --footer-bg: #2a1f12;
  --footer-text: #faf8f2;
  --footer-text-muted: rgba(255,255,255,0.5);
  --footer-text-subtle: rgba(255,255,255,0.38);
  --footer-border: rgba(255,255,255,0.1);
  --footer-card-bg: rgba(255,255,255,0.05);
  --footer-card-border: rgba(255,255,255,0.08);
}

/* ================================================================
   DARK MODE - follows system preference
================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:         #1a1512;
    --paper-warm:    #252018;
    --paper-lines:   #3a3228;
    --kraft:         #5a4d38;
    --kraft-dark:    #8a7a5a;
    --ink:           #f0ebe4;
    --ink-mid:       #c8c0b4;
    --ink-light:     #9a9080;
    --pencil:        #6a6a6a;

    --sticky-yellow: #5c5428;
    --sticky-pink:   #6a3838;
    --sticky-blue:   #2a4a60;
    --sticky-green:  #2a5040;
    --sticky-peach:  #5a4830;

    --washi-coral:    #8a4a40;
    --washi-mint:     #3a6a5a;
    --washi-lavender: #5a4a7a;
    --washi-sage:     #4a6a44;

    --red-pen:   #e87070;
    --blue-pen:  #6a9fd0;

    /* Footer colors for dark mode */
    --footer-bg: #0a0806;
    --footer-text: #f0ebe4;
    --footer-text-muted: rgba(255,255,255,0.5);
    --footer-text-subtle: rgba(255,255,255,0.38);
    --footer-border: rgba(255,255,255,0.1);
    --footer-card-bg: rgba(255,255,255,0.05);
    --footer-card-border: rgba(255,255,255,0.08);
  }
}

/* ================================================================
   RESET & BASE STYLES
================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  line-height: 1.7;
}

/* ================================================================
   TEXTURE BACKGROUNDS
================================================================ */

/* Paper texture background */
.paper-bg {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0zM10 10h1v1h-1zM20 5h1v1h-1zM30 15h1v1h-1zM5 25h1v1H5zM15 35h1v1h-1zM25 20h1v1h-1zM35 30h1v1h-1z' fill='%23c8b898' fill-opacity='0.08'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .paper-bg {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0zM10 10h1v1h-1zM20 5h1v1h-1zM30 15h1v1h-1zM5 25h1v1H5zM15 35h1v1h-1zM25 20h1v1h-1zM35 30h1v1h-1z' fill='%23c8b898' fill-opacity='0.04'/%3E%3C/svg%3E");
  }
}

/* Kraft/diagonal texture background */
.kraft-bg {
  background-color: #d4c4a8;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a89878' fill-opacity='0.22'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .kraft-bg {
    background-color: #2a2418;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23584830' fill-opacity='0.22'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  }
}