/* ============================================================
   AiDoesSEO — Design Tokens
   ============================================================ */

:root {
  /* ── Brand Colours ── */
  --mint:          #00E5A0;
  --mint-dim:      #00C88C;
  --article-link:  var(--mint);
  --mint-glow:     rgba(0, 229, 160, 0.15);
  --mint-glow-md:  rgba(0, 229, 160, 0.25);

  /* ── Backgrounds ── */
  --bg-base:       #0A0A0F;
  --bg-surface:    #111118;
  --bg-card:       #16161F;
  --bg-elevated:   #1C1C28;
  --bg-hover:      #222232;

  /* ── Borders ── */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-mint:   rgba(0, 229, 160, 0.30);

  /* ── Text ── */
  --text-primary:   #F0F0F8;
  --text-secondary: #9898B0;
  --text-muted:     #60607A;
  --text-inverse:   #0A0A0F;

  /* ── Status Colours ── */
  --success:        #00E5A0;
  --success-bg:     rgba(0, 229, 160, 0.10);
  --warning:        #F5A623;
  --warning-bg:     rgba(245, 166, 35, 0.10);
  --error:          #FF4D6D;
  --error-bg:       rgba(255, 77, 109, 0.10);
  --info:           #4D9EFF;
  --info-bg:        rgba(77, 158, 255, 0.10);

  /* ── Typography ── */
  --font-sans:  'Cabinet Grotesk', 'General Sans', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --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 */

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ── 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;

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

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-mint: 0 0 24px rgba(0, 229, 160, 0.20);

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

  /* ── Z-Index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-fab:      600;

  /* ── Layout ── */
  --sidebar-width:      240px;
  --sidebar-collapsed:  64px;
  --topbar-height:      60px;
  --content-max-width:  1280px;
}

/* ── Light Theme (landing page only) ─────────────────────── */
body.light-theme {
  --bg-base:         #F7F7F5;
  --bg-surface:      #EDEDEB;
  --bg-card:         #FFFFFF;
  --bg-elevated:     #F2F2F0;
  --bg-hover:        #E6E6E4;
  --border:          rgba(0, 0, 0, 0.07);
  --border-strong:   rgba(0, 0, 0, 0.13);
  --border-mint:     rgba(0, 180, 120, 0.35);
  --text-primary:    #111111;
  --text-secondary:  #5A5A68;
  --text-muted:      #9696A6;
  /* text-inverse stays #0A0A0F — correct for btn-primary (dark text on mint bg) */
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:       0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-mint:     0 0 28px rgba(0, 200, 140, 0.28);
  --article-link:    #00A87A;
}