/**
 * Branch Creative — variables.css
 *
 * ════════════════════════════════════════════════════════════════════════════
 * GLOBAL STYLE CONFIGURATION
 * ════════════════════════════════════════════════════════════════════════════
 *
 * Every color, font, spacing value, and layout measurement used across the
 * theme is defined here as a CSS custom property. Nothing is hard-coded in
 * any other CSS file — change the site's visual identity from this file alone.
 *
 * Brand direction: modern, minimal, editorial, warm, down-to-earth, confident.
 * Feels like an independent coffee shop / bookstore — not a corporate agency.
 * Olive is an ACCENT color, used sparingly — it should never dominate a page.
 *
 * @package Branch_Creative
 */

:root {

	/* ── Brand Colors ─────────────────────────────────────────────────────── */
	--color-cream:          #F4F1EA;  /* Warm off-white — primary background   */
	--color-stone:          #D9D2C4;  /* Stone — secondary background / borders */
	--color-ink:            #22231F;  /* Soft black — primary text / headings   */
	--color-olive:          #737B63;  /* Muted olive — sparing accent           */
	--color-charcoal:       #30332D;  /* Deep charcoal/dark olive — dark sections */

	/* Tints/shades derived from the brand colors (no new hues introduced) */
	--color-olive-dark:     #5C6350;
	--color-olive-light:    #E4E7DD;
	--color-charcoal-light: #3D4038;
	--color-stone-dark:     #C7BDA9;
	--color-cream-dark:     #EBE6DA;

	/* ── Compatibility Aliases ────────────────────────────────────────────────
	   Generic token names inherited from the starter theme's base.css /
	   components.css (written against a blue/orange demo palette). Mapped
	   here onto the Branch Creative palette so those shared files keep
	   working without a line-by-line rewrite. New component work should
	   prefer the named brand tokens above (--color-ink, --color-olive, etc). */
	--color-primary:        var(--color-charcoal);
	--color-primary-dark:   var(--color-ink);
	--color-primary-light:  var(--color-olive-light);
	--color-primary-hover:  var(--color-ink);

	--color-accent:         var(--color-olive);
	--color-accent-dark:    var(--color-olive-dark);
	--color-accent-light:   var(--color-olive-light);
	--color-accent-hover:   var(--color-olive-dark);

	--color-dark:           var(--color-charcoal);

	--color-gray-900:  var(--color-ink);
	--color-gray-800:  #34362F;
	--color-gray-700:  var(--color-text-muted);
	--color-gray-600:  #6E7066;
	--color-gray-500:  var(--color-text-light);
	--color-gray-400:  #A6A89C;
	--color-gray-300:  var(--color-stone-dark);
	--color-gray-200:  var(--color-stone);
	--color-gray-100:  var(--color-cream-dark);
	--color-gray-50:   var(--color-cream);

	/* ── Semantic Colors (used sparingly — form validation only) ───────────── */
	--color-success:  #4C6B4F;
	--color-error:    #8C4A3A;
	--color-info:     var(--color-olive);

	/* ── Background Colors ────────────────────────────────────────────────── */
	--color-bg:             var(--color-cream);
	--color-bg-alt:         var(--color-stone);
	--color-bg-dark:        var(--color-charcoal);
	--color-bg-overlay:     rgba(34, 35, 31, 0.55);

	/* ── Text Colors ──────────────────────────────────────────────────────── */
	--color-text:           var(--color-ink);
	--color-text-muted:     #5B5D54;
	--color-text-light:     #8A8C82;
	--color-text-inverse:   var(--color-cream);
	--color-heading:        var(--color-ink);

	/* ── Link Colors ──────────────────────────────────────────────────────── */
	--color-link:           var(--color-ink);
	--color-link-hover:     var(--color-olive);
	--color-link-visited:   var(--color-ink);

	/* ── Button Colors ────────────────────────────────────────────────────── */
	--color-btn-primary-bg:       var(--color-charcoal);
	--color-btn-primary-text:     var(--color-cream);
	--color-btn-primary-hover-bg: var(--color-ink);

	--color-btn-secondary-bg:     transparent;
	--color-btn-secondary-text:   var(--color-ink);
	--color-btn-secondary-border: var(--color-ink);

	--color-btn-accent-bg:        var(--color-olive);
	--color-btn-accent-text:      var(--color-cream);
	--color-btn-accent-hover-bg:  var(--color-olive-dark);

	--color-btn-ghost-bg:         transparent;
	--color-btn-ghost-text:       var(--color-ink);
	--color-btn-ghost-hover-bg:   var(--color-stone);

	/* ── Border Colors ────────────────────────────────────────────────────── */
	--color-border:         rgba(34, 35, 31, 0.14);
	--color-border-dark:    rgba(34, 35, 31, 0.24);
	--color-border-focus:   var(--color-olive);
	--color-border-inverse: rgba(244, 241, 234, 0.28);

	/* ── Form Colors ──────────────────────────────────────────────────────── */
	--color-input-bg:          var(--color-cream);
	--color-input-border:      rgba(34, 35, 31, 0.22);
	--color-input-border-focus: var(--color-ink);
	--color-input-text:        var(--color-ink);
	--color-input-placeholder: var(--color-text-light);
	--color-label:             var(--color-text-muted);


	/* ── Typography — Font Families ───────────────────────────────────────── */
	/* Instrument Serif: large editorial display/headings.
	   Manrope: body copy, navigation, buttons, labels, UI text.
	   Both are loaded via inc/enqueue.php (Google Fonts, preconnected). */
	--font-family-display:  'Instrument Serif', 'Georgia', serif;
	--font-family-heading:  'Instrument Serif', 'Georgia', serif;
	--font-family-base:     'Manrope', system-ui, -apple-system, sans-serif;
	--font-family-mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

	/* ── Font Sizes ───────────────────────────────────────────────────────── */
	/* Use rem — base is 16px. Display sizes use clamp() at point of use. */
	--font-size-xs:    0.75rem;    /* 12px */
	--font-size-sm:    0.875rem;   /* 14px */
	--font-size-base:  1rem;       /* 16px */
	--font-size-md:    1.125rem;   /* 18px */
	--font-size-lg:    1.25rem;    /* 20px */
	--font-size-xl:    1.5rem;     /* 24px */
	--font-size-2xl:   1.875rem;   /* 30px */
	--font-size-3xl:   2.25rem;    /* 36px */
	--font-size-4xl:   3rem;       /* 48px */
	--font-size-5xl:   3.75rem;    /* 60px */
	--font-size-6xl:   4.5rem;     /* 72px */
	--font-size-7xl:   5.5rem;     /* 88px */

	/* Fluid display sizes for large editorial headings */
	--font-size-display-lg: clamp(2.75rem, 3vw + 2rem, 5.5rem);
	--font-size-display-md: clamp(2.25rem, 2.4vw + 1.6rem, 4rem);
	--font-size-display-sm: clamp(1.875rem, 1.6vw + 1.4rem, 2.75rem);

	/* ── Font Weights ─────────────────────────────────────────────────────── */
	--font-weight-light:    300;
	--font-weight-normal:   400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;
	--font-weight-black:    900;

	/* ── Line Heights ─────────────────────────────────────────────────────── */
	--line-height-tight:    1.08;
	--line-height-snug:     1.25;
	--line-height-normal:   1.5;
	--line-height-relaxed:  1.7;
	--line-height-loose:    2;

	/* ── Letter Spacing ───────────────────────────────────────────────────── */
	--letter-spacing-tight:  -0.02em;
	--letter-spacing-normal:  0;
	--letter-spacing-wide:    0.03em;
	--letter-spacing-wider:   0.08em;
	--letter-spacing-widest:  0.14em;  /* eyebrow labels */


	/* ── Spacing Scale ────────────────────────────────────────────────────── */
	/* Multiplier of 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-28:  7rem;      /* 112px */
	--space-32:  8rem;      /* 128px */
	--space-36:  9rem;      /* 144px */
	--space-40:  10rem;     /* 160px */

	/* Section padding — the primary vertical-rhythm control for the whole site.
	   Generous by design: ~140px desktop, scaling down cleanly on smaller
	   viewports. See base.css for the responsive step-down. Never compress a
	   section just because it holds little content. */
	--section-padding-y:     clamp(4rem, 4vw + 3rem, 8.75rem);   /* ~64px → 140px */
	--section-padding-y-lg:  clamp(5rem, 6vw + 3rem, 10rem);     /* larger hero/dark sections */
	--section-padding-x:     var(--space-6);


	/* ── Border Radius ────────────────────────────────────────────────────── */
	/* Kept small and intentional — this brand avoids the "rounded SaaS card"
	   look. Use --radius-none on anything meant to feel architectural/editorial. */
	--radius-none:   0;
	--radius-sm:     2px;
	--radius-base:   3px;
	--radius-md:     4px;
	--radius-lg:     6px;
	--radius-xl:     8px;
	--radius-2xl:    10px;
	--radius-full:   9999px;  /* reserved for tags/dots only — not buttons or cards */

	/* ── Container Widths ─────────────────────────────────────────────────── */
	--container-sm:    640px;
	--container-md:    768px;
	--container-lg:    1024px;
	--container-xl:    1280px;
	--container-2xl:   1536px;
	--container-max:   1320px;  /* ← Default site container width */
	--container-px:    var(--space-6);       /* Horizontal padding inside container */

	/* Wide and full-width breakout widths (Gutenberg) */
	--layout-wide:      1520px;
	--layout-full:      100%;

	/* ── Breakpoints (reference only — not usable inside CSS custom properties,
	     kept here as the single documented source of truth for media queries) ── */
	/* --bp-sm: 480px, --bp-md: 640px, --bp-lg: 768px, --bp-xl: 1024px, --bp-2xl: 1280px */


	/* ── Box Shadows ──────────────────────────────────────────────────────── */
	/* Used extremely sparingly — this brand avoids the "floating card" look.
	   Prefer borders/dividers over shadows for separation. */
	--shadow-sm:    none;
	--shadow-base:  none;
	--shadow-md:    0 8px 24px rgba(34, 35, 31, 0.08);
	--shadow-lg:    0 16px 40px rgba(34, 35, 31, 0.10);
	--shadow-xl:    0 24px 56px rgba(34, 35, 31, 0.12);
	--shadow-2xl:   0 32px 72px rgba(34, 35, 31, 0.14);
	--shadow-inner: inset 0 1px 2px rgba(34, 35, 31, 0.06);
	--shadow-none:  none;


	/* ── Transitions ──────────────────────────────────────────────────────── */
	--transition-fast:    150ms ease;
	--transition-base:    220ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow:    360ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slower:  600ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Common transition shorthand */
	--transition-colors:  color var(--transition-base),
	                      background-color var(--transition-base),
	                      border-color var(--transition-base);
	--transition-shadow:  box-shadow var(--transition-base);
	--transition-transform: transform var(--transition-base);


	/* ── Form Sizing ──────────────────────────────────────────────────────── */
	--input-height:       3.25rem;  /* 52px — comfortable, editorial touch target */
	--input-padding-x:    var(--space-4);
	--input-padding-y:    var(--space-3);
	--input-border-width: 1px;
	--input-border-radius: var(--radius-sm);
	--input-font-size:    var(--font-size-base);


	/* ── Header ───────────────────────────────────────────────────────────── */
	--header-height:           92px;
	--header-height-scrolled:  72px;
	--header-bg:               var(--color-stone);
	--header-text:             var(--color-ink);
	--header-border:           var(--color-border);
	--header-logo-max-height:  34px;
	--header-z:                100;

	/* Mobile nav breakpoint — header switches to hamburger below this */
	--nav-mobile-breakpoint: 900px;

	/* ── Footer ───────────────────────────────────────────────────────────── */
	--footer-bg:     var(--color-charcoal);
	--footer-text:   rgba(244, 241, 234, 0.72);
	--footer-link:   rgba(244, 241, 234, 0.72);
	--footer-link-hover: var(--color-cream);
	--footer-border: rgba(244, 241, 234, 0.14);
	--footer-padding-y: var(--space-24);


	/* ── Z-Index Scale ────────────────────────────────────────────────────── */
	--z-below:    -1;
	--z-base:      0;
	--z-raised:    10;
	--z-dropdown:  50;
	--z-sticky:    100;
	--z-overlay:   200;
	--z-modal:     300;
	--z-toast:     400;
}