/* ==========================================================================
   J2 FINE FURNITURE — design tokens
   Single source of truth for colour, type, spacing, radii and motion.
   Load first; every other stylesheet depends on this file.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour
     Green carries the brand identity. Brown carries the material story.
     Cream and warm off-white dominate the background so photography reads
     as the loudest element on every page. */
  --color-primary: #263b2a;
  --color-primary-dark: #18271c;
  --color-primary-soft: #e8ede7;
  --color-primary-ink: #1d2f22;

  --color-secondary: #8a6240;
  --color-secondary-dark: #68472e;
  --color-secondary-soft: #f1e9e0;

  --color-background: #f7f4ef;
  --color-surface: #ffffff;
  --color-surface-alt: #eee8df;
  --color-surface-sunk: #f1ece4;

  --color-text: #222222;
  /* Darker than a literal #6f6f6f so muted copy clears WCAG AA (5.8:1) on both
     --color-background and --color-surface-alt. */
  --color-text-muted: #56544f;
  --color-text-faint: #7c7973;
  --color-text-inverse: #f7f4ef;

  --color-border: #ded8cf;
  --color-border-strong: #cdc5b8;

  --color-success: #3f6b48;
  --color-success-soft: #e8f0e9;
  --color-danger: #a94442;
  --color-danger-soft: #f9edec;
  --color-warning: #8a6a1f;
  --color-warning-soft: #f7f0dd;
  --color-whatsapp: #1faa54;
  --color-whatsapp-dark: #178c45;

  /* Tints used behind dark sections and photo overlays */
  --color-veil: rgba(24, 39, 28, 0.72);
  --color-veil-soft: rgba(24, 39, 28, 0.45);
  --color-veil-line: rgba(247, 244, 239, 0.16);

  /* --------------------------------------------------------------- shadows */
  --shadow-soft: 0 8px 25px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.1);
  --shadow-raised: 0 4px 14px rgba(34, 34, 34, 0.08);
  --shadow-menu: 0 18px 44px -22px rgba(24, 39, 28, 0.4);

  /* ---------------------------------------------------------------- radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------ typography */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --text-h1: clamp(2.125rem, 1.35rem + 3.3vw, 4rem);      /* 34 → 64px */
  --text-h2: clamp(2rem, 1.45rem + 2.3vw, 2.625rem);      /* 32 → 42px */
  --text-h3: clamp(1.375rem, 1.16rem + 0.9vw, 1.75rem);   /* 22 → 28px */
  --text-h4: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
  --text-body: 1.0625rem;                                  /* 17px */
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-eyebrow: 0.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --measure: 700px;

  /* --------------------------------------------------------------- layout */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: 16px;
  --header-height: 68px;
  --section-y: clamp(56px, 7vw, 112px);
  --section-y-tight: clamp(44px, 5vw, 72px);
  --tap-target: 48px;

  /* --------------------------------------------------------------- motion */
  --transition: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --transition-slow: 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --focus-ring: 0 0 0 3px rgba(38, 59, 42, 0.22);
}

/* Legacy aliases — kept so any component still referencing the older token
   names resolves to the new palette instead of an undefined value. */
:root {
  --j2-cream: var(--color-background);
  --j2-sand: var(--color-surface-alt);
  --j2-clay: var(--color-border);
  --j2-white: var(--color-surface);
  --j2-ink: var(--color-primary-dark);
  --j2-ink-soft: var(--color-text-muted);
  --j2-ink-mute: var(--color-text-faint);
  --j2-line: var(--color-border);
  --j2-line-soft: var(--color-border);
  --j2-wood: var(--color-secondary);
  --j2-wood-dark: var(--color-secondary-dark);
  --j2-forest: var(--color-primary);
  --j2-wa: var(--color-whatsapp);
  --j2-danger: var(--color-danger);
  --j2-success: var(--color-success);
  --j2-font-display: var(--font-body);
  --j2-font-body: var(--font-body);
  --j2-radius-sm: var(--radius-sm);
  --j2-radius: var(--radius-md);
  --j2-radius-lg: var(--radius-lg);
  --j2-shadow-sm: var(--shadow-raised);
  --j2-shadow: var(--shadow-soft);
  --j2-shadow-lg: var(--shadow-hover);
  --j2-container: var(--container);
  --j2-gutter: var(--gutter);
  --j2-header-height: var(--header-height);
  --j2-transition: var(--transition);
}