/*
  Sofia Bunge — design tokens
  Source of inspiration: Pinterest board "Mama 2024" — linen-bound photobooks,
  glassine + kraft paper, warm greys, sage, dusty cornflower, small terracotta
  accents, quiet editorial typography with wide margins, hand-drawn looping lines.
*/
:root {
  /* Paper & ink */
  --paper:        #F4F1EA; /* warm unbleached paper */
  --paper-raised: #FAF8F3; /* glassine / lighter sheet */
  --linen:        #E6E1D6; /* linen book cloth */
  --kraft:        #C9B79A; /* kraft board */
  --ink:          #2B2A26; /* soft black, never pure */
  --ink-muted:    #6B675E; /* captions, meta */
  --rule:         #D6D0C3; /* hairlines */

  /* Accents (used sparingly) */
  --sage:         #8A9A7B; /* calm, care */
  --sage-deep:    #55644A;
  --cornflower:   #7D93B5; /* research, links */
  --cornflower-deep: #4D6389;
  --terracotta:   #B5543C; /* a single warm stitch of colour */

  /* Book-cloth spines (shelf + work covers) */
  --spine-blue:  #66738E;  --spine-blue-ink:  #F4F2EE;   /* slate blue */
  --spine-sage:  #5F6E4D;  --spine-sage-ink:  #F1F2EA;   /* deep olive */
  --spine-linen: #BFC5B2;  --spine-linen-ink: #3A4033;   /* sage grey */
  --spine-kraft: #985A53;  --spine-kraft-ink: #FAF0EA;   /* dusty brick */
  /* Matte paper grain + cloth weave, layered over every book surface */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .14 0 0 0 0 .11 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 .15 .35 .6'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .19 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* uneven, age-worn blotches */
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .45' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .26 0 0 0 0 .20 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* stretched paper fibres */
  --foxing: radial-gradient(circle at var(--fx1, 22%) var(--fy1, 18%), rgba(120,80,30,.18) 0 2px, rgba(120,80,30,.07) 3px 6px, transparent 9px),
            radial-gradient(circle at var(--fx2, 74%) var(--fy2, 63%), rgba(120,80,30,.14) 0 1.5px, rgba(120,80,30,.05) 2px 5px, transparent 7px),
            radial-gradient(ellipse 30% 18% at var(--fx3, 40%) var(--fy3, 88%), rgba(80,60,30,.10), transparent 70%);
  --wear: inset 0 0 0 1px rgba(40,30,15,.10), inset 0 0 14px rgba(70,50,25,.20), inset 0 -18px 22px -18px rgba(60,40,20,.25);
  --paper-tex: url("tex/paper.jpg");   /* felt paper, from Manu's reference */
  --weave: repeating-linear-gradient(0deg, rgba(40,34,24,.045) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(40,34,24,.035) 0 1px, transparent 1px 3px);

  /* Semantic */
  --bg: var(--paper);
  --surface: var(--paper-raised);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --link: var(--cornflower-deep);
  --accent: var(--terracotta);
  --focus: var(--cornflower);

  /* Type */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --step--1: clamp(0.80rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.2vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.4vw, 1.40rem);
  --step-2:  clamp(1.50rem, 1.33rem + 0.8vw, 1.95rem);
  --step-3:  clamp(2.00rem, 1.60rem + 1.8vw, 3.10rem);
  --step-4:  clamp(2.60rem, 1.80rem + 3.6vw, 5.00rem);

  --leading-tight: 1.1;
  --leading-body: 1.6;
  --tracking-caps: 0.12em;

  /* Space (8pt-ish, generous like a book margin) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;

  --measure: 64ch;
  --page-max: 1180px;
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Shape & depth: paper, not plastic */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-paper: 0 1px 0 rgba(43,42,38,.04), 0 8px 24px -12px rgba(43,42,38,.18);

  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1D1A;
    --surface: #262521;
    --text: #EDE8DD;
    --text-muted: #A9A398;
    --rule: #3A3832;
    --linen: #2F2D28;
    --link: #A9BBD6;
    --accent: #D9775C;
    --sage: #9DAE8E;
  }
}