/* ============================================================
   variables.css — Softly Design System for Ank Jyotish
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Reenie+Beanie&display=swap');

:root {
  /* ── Softly Palette ───────────────────────────────────────── */
  --bg:         #FDFCF8;
  --bg-alt:     #F7F5F0;
  --sage:       #E8EFE8;
  --lavender:   #EFEDF4;
  --coral:      #FFB7B2;
  --coral-dark: #F5908A;
  --coral-soft: #FFE4E1;
  --dark:       #292524;
  --muted:      #78716C;

  /* ── Stone scale ──────────────────────────────────────────── */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --white:     #FFFFFF;

  /* ── Semantic aliases (used by CSS + render-report.js) ───── */
  --color-bg:          var(--bg);
  --color-surface:     var(--stone-50);
  --color-surface-2:   var(--stone-100);
  --color-surface-3:   var(--stone-200);
  --color-border:      var(--stone-200);
  --color-border-soft: var(--stone-100);
  --color-text:        var(--dark);
  --color-text-muted:  var(--muted);
  --color-text-dim:    var(--stone-400);
  --color-primary:     var(--coral);
  --color-primary-dark: var(--coral-dark);
  --color-accent:      var(--coral-dark);

  /* ── Status ──────────────────────────────────────────────── */
  --color-positive:    #4A9E80;
  --color-positive-bg: rgba(74,158,128,0.08);
  --color-negative:    #D45D5D;
  --color-negative-bg: rgba(212,93,93,0.08);
  --color-warning:     #C4832A;
  --color-warning-bg:  rgba(196,131,42,0.08);
  --color-neutral:     var(--stone-500);
  --color-neutral-bg:  var(--stone-100);

  /* ── Planet colours — warm, desaturated ──────────────────── */
  --planet-1: #D4882A;  /* Sun */
  --planet-2: #7A9DB8;  /* Moon */
  --planet-3: #C4A020;  /* Jupiter */
  --planet-4: #7B6FAE;  /* Rahu */
  --planet-5: #4A8E6A;  /* Mercury */
  --planet-6: #D4728A;  /* Venus */
  --planet-7: #A07848;  /* Ketu */
  --planet-8: #4A6EB8;  /* Saturn */
  --planet-9: #C04050;  /* Mars */

  /* ── Typography ──────────────────────────────────────────── */
  --font-primary: 'Outfit', 'Segoe UI', sans-serif;
  --font-accent:  'Reenie Beanie', cursive;
  --font-number:  'Outfit', sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Outfit', sans-serif;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;

  /* ── Border radius ───────────────────────────────────────── */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-xl:   2rem;
  --r-2xl:  3rem;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-soft:  0 4px 20px -2px rgba(41,37,36,0.06);
  --shadow-md:    0 8px 32px -4px rgba(41,37,36,0.09);
  --shadow-lg:    0 16px 48px -8px rgba(41,37,36,0.11);
  --shadow-coral: 0 8px 24px -4px rgba(255,183,178,0.45);
  --shadow-card:  0 4px 20px -2px rgba(41,37,36,0.06);
  --shadow-card-hover: 0 12px 40px -4px rgba(41,37,36,0.12);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tr-fast:     150ms ease;
  --tr-med:      300ms ease;
  --tr-slow:     600ms var(--ease-out);
  --tr-spring:   400ms var(--ease-spring);

  /* ── Gradients ───────────────────────────────────────────── */
  --grad-card:    linear-gradient(145deg, #FFFFFF, #FDFCF8);
  --grad-hero:    linear-gradient(180deg, #FDFCF8 0%, #F7F5F0 100%);
  --grad-cosmic:  linear-gradient(135deg, var(--coral) 0%, #C4832A 100%);
  --grad-accent:  linear-gradient(135deg, var(--coral), var(--coral-dark));
}