/* ==========================================================================
   CREAMSON FOODS — DESIGN SYSTEM MASTER TOKENS & VARIABLES
   Crafted with Excellence, Served with Quality
   Aesthetic: Luxury Organic Nutraceutical & Healthy Foods
   ========================================================================== */

/* --- Google Fonts Import (Robinson-Style Manufacturer Typography) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Oswald:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  /* ==========================================================================
     1. COLOR PALETTE
     ========================================================================== */
  
  /* --- Primary Brand Forest Green (Derived from Official Logo) --- */
  --color-forest: #144A29;               /* Signature British/Forest Green */
  --color-forest-dark: #0A2615;          /* Deepest shade for contrast */
  --color-forest-deep: #0D351D;          /* High-authority container background */
  --color-forest-light: #1C6338;         /* Interactive button hover */
  --color-forest-surface: #E8F4EC;       /* Ultra-soft green tint surface */
  --color-forest-glow: rgba(20, 74, 41, 0.28);

  /* --- Vibrant Leaf Green (Vitality, Freshness, Health) --- */
  --color-leaf: #2EA355;                 /* Fresh Organic Leaf Accent */
  --color-leaf-dark: #228242;            /* Active & border states */
  --color-leaf-light: #E4F7EC;           /* Badge & pill background */
  --color-leaf-glow: rgba(46, 163, 85, 0.4);

  /* --- Warm Peanut Gold & Roasted Amber (Natural Nut Tones) --- */
  --color-amber: #D49B4B;                /* Roasted Honey Nut Gold */
  --color-amber-dark: #B57F32;           /* Deep border & icon color */
  --color-amber-light: #FCF4E8;          /* Light amber pill fill */
  --color-amber-glow: rgba(212, 155, 75, 0.38);

  /* --- Gourmet Cocoa & Berry Accents --- */
  --color-cocoa: #52311E;                /* Rich Dark Chocolate */
  --color-cocoa-light: #F7EFE9;
  --color-berry: #D9384E;                /* Strawberry & Cranberry Accent */
  --color-berry-light: #FDECEF;

  /* --- Functional & Semantic Colors --- */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #0284C7;

  /* ==========================================================================
     2. SURFACES & CANVAS
     ========================================================================== */
  
  --bg-canvas: #FAF7F2;                  /* Signature Warm Cream Canvas */
  --bg-canvas-alt: #F4EFE6;              /* Alternating section background */
  --bg-surface: #FFFFFF;                 /* Solid elevated surface */
  --bg-surface-elevated: #FFFFFF;        /* Floating card surface */
  --bg-surface-subtle: #F0EAE1;          /* Soft borders & input fills */
  --bg-surface-glass: rgba(255, 255, 255, 0.85); /* Glassmorphic card */
  --bg-surface-glass-tinted: rgba(250, 247, 242, 0.9);
  --bg-dark-contrast: #0B2515;           /* Midnight Forest footer & dark sections */
  --bg-dark-surface: #10341E;            /* Dark card surface */

  /* ==========================================================================
     3. TYPOGRAPHY SYSTEM
     ========================================================================== */
  
  /* Families — Robinson-Style Heavy Manufacturer Typography */
  --font-heading: 'Oswald', sans-serif;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-badge: 'Montserrat', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Type Scale */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-md: 1.125rem;      /* 18px */
  --text-lg: 1.25rem;       /* 20px */
  --text-xl: 1.5rem;        /* 24px */
  --text-2xl: 2rem;         /* 32px */
  --text-3xl: 2.5rem;       /* 40px */
  --text-4xl: 3.25rem;      /* 52px */
  --text-5xl: 4.25rem;      /* 68px */

  /* Text Colors */
  --text-primary: #121A14;               /* Highest legibility near-black with organic depth */
  --text-secondary: #3B4B3F;             /* Body copy contrast */
  --text-muted: #66786B;                 /* Secondary descriptions & subtitles */
  --text-subtle: #94A598;                /* Minor metadata */
  --text-white: #FFFFFF;                 /* On dark forest surfaces */
  --text-leaf: #2EA355;
  --text-amber: #D49B4B;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ==========================================================================
     4. BORDERS & SHADOWS (Luxury Multi-layer Depth)
     ========================================================================== */
  
  --border-light: rgba(20, 74, 41, 0.08);
  --border-medium: rgba(20, 74, 41, 0.15);
  --border-strong: rgba(20, 74, 41, 0.28);
  --border-leaf: rgba(46, 163, 85, 0.4);
  --border-amber: rgba(212, 155, 75, 0.4);
  --border-glass: rgba(255, 255, 255, 0.6);
  --border-white-faint: rgba(255, 255, 255, 0.15);

  /* Shadows */
  --shadow-xs: 0 2px 6px rgba(20, 74, 41, 0.04);
  --shadow-sm: 0 4px 14px rgba(20, 74, 41, 0.06);
  --shadow-md: 0 10px 30px -4px rgba(20, 74, 41, 0.08), 0 3px 8px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 45px -8px rgba(20, 74, 41, 0.12), 0 6px 16px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 30px 70px -12px rgba(20, 74, 41, 0.18), 0 10px 24px -6px rgba(0, 0, 0, 0.06);
  --shadow-glow-leaf: 0 0 35px rgba(46, 163, 85, 0.35);
  --shadow-glow-amber: 0 0 35px rgba(212, 155, 75, 0.35);
  --shadow-glow-forest: 0 14px 40px rgba(20, 74, 41, 0.3);

  /* ==========================================================================
     5. GRADIENTS
     ========================================================================== */
  
  --gradient-forest: linear-gradient(135deg, #144A29 0%, #0A2615 100%);
  --gradient-forest-rich: linear-gradient(145deg, #1C6338 0%, #0E351D 100%);
  --gradient-leaf: linear-gradient(135deg, #38B862 0%, #238944 100%);
  --gradient-amber: linear-gradient(135deg, #E6AC59 0%, #C4872D 100%);
  --gradient-gold-sheen: linear-gradient(90deg, transparent, rgba(212, 155, 75, 0.25), transparent);
  --gradient-cream-card: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
  --gradient-hero-glow: radial-gradient(circle at 50% 30%, rgba(46, 163, 85, 0.12) 0%, transparent 70%);

  /* ==========================================================================
     6. TRANSITIONS & TIMING
     ========================================================================== */
  
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  --transition-fast: 0.18s var(--ease-smooth);
  --transition-base: 0.32s var(--ease-smooth);
  --transition-slow: 0.55s var(--ease-smooth);
  --transition-spring: 0.45s var(--ease-spring);

  /* ==========================================================================
     7. RADIUS & BLUR
     ========================================================================== */
  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --blur-glass: blur(16px);
  --blur-glass-heavy: blur(28px);

  /* ==========================================================================
     8. LAYOUT & DIMENSIONS
     ========================================================================== */
  
  --container-max-width: 1380px;
  --container-narrow-width: 1100px;
  --header-height: 86px;
  --topbar-height: 40px;
  --section-spacing-desktop: 100px;
  --section-spacing-mobile: 60px;
}