/* ============================================================
   VARA ORGANICS — Design Tokens
   Petal Color Palette + Luxury Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand Colors ─────────────────────────────── */
  --color-primary:       #1D5C4E;
  --color-primary-dark:  #133D34;
  --color-primary-light: #2E8B72;
  --color-primary-pale:  #E8F5F0;

  /* ── Petal Colors ─────────────────────────────── */
  --color-petal:         #F7C5C5;
  --color-petal-deep:    #D4778A;
  --color-blush:         #FCE4EC;
  --color-blush-dark:    #F48FB1;

  /* ── Earth Accents ────────────────────────────── */
  --color-sage:          #8BB0A0;
  --color-sage-light:    #C8DDD6;
  --color-marigold:      #F0A500;
  --color-marigold-light:#FFF3CD;

  /* ── Neutrals ─────────────────────────────────── */
  --color-cream:         #FDFAF6;
  --color-cream-alt:     #F6F0E8;
  --color-sand:          #EDE3D8;
  --color-border:        #E8E0D8;
  --color-border-dark:   #D0C8BF;

  /* ── Text ─────────────────────────────────────── */
  --color-text:          #1A1A1A;
  --color-text-muted:    #6E7B74;
  --color-text-light:    #9AA89F;
  --color-white:         #FFFFFF;

  /* ── Status ───────────────────────────────────── */
  --color-success:       #2D8B5A;
  --color-warning:       #E8963C;
  --color-error:         #D44B4B;
  --color-info:          #4A90A4;

  /* ── Admin ────────────────────────────────────── */
  --color-admin-bg:      #F4F6F5;
  --color-admin-sidebar: #1A3D33;
  --color-admin-card:    #FFFFFF;

  /* ── Typography ───────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;

  /* ── Font Sizes ───────────────────────────────── */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
  --text-6xl:   3.75rem;   /* 60px */
  --text-7xl:   4.5rem;    /* 72px */

  /* ── Spacing ──────────────────────────────────── */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* ── Border Radius ────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12);

  /* ── Transitions ──────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ───────────────────────────────────── */
  --container-max:  1280px;
  --container-pad:  var(--space-6);
  --nav-height:     72px;
  --sidebar-width:  260px;
}

/* Responsive font scale */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;
    --text-7xl: 3.5rem;
    --container-pad: var(--space-4);
  }
}