/* Whole Wellbeing Atlas: THE theme token file. Every color, font, radius, shadow and the ball's
   materials come from here (the ball reads the --ball-* values through js/theme.js).
   Theme: "hand-drawn atlas" (owner, 2026-11-10). To change the look, change the values here. */
@import url("https://fonts.googleapis.com/css2?family=Allura&family=IM+Fell+English:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

:root {
  /* paper and ink */
  --paper: #f4ecd6;
  --paper-deep: #eadcb8;
  --paper-light: #fffaf0;
  --paper-card: #fbf5e4;
  --ink: #2c4429;          /* text: 9.1:1 on paper */
  --ink-soft: #4f6447;     /* secondary text: 5.5:1 on paper */
  --ink-hover: #1f331d;
  --ink-faint: rgba(44, 68, 41, 0.3);
  --ink-line: rgba(44, 68, 41, 0.78);
  --placeholder: #5f6c57;  /* 4.9:1 on paper-light */
  --placeholder-hint: #6b7a66; /* field hints: lighter, italic (about 4.5:1 on the card) */
  --word: #3d6a37;         /* the wordmark */
  --leaf: #7e9f62;
  --leaf-dark: #56783f;
  --sage-edge: #a9b88f;
  --gold-edge: #e3cb92;
  --gold: #c3962b;         /* decoration only, never text */
  --footer-bg: #2c4429;
  --footer-text: #f4ecd6;
  --footer-text-soft: #dfe6d2;

  /* the four areas (ink edges, dots, decoration) */
  --mind: #5b6aa8;
  --body: #3d7c5b;
  --spirit: #c6605a;
  --life: #c3962b;
  /* the three approaches */
  --traditional: #2f6d78;
  --alternative: #874670;
  --progressive: #9a4f1e;

  /* type */
  --font-head: "IM Fell English", "IM Fell DW Pica", Georgia, serif;
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-word: Allura, cursive;
  --font-serif: var(--font-head);
  --font-fell: var(--font-head);    /* the prototype's name for the heading font */
  --text-base: 1.0625rem;  /* 17px */

  /* shape */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 3px 8px -3px rgba(70, 52, 20, 0.35);
  --shadow-md: 0 10px 26px -14px rgba(70, 52, 20, 0.45);
  --shadow-lg: 0 16px 34px -16px rgba(70, 52, 20, 0.55);
  --vignette: inset 0 0 140px rgba(120, 92, 40, 0.16), inset 0 0 40px rgba(120, 92, 40, 0.08);
  --focus: 2.5px solid var(--ink);

  /* paper texture (no image files) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibers: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .34  0 0 0 0 .18  0 0 0 .07 -.012'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --page-bg: var(--grain), var(--fibers),
    radial-gradient(1400px 1100px at 0% 85%, rgba(169, 184, 143, 0.5), transparent 60%),
    radial-gradient(1300px 900px at 100% 0%, rgba(227, 203, 146, 0.55), transparent 60%);
  --pen-line: url("/assets/atlas/pen-line.svg");
  --deckle: url("/assets/atlas/deckle-edge.svg");

  /* the ball (read by js/theme.js for Three.js) */
  --ball-style: atlas;               /* atlas = parchment globe + brass rings */
  --ball-paper: #efe2c0;
  --ball-ink: #4a3a20;
  --ball-glow: #ffc870;
  --ball-glow-strength: 0.34;
  --ball-brass-dark: #6e4f1e;
  --ball-brass: #c9a25a;
  --ball-brass-light: #e6c784;
  --ball-light-sky: #fff6e2;
  --ball-light-ground: #8a7550;
  --ball-light-key: #fff0d2;
  --ball-light-rim: #ffe2a8;
  --ball-mote: #d6a63e;
  --ball-label-bg: #fbf5e4;
  --ball-label-text: #2c4429;
}