/* ==========================================================================
   Bookcliff Web — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow and motion.
   No hex value, px size, or hue should appear anywhere else in the codebase —
   add a token here instead. See docs/rebrand/02-brand-system.md for the full
   rationale, contrast measurements, and usage rules.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     1. Brand colors — the only place a hex value is allowed to originate.
     -------------------------------------------------------------------- */
  /* Palette: the Book Cliffs at golden hour. Juniper and shale for the dark
     slopes, caprock sandstone for the cliff band in the mark, canyon rust
     for anything you can click on a light surface. */
  --bcw-juniper: #1F3A32; /* Juniper — primary brand, headings, nav, dark panel */
  --bcw-rust:    #A4471F; /* Canyon Rust — buttons, links, CTAs on light surfaces */
  --bcw-sand:    #E2A55E; /* Caprock Sandstone — accent, the cliff in the mark, CTAs on dark panels */
  --bcw-bone:    #F7F2EA; /* Bone — page background */
  --bcw-shale:   #13211D; /* Shale — darkest panels, footer */
  --bcw-white:   #FFFFFF;

  /* --------------------------------------------------------------------
     2. Semantic color roles — named for job, not hue. Components consume
     these, never the --bcw-* primitives directly, so a future re-tint
     only ever touches this block.
     -------------------------------------------------------------------- */

  /* Surfaces */
  --color-bg:            var(--bcw-bone);
  --color-surface:       var(--bcw-white);
  --color-surface-sunken: color-mix(in srgb, var(--bcw-juniper) 4%, var(--bcw-bone)); /* muted text on this is ~5.1:1 */
  --color-panel-juniper:    var(--bcw-juniper);
  --color-panel-shale:     var(--bcw-shale);

  /* Text */
  --color-text:               var(--bcw-juniper);
  --color-text-muted:         color-mix(in srgb, var(--bcw-juniper) 76%, var(--bcw-bone) 24%); /* ~5.5:1 on bone, ~6.1:1 on white, ~5.1:1 on --color-surface-sunken */
  --color-heading:            var(--bcw-juniper);
  --color-text-on-dark:       var(--bcw-white);
  --color-text-on-dark-muted: color-mix(in srgb, var(--bcw-white) 72%, var(--bcw-juniper) 28%); /* ~7.2:1 on juniper, ~9.8:1 on shale */
  --color-heading-on-dark:    var(--bcw-white);

  /* Links (context-aware — see 02-brand-system.md §Contrast) */
  --color-link:            var(--bcw-rust);
  --color-link-hover:      color-mix(in srgb, var(--bcw-rust) 80%, var(--bcw-juniper) 20%);
  --color-link-on-dark:       var(--bcw-white);
  --color-link-on-dark-hover: var(--bcw-sand); /* 5.7:1 on juniper, 7.7:1 on shale */

  /* Borders — always derived from juniper/white opacity, never a new hue */
  --color-border:              color-mix(in srgb, var(--bcw-juniper) 16%, transparent);
  --color-border-strong:       color-mix(in srgb, var(--bcw-juniper) 32%, transparent);
  --color-border-on-dark:        color-mix(in srgb, var(--bcw-white) 18%, transparent);
  --color-border-on-dark-strong: color-mix(in srgb, var(--bcw-white) 34%, transparent);

  /* Focus ring — context-aware. Rust is 5.4:1 on bone but fails non-text
     3:1 on the dark panels (2.1:1 on juniper, 2.8:1 on shale), so dark
     contexts override this token to Sandstone (5.7:1 / 7.7:1). */
  --color-focus: var(--bcw-rust);

  /* Accent — decorative only: underlines, icon fills, badges paired with
     dark backgrounds, hairline highlights. Never text on a light surface
     (1.9:1 on bone, fails even large-text AA). */
  --color-accent: var(--bcw-sand);

  /* Calls to action — white on rust is 6.0:1; hover 6.9:1, active 7.8:1.
     Dark panels swap to sandstone with shale text (see .dark-panel below). */
  --color-cta-bg:        var(--bcw-rust);
  --color-cta-bg-hover:  color-mix(in srgb, var(--bcw-rust) 85%, var(--bcw-juniper) 15%);
  --color-cta-bg-active: color-mix(in srgb, var(--bcw-rust) 70%, var(--bcw-juniper) 30%);
  --color-cta-text:      var(--bcw-white);

  /* Feedback / status */
  --color-success-bg:     color-mix(in srgb, var(--bcw-sand) 12%, var(--bcw-white) 88%);
  --color-success-border: color-mix(in srgb, var(--bcw-rust) 35%, transparent);
  --color-success-text:   var(--bcw-juniper);

  /* --------------------------------------------------------------------
     3. Typography
     -------------------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Modular scale, ~1.25 (major third) from a 16px base, rounded to clean
     values for legibility at small sizes. Stated ratio: 1.25. */
  --text-xs:   0.75rem;   /* 12px — fine print, badges */
  --text-sm:   0.875rem;  /* 14px — captions, meta */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead paragraphs */
  --text-lg:   1.25rem;   /* 20px — small headings, card titles */
  --text-xl:   1.5rem;    /* 24px — h4 / section sub-headings */
  --text-2xl:  1.875rem;  /* 30px — h3 */
  --text-3xl:  2.25rem;   /* 36px — h2 (mobile) */
  --text-4xl:  2.75rem;   /* 44px — h2 (desktop) / h1 (mobile) */
  --text-5xl:  3.5rem;    /* 56px — h1 (desktop) */

  --leading-tight:   1.15; /* display headings */
  --leading-snug:    1.35; /* short UI headings */
  --leading-normal:  1.6;  /* body */
  --leading-relaxed: 1.8;  /* long-form copy, matches baseline's rhythm */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --------------------------------------------------------------------
     4. Spacing — 4px base unit.
     -------------------------------------------------------------------- */
  --space-1:  0.25rem; /* 4px  */
  --space-2:  0.5rem;  /* 8px  */
  --space-3:  0.75rem; /* 12px */
  --space-4:  1rem;    /* 16px */
  --space-5:  1.25rem; /* 20px */
  --space-6:  1.5rem;  /* 24px */
  --space-8:  2rem;    /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */

  /* --------------------------------------------------------------------
     5. Radius
     -------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     6. Shadow — juniper-tinted, never pure black, to stay warm against bone.
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--bcw-juniper) 12%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--bcw-juniper) 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, var(--bcw-juniper) 18%, transparent);
  --shadow-glow-cta:    0 0 0 4px color-mix(in srgb, var(--bcw-rust) 20%, transparent);
  --shadow-glow-accent: 0 0 0 4px color-mix(in srgb, var(--bcw-sand) 30%, transparent);

  /* --------------------------------------------------------------------
     7. Motion — respects prefers-reduced-motion below.
     -------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------------------
     8. Layout
     -------------------------------------------------------------------- */
  --container-max: 1200px;
  --form-max: 560px;           /* contact form measure */
  --measure: 720px;            /* readable single-column block */
  --container-padding: var(--space-5);

  /* Fixed breakpoints (documented here for reference; custom properties
     cannot be used inside @media conditions in plain CSS with no build
     step, so style.css hardcodes these three values):
     sm: 640px   md: 768px   lg: 1024px */
}

/* Dark-panel contexts flip the context-aware tokens. Apply `.dark-panel`
   (juniper) or `.ink-panel` (shale) to any section wrapper; every component
   underneath automatically gets correct text, link, border and focus
   colors without a single component-level override. */
.dark-panel,
.ink-panel {
  --color-text:         var(--color-text-on-dark);
  --color-text-muted:   var(--color-text-on-dark-muted);
  --color-heading:      var(--color-heading-on-dark);
  --color-link:         var(--color-link-on-dark);
  --color-link-hover:   var(--color-link-on-dark-hover);
  --color-border:       var(--color-border-on-dark);
  --color-border-strong: var(--color-border-on-dark-strong);
  --color-focus:        var(--bcw-sand);
  /* Rust buttons sink into juniper (2.1:1), so primary actions on dark
     panels turn sandstone with shale text: 7.7:1, hover 8.7:1, active 5.9:1. */
  --color-cta-bg:        var(--bcw-sand);
  --color-cta-bg-hover:  color-mix(in srgb, var(--bcw-sand) 85%, var(--bcw-white) 15%);
  --color-cta-bg-active: color-mix(in srgb, var(--bcw-sand) 85%, var(--bcw-shale) 15%);
  --color-cta-text:      var(--bcw-shale);
  /* Redefining --color-text alone is not enough: plain text inherits the
     *computed* colour from <body> (juniper), not the variable. Without this line,
     unstyled <p> and <strong> in a dark panel render juniper-on-juniper at 1:1
     contrast — which hid the Contact section's labels, location and hours. */
  color: var(--color-text);
}

.dark-panel { background: var(--bcw-juniper); }
.ink-panel  { background: var(--bcw-shale); }

/* Respect the visitor's OS-level motion preference everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}