/* =========================================================================
   INDIAGRAM — DESIGN TOKENS  (single source of truth)
   Load this FIRST, before components.css and mobile.css.
   Identity: saffron #FB5F14 · warm-cream ground · India-green secondary.
   Faces: Fraunces (display) · Sora (UI/body) · JetBrains Mono (numeric).
   Spec: _BRAND_PLAN.md §1.1–1.3.
   ========================================================================= */

/* ---------- Fonts — ONE request, deduplicated ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* =========================================================================
   1. LIGHT THEME  (marketing default — index, smm-if-light, blog, tools)
   ========================================================================= */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:          #FEF6F0;   /* paper cream — India-warm ground */
  --surface:     #FFFFFF;
  --surface-2:   #FDF0E6;   /* warm raised panel */
  --surface-3:   #FAE8D8;   /* deeper warm tint */
  --border:      #F0DDD0;   /* warm hairline */
  --border-2:    #E5D3C6;

  /* Brand — saffron */
  --brand:       #FB5F14;   /* primary CTA, links, active */
  --brand-dark:  #E24E00;   /* hover / pressed */
  --brand-l:     #FF8A4C;   /* saffron tint (light-on-dark contexts) */
  --brand-dim:   rgba(251,95,20,0.08);   /* active-row / chip tint */
  --brand-glow:  rgba(251,95,20,0.28);   /* focus ring / hero glow */

  /* Secondary — India green + reserved WhatsApp green */
  --accent:      #138808;
  --accent-dark: #046A38;
  --convert:     #25D366;   /* WhatsApp CTA only */

  /* Text */
  --ink:         #231F20;   /* primary text = brand ink */
  --text-2:      #5A5150;
  --muted:       #7A6F6F;
  --muted-2:     #BFBFBF;
  --on-brand:    #FFFFFF;   /* text on saffron — 700 weight, >=15px only */

  /* Semantic */
  --success:     #16A34A;
  --warn:        #F59E0B;
  --danger:      #EF4444;
  --ai:          #8B5CF6;   /* the ONE purple, AI-Lab only */

  /* Tricolor accent (decorative dividers / hero rule) */
  --grad-tricolor: linear-gradient(90deg,#FF9933 0%,#FFFFFF 50%,#138808 100%);

  /* ---------- Spacing — 4px base scale ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;   /* content cards */
  --r-xl:   20px;
  --r-2xl:  24px;   /* modals / sheets */
  --r-full: 9999px; /* pills / buttons */

  /* ---------- Shadows — warm-tinted ---------- */
  --shadow-xs:    0 1px 2px rgba(35,31,32,.06);
  --shadow-sm:    0 2px 8px rgba(35,31,32,.08);
  --shadow-md:    0 6px 20px rgba(35,31,32,.10);
  --shadow-lg:    0 16px 40px rgba(35,31,32,.14);
  --shadow-brand: 0 6px 24px rgba(251,95,20,.35);

  /* ---------- Layout ---------- */
  --container:      1200px;
  --container-pad:  24px;   /* 16px on mobile — see mobile.css */
  --section-y:      80px;   /* 56px on mobile */
}

/* =========================================================================
   2. DARK THEME  (SMM panel + app/* — warm dark, NOT cool blue-black)
   ========================================================================= */
[data-theme="dark"],
.dark {
  color-scheme: dark;

  --bg:          #1A1618;
  --surface:     #231F20;
  --surface-2:   #2C2728;
  --surface-3:   #383233;
  --border:      #3A3335;
  --border-2:    #4F4444;

  --brand:       #FB5F14;   /* fill stays saffron */
  --brand-dark:  #E24E00;
  --brand-l:     #FF8A4C;   /* saffron tint for text/labels/icons on dark */
  --brand-dim:   rgba(251,95,20,0.14);
  --brand-glow:  rgba(251,95,20,0.32);

  --accent:      #138808;
  --accent-dark: #046A38;

  --ink:         #FBF3EC;   /* warm near-white */
  --text-2:      #C9BDB4;
  --muted:       #9A8F86;
  --muted-2:     #7A6F6F;
  --on-brand:    #FFFFFF;

  --shadow-xs:    0 1px 2px rgba(0,0,0,.40);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.45);
  --shadow-md:    0 6px 20px rgba(0,0,0,.50);
  --shadow-lg:    0 16px 40px rgba(0,0,0,.60);
  --shadow-brand: 0 6px 24px rgba(251,95,20,.40);
}

/* =========================================================================
   3. GLOBAL PRIMITIVES  (one each — no duplicates across the property)
   ========================================================================= */

/* Text selection */
::selection {
  background: var(--brand-dim);
  color: var(--brand-dark);
}

/* Keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
  background-clip: padding-box;
}