/* ==========================================================================
   Cacao Boys design tokens
   Ported from the Ploy mockup (src/styles/globals.css).
   Hex declarations are fallbacks for browsers without oklch(); the oklch line
   that follows wins where supported.
   ========================================================================== */

:root {
  /* --- Brand base colors ------------------------------------------------ */
  --cb-cream:        #f6f1e9;
  --cb-cream:        oklch(0.976 0.012 76);   /* page background */
  --cb-cream-light:  #fbf8f3;
  --cb-cream-light:  oklch(0.989 0.008 76);   /* cards, lifted surfaces */
  --cb-espresso:     #3a2c22;
  --cb-espresso:     oklch(0.24 0.035 45);
  --cb-cocoa:        #352822;
  --cb-cocoa:        oklch(0.22 0.035 43);    /* primary text, buttons */
  --cb-cocoa-dark:   #2c2019;
  --cb-cocoa-dark:   oklch(0.19 0.03 40);
  --cb-caramel:      #b58a5f;
  --cb-caramel:      oklch(0.64 0.095 70);    /* primary accent */
  --cb-terracotta:   #7a3d2e;
  --cb-terracotta:   oklch(0.39 0.09 30);     /* secondary accent */
  --cb-wheat:        #eaddc6;
  --cb-wheat:        oklch(0.91 0.035 76);    /* tertiary accent, tags */

  /* --- Semantic roles --------------------------------------------------- */
  --cb-bg:            var(--cb-cream);
  --cb-surface:       var(--cb-cream-light);
  --cb-surface-alt:   color-mix(in oklch, var(--cb-cream) 95%, var(--cb-cocoa));
  --cb-surface-inset: color-mix(in oklch, var(--cb-cream) 88%, var(--cb-cocoa));
  --cb-inverse:       var(--cb-cocoa);
  --cb-text:          var(--cb-cocoa);
  --cb-text-muted:    color-mix(in oklch, var(--cb-cocoa) 78%, var(--cb-cream));
  --cb-text-inverse:  var(--cb-cream-light);
  --cb-text-inverse-muted: color-mix(in srgb, var(--cb-cream-light) 65%, transparent);
  --cb-border:        color-mix(in oklch, var(--cb-cream) 76%, var(--cb-cocoa));
  /* Was color-mix(cream 60%, cocoa) = #a09489 = 2.76:1 on cream, which fails
     WCAG 1.4.11 for a control boundary (needs 3:1). Form fields sit at 1.04:1
     against the page, so their border is the only thing marking them. Now
     3.72:1. --cb-border stays lighter on purpose: it is for decorative
     dividers and card edges, which owe nothing. */
  --cb-border-strong: oklch(0.60 0.03 45);

  --cb-accent:        var(--cb-caramel);
  --cb-accent-2:      var(--cb-terracotta);

  /* Caramel is a SURFACE colour, not a text colour. On cream it measures
     3.18:1, which fails WCAG AA for text (needs 4.5:1). It stays in use for
     button fills, borders, icon strokes, star ratings and hover-on-cocoa
     (5.10:1), all of which only owe 3:1 or sit on a dark surface.
     For TEXT on a cream surface, use --cb-accent-text (5.69:1).
     Terracotta (--cb-accent-2) already passes at 4.79:1 and is unchanged. */
  --cb-caramel-text:  oklch(0.50 0.10 70);
  --cb-accent-text:   var(--cb-caramel-text);
  --cb-accent-3:      var(--cb-wheat);

  /* --- Buttons ---------------------------------------------------------- */
  --cb-btn-bg:          var(--cb-cocoa);
  --cb-btn-text:        var(--cb-cream-light);
  --cb-btn-border:      var(--cb-cocoa);
  --cb-btn-hover-bg:    var(--cb-caramel);
  --cb-btn-hover-text:  var(--cb-cocoa);
  --cb-btn-ghost-text:  var(--cb-cocoa);
  --cb-btn-ghost-border: var(--cb-border-strong);

  /* --- Radius ----------------------------------------------------------- */
  --cb-radius:      1.5rem;   /* 24px base */
  --cb-radius-sm:   0.75rem;
  --cb-radius-md:   1.25rem;
  --cb-radius-lg:   2.5rem;
  --cb-radius-xl:   3rem;
  --cb-radius-pill: 999px;

  /* --- Typography ------------------------------------------------------- */
  --cb-font-body:
    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --cb-font-heading: var(--cb-font-body);
  /* Serif wordmark, matching the Ploy mockup's default `font-serif` stack */
  --cb-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  /* Montserrat = the Cacao Boys brand typeface (client-supplied package).
     Scoped deliberately to the company name in the header and footer; the rest
     of the site stays on Open Sans. Subset to basic Latin, wght axis 400-700. */
  --cb-font-wordmark: "Montserrat", var(--cb-font-body);

  --cb-weight-body:    400;
  --cb-weight-medium:  500;
  --cb-weight-heading: 600;
  --cb-weight-black:   800;

  --cb-leading-body:    1.64;
  --cb-leading-heading: 1.15;
  --cb-leading-display: 0.95;
  --cb-tracking-display: -0.03em;
  --cb-tracking-eyebrow: 0.14em;

  /* Fluid type scale */
  --cb-text-xs:   0.75rem;
  --cb-text-sm:   0.875rem;
  --cb-text-base: 1rem;
  --cb-text-lg:   1.125rem;
  --cb-text-xl:   1.25rem;
  --cb-text-2xl:  1.5rem;
  --cb-text-3xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --cb-text-4xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3rem);
  --cb-text-5xl:  clamp(2.6rem, 1.8rem + 3.6vw, 4rem);
  --cb-text-6xl:  clamp(3rem, 2rem + 5vw, 5.25rem);

  /* --- Layout ----------------------------------------------------------- */
  --cb-container:        90rem;   /* 1440px */
  --cb-container-narrow: 62rem;
  --cb-container-prose:  46rem;
  --cb-gutter:           clamp(1.25rem, 4vw, 2.75rem);
  --cb-section-y:        clamp(3.5rem, 6vw, 6rem);

  /* --- Misc ------------------------------------------------------------- */
  --cb-border-width: 1px;
  --cb-shadow-soft: 0 1px 2px color-mix(in srgb, var(--cb-cocoa) 8%, transparent);
  --cb-transition: 200ms ease;
}