/*
 * variables.css — VireonAI / Meli Coffee & More
 * Canonical source for all CSS custom properties.
 *
 * Theme: meli-coffee v2.0.0
 * Load order: enqueued FIRST via wp_enqueue_style('meli-variables'),
 * then overridden by meli_dynamic_css() inline styles injected by the
 * WordPress Customizer (functions.php → meli_dynamic_css()).
 *
 * To adapt this theme for another brand:
 *   1. Change the Brand Colors block below.
 *   2. Optionally change Typography.
 *   3. All components pick up changes automatically.
 */

:root {

  /* ── Brand Colors ──────────────────────────────────────────────────── */
  /* Primary  (overrideable via Customizer → Culori → Culoare Primară)   */
  --color-primary:     #4A2C2A;
  --color-secondary:   #C9A03D;
  --color-background:  #FDF8F0;
  --color-text:        #2C2C2C;
  --color-footer-bg:   #2C2C2C;

  /* Derived shades — computed from brand colors */
  --color-primary-light:   #6B4240;
  --color-primary-dark:    #2E1A18;
  --color-secondary-light: #D9B55A;
  --color-secondary-dark:  #A07F25;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F5EDE0;
  --color-border:          #E0D0BC;
  --color-muted:           #8A6E5F;
  --color-success:         #3D8B40;
  --color-warning:         #E67E22;
  --color-error:           #C0392B;
  --color-info:            #2980B9;

  /* ── Typography ────────────────────────────────────────────────────── */
  /* Overrideable via Customizer → Tipografie                            */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Courier New', monospace;

  /* Font sizes (fluid scale) */
  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Font weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing ───────────────────────────────────────────────────────── */
  --space-xs:  .25rem;    /* 4px  */
  --space-sm:  .5rem;     /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4.5rem;    /* 72px */
  --space-4xl: 6rem;      /* 96px */

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container:  1200px;
  --section-py: 5rem;

  /* ── Shape ─────────────────────────────────────────────────────────── */
  /* Overrideable via Customizer → Formă & Spațiere                      */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(74,44,42,.06);
  --shadow-sm: 0 2px 8px rgba(74,44,42,.10);
  --shadow-md: 0 4px 20px rgba(74,44,42,.14);
  --shadow-lg: 0 8px 40px rgba(74,44,42,.18);
  --shadow-xl: 0 16px 60px rgba(74,44,42,.22);

  /* ── Transitions ───────────────────────────────────────────────────── */
  --ease:          cubic-bezier(.4,0,.2,1);
  --ease-in:       cubic-bezier(.4,0,1,1);
  --ease-out:      cubic-bezier(0,0,.2,1);
  --ease-bounce:   cubic-bezier(.34,1.56,.64,1);
  --transition:    .22s var(--ease);
  --transition-lg: .35s var(--ease);

  /* ── Z-index layers ─────────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-loader:   500;

  /* ── Component tokens (derived from primitives above) ──────────────── */
  --btn-radius:        var(--radius-pill);
  --card-radius:       var(--radius-lg);
  --input-radius:      var(--radius-md);
  --badge-radius:      var(--radius-pill);
  --modal-radius:      var(--radius-xl);

  --btn-transition:    var(--transition);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* ── Brand identity helpers ─────────────────────────────────────────── */
  --brand-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --brand-gradient-subtle: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-background) 100%);

}

/* ── Dark mode overrides ─────────────────────────────────────────────── */
.dark-mode,
[data-theme="dark"] {
  --color-background:  #1A1008;
  --color-surface:     #2A1A10;
  --color-surface-alt: #342010;
  --color-text:        #F0E6D8;
  --color-border:      #5A3A2A;
  --color-muted:       #A08070;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 4px 20px rgba(0,0,0,.40);
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  :root {
    --color-background: #fff;
    --color-text:       #000;
    --shadow-sm: none;
    --shadow-md: none;
  }
}