/*
 * thebamboostudio-v1 theme — design tokens
 * Pastel palette adapted from the Bamboo Blossom landing-page mock
 * (site-design-reference/DESIGN.md, docs/superpowers/specs/2026-09-16-opencart-homepage-port-design.md §5).
 *
 * The tokens layer is the only thing an AI agent should need to read first.
 * Component styles in theme.css consume these. Change a token → everything updates.
 */

:root {
  /* ---- Brand ---- */
  --brand-primary: #445238;       /* sage-dark, from the round logo */
  --brand-primary-dark: #2f3a27;  /* sage-ink */
  --brand-primary-light: #7c8f6a; /* sage */
  --brand-accent: #d98fa0;        /* blush-deep */
  --brand-warm: #d6a24c;          /* gold */

  /* ---- Semantic ---- */
  --color-sale: #d98fa0;
  --color-new: #7c8f6a;
  --color-price-old: #cabfae;
  --color-rating: #d6a24c;
  --color-success: #7c8f6a;
  --color-info: #7c8f6a;
  --color-warning: #d6a24c;
  --color-danger: #d98fa0;

  /* ---- Neutrals ---- */
  --color-bg: #fbf3ec;                    /* cream */
  --color-bg-soft: #f3e6d9;               /* cream-2 */
  --color-border: rgba(58, 50, 41, 0.12); /* ring */
  --color-border-strong: rgba(58, 50, 41, 0.24);

  /* ---- Text ---- */
  --color-text: #3a3229;         /* ink */
  --color-text-strong: #2f3a27;
  --color-heading: #2f3a27;      /* sage-ink */
  --color-text-muted: #6b6154;   /* ink-soft */
  --color-link: var(--brand-primary);
  --color-link-hover: var(--brand-primary-dark);

  /* ---- Extra palette tokens used by the new nav/footer/homepage bands ---- */
  --color-blush: #f0c6ce;
  --color-blush-deep: #d98fa0;
  --color-gold: #d6a24c;
  --color-paper: #ffffff;

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-eyebrow: "Quicksand", "Karla", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --font-base: 14px;
  --line-height-base: 1.65;
  --line-height-tight: 1.2;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-display: 56px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(74, 63, 45, 0.06);
  --shadow-md: 0 4px 12px rgba(74, 63, 45, 0.12);
  --shadow-lg: 0 12px 28px rgba(74, 63, 45, 0.18);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --header-height: 96px;
  --header-height-sticky: 64px;
  --topbar-height: 36px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
}

/* Bootstrap color overrides — brand pulls into the framework tokens. */
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
}