/* ==========================================================================
   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));
  --cb-border-strong: color-mix(in oklch, var(--cb-cream) 60%, var(--cb-cocoa));

  --cb-accent:        var(--cb-caramel);
  --cb-accent-2:      var(--cb-terracotta);
  --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;

  --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;
}