/**
 * Wallcano Tiles Ltd - Design Tokens & Variables
 * Strictly matched to OnePack (casethemes.net) Architectural Aesthetic
 */
:root {
  /* OnePack Exact Signature Color Palette */
  --primary-color: #B79B6F;         /* Signature OnePack Champagne Gold */
  --primary-hover: #A88959;         /* OnePack Darker Bronze */
  --secondary-color: #A88959;
  --primary-rgb: 183, 155, 111;
  --secondary-rgb: 168, 137, 89;

  /* OnePack Canvas & Neutral Theme */
  --body_bg-color: #FFFFFF;        /* OnePack Primary Canvas: Crisp White */
  --body_bg-stone: #F8F7F4;        /* Soft Warm Architectural Alabaster */
  --four-color: #F5F5F5;           /* OnePack Subtle Section Tone */
  --body-color: #666666;           /* OnePack Muted Body Text */
  --body-color-rgb: 102, 102, 102;
  --third-color: #111111;          /* OnePack Stark Black Headings */
  --third-color-rgb: 17, 17, 17;

  /* Dark Statement Colors (for CTA & Portal Mockup) */
  --dark-bg: #0D1117;              /* Deep Slate / Obsidian */
  --dark-surface: #161D26;         /* Dark Card Surface */
  --dark-800: #1E293B;             /* Slate input background */
  --dark-border: rgba(255, 255, 255, 0.08);

  /* Subtle Borders & Divider Lines */
  --border-light: #EBEBEB;
  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-gold: rgba(183, 155, 111, 0.35);

  /* Typography */
  --font-heading: 'Satoshi', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Grotesk', monospace;

  /* Shadows (OnePack Signature Elevation) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 22px 50px rgba(0, 0, 0, 0.09);
  --shadow-gold: 0 12px 30px rgba(183, 155, 111, 0.25);

  /* Layout */
  --container-max-width: 1320px;
  --container-padding: 24px;
  --header-height: 90px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
}