/* ==========================================================================
   Strands of Grace: theme tokens
   Option B, "Watercolour bloom". Every colour on the site comes from here.
   ========================================================================== */

:root {
  /* --- Lisa's palette: her names and official HEX codes --------------- */

  /* Primary accents: the most prominent colours after the foundation. */
  --soft-lavender: #C8B4E8;   /* Soft Lavender: spirituality, intuition and reflection */
  --blush-pink: #F2B7D2;      /* Blush Pink: love, compassion and kindness */
  --champagne-gold: #D9B96B;  /* Champagne Gold: grace, elegance, light and beauty.
                                 Lines, strands, pearls and ornaments only: never text on ivory */

  /* Secondary accents: woven through subtly, never a whole section each. */
  --serenity-blue: #A7C9EE;   /* Serenity Blue: peace, calm and communication */
  --gentle-teal: #87D4D1;     /* Gentle Teal: balance, harmony and renewal */
  --sage-green: #B6D7AA;      /* Sage Green: growth, healing and connection */
  --soft-peach: #F6C6A8;      /* Soft Peach: warmth, creativity and new beginnings */

  /* Foundation. */
  --warm-ivory: #FFFDF8;      /* Warm Ivory: main background */
  --soft-cream: #F8F3EA;      /* Soft Cream: alternate sections */
  --deep-plum: #574467;       /* Deep Plum: headings (8.5:1 on ivory, 5.1:1 even on full blush) */
  --charcoal: #39343D;        /* Charcoal: body text (11.9:1 on ivory) */

  /* --- Supporting tones (decorative, or checked for contrast) ---------- */
  --gold-deep: #C9A24E;       /* darker end of the gold strands; decorative only */
  --gold-light: #E6CC8A;      /* lighter end of the gold strands; decorative only */
  --pearl: #FDEDE5;           /* the pearls in her logo */
  --ink-soft: #5E5566;        /* small notes and captions: 7:1 on ivory, 6.4:1 on cream */
  --field-line: #8C7D98;      /* form field borders: 3.5:1 on cream, 3.8:1 on ivory */

  /* The same colours as RGB channels, for translucent watercolour blooms:
     rgb(var(--blush-rgb) / 0.5). Keep them in step with the HEX codes above. */
  --lavender-rgb: 200 180 232;
  --blush-rgb: 242 183 210;
  --gold-rgb: 217 185 107;
  --blue-rgb: 167 201 238;
  --teal-rgb: 135 212 209;
  --sage-rgb: 182 215 170;
  --peach-rgb: 246 198 168;

  /* --- Roles ----------------------------------------------------------- */
  --bg: var(--warm-ivory);
  --bg-alt: var(--soft-cream);
  --heading: var(--deep-plum);
  --text: var(--charcoal);
  --focus: var(--gold-deep);      /* one focus ring everywhere: gold, offset from the element */

  /* The blush-to-peach "bloom" button. Plum text on it is 5.1:1 or better. */
  --bloom-fill: linear-gradient(118deg, var(--blush-pink) 0%, #F4BFC0 48%, var(--soft-peach) 100%);

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Marcellus", Optima, Candara, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", "Lucida Handwriting", cursive;

  --step--1: clamp(0.9rem, 0.87rem + 0.15vw, 0.95rem);      /* notes, captions */
  --step-0: clamp(1.0625rem, 1.03rem + 0.17vw, 1.125rem);   /* body: 17 to 18 px */
  --step-1: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);         /* leads */
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);            /* card and list headings */
  --step-3: clamp(2.4rem, 4.2vw, 3.6rem);                   /* section headings */
  --step-4: clamp(2.8rem, 2rem + 3.4vw, 4.8rem);            /* page titles */
  --step-5: clamp(3.4rem, 2.2rem + 5.4vw, 7rem);            /* the story title */

  --measure: 58ch;            /* body line length: about 62 to 68 characters */

  /* --- Space and shape ------------------------------------------------- */
  --gutter: clamp(1rem, 4.6vw, 4.5rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --max: 76rem;
  --max-wide: 86rem;
  --radius: 28px;
  --radius-sm: 14px;
  --header-h: 4.25rem;

  /* Warm plum-tinted shadows, never grey. */
  --shadow-soft: 0 30px 60px -38px rgb(87 68 103 / 0.32), 0 2px 8px -4px rgb(87 68 103 / 0.08);
  --shadow-card: 0 36px 64px -40px rgb(87 68 103 / 0.42), 0 14px 28px -22px rgb(87 68 103 / 0.24), 0 1px 3px -1px rgb(87 68 103 / 0.1);

  /* --- Watercolour textures (tiny SVG images, rasterised once) --------- */
  /* Pigment granulation: multiplied into every CSS bloom through a mask. */
  --grain-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='4' stitchTiles='stitch' result='a'/%3E%3CfeColorMatrix in='a' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -.9 1.34' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' seed='9' stitchTiles='stitch' result='c'/%3E%3CfeColorMatrix in='c' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -.22 1.1' result='d'/%3E%3CfeComposite in='b' in2='d' operator='arithmetic' k1='1'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Cold-pressed paper: fine tooth with a faint larger mottle, over the whole page. */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 .34 0 0 0 0 .27 0 0 0 0 .4 0 0 0 .6 0' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='2' seed='7' stitchTiles='stitch' result='m'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 .34 0 0 0 0 .27 0 0 0 0 .4 0 0 0 .5 -.05' result='b'/%3E%3CfeBlend in='a' in2='b' mode='normal'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  /* The wave where ivory meets cream, and the thin gold line that follows it. */
  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38C170 12 380 4 610 24S1080 62 1270 38C1350 28 1410 22 1440 24V60H0Z'/%3E%3C/svg%3E");
  --wave-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 40.2C170 14.2 380 6.2 610 26.2S1080 64.2 1270 40.2C1350 30.2 1410 24.2 1440 26.2' fill='none' stroke='%23D2B169' stroke-opacity='.92' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  /* --- Motion (transform and opacity only) ----------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-breath: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@media (min-width: 68em) {
  :root { --header-h: 5rem; }
}