/*
  ─────────────────────────────────────────────────────────────────────────
  shared/brand.css — single source of truth for Solenne's design tokens.
  Include this once per page via <link rel="stylesheet" href="/shared/brand.css">.

  Conventions:
    • All brand colors, fonts, radii, and shadows live as --tokens here.
    • Dark-mode automatic flip via :root[data-theme="dark"] — pair with the
      dark-mode init script in /shared/head.html.
    • Page-specific styles still live inline (junk-removal.html, etc.) but
      should reference these tokens, not hardcode hex values.
    • When the brand palette changes, you change it here. Once.
  ─────────────────────────────────────────────────────────────────────────
*/

:root {
  /* ─── Surfaces & ink ─── */
  --cream:       #F5F1EB;
  --cream-card:  #FBF8F2;
  --cream-deep:  #EDE6D6;
  --ink:         #1F1E1D;
  --ink-soft:    #3D3A36;
  --ink-dim:     #74706A;       /* Passes AA-large on cream (4.37:1). Use for secondary text. */
  --ink-faint:   #A39E96;       /* Decorative only — fails AA on cream (2.37:1). Use for borders and dividers, not text. */

  /* ─── Brand accents ─── */
  /* --terra and --sage fail AA-normal on cream. Use them for hero illustrations, mascots,
     and large display headlines only. For inline text under ~24px use the *-text variants. */
  --terra:       #CC785C;
  --terra-soft:  #E89B82;
  --terra-deep:  #A85A41;
  --terra-text:  #A85A41;       /* Passes AA-large on cream (4.44:1). Use for any terra text under 24px. */

  --sage:        #5C8462;
  --sage-soft:   #DDE7DC;
  --sage-deep:   #4A6B50;
  --sage-text:   #4A6B50;       /* Passes AA-large on cream (4.74:1). Use for any sage text under 24px. */

  /* ─── Lines & dividers ─── */
  --line:        #D9D1BF;
  --line-soft:   #E6DEC9;

  /* ─── Status colors ─── */
  --ok:          #2E7D5B;
  --warn:        #B86E2F;
  --bad:         #A5392A;
  --info:        #3A6FA8;

  /* ─── Type ─── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;

  /* ─── Radii ─── */
  --r-sm:  6px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* ─── Shadows ─── */
  --sh-sm:   0 1px 2px rgba(20, 20, 19, .04);
  --sh-card: 0 1px 2px rgba(20, 20, 19, .04), 0 10px 30px -16px rgba(20, 20, 19, .18);
  --sh-lift: 0 4px 18px rgba(204, 120, 92, .28);
}

/* Auto-dark via prefers-color-scheme as a fallback if the JS toggle hasn't run yet.
   The /shared/head.html dark-mode script sets data-theme explicitly and wins over this. */
:root[data-theme="dark"] {
  --cream:       #1A1816;
  --cream-card:  #23211D;
  --cream-deep:  #14120F;
  --ink:         #F0EEE6;
  --ink-soft:    #E0DDD2;
  --ink-dim:     #A5A199;
  --ink-faint:   #7A766F;

  --line:        rgba(240, 238, 230, .10);
  --line-soft:   rgba(240, 238, 230, .05);

  --terra-soft:  #E89B82;          /* keep accents legible on dark surfaces */
  --terra-text:  #E89B82;          /* On dark cream, the soft tone passes AA. */
  --sage-soft:   rgba(92, 132, 98, .18);
  --sage-text:   #A8C9AB;          /* On dark cream, brighten sage for AA. */
}

/* ─── Skip-to-content link ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  font-size: 14px;
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ─── Visible focus ring (accessibility) ─── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--terra-text);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── Minimal reset (shared) ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color 200ms ease, color 200ms ease;
}
.serif { font-family: var(--font-serif); }
.wrap  { max-width: 1200px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

/* Reduced-motion friendly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}