/* ============================================================
   Timora Website — Design Tokens
   Extends the extension's design-system.css for the web
   ============================================================ */

/* ── Color Tokens (Light Mode Default) ──────────────────────── */
:root {
  /* Backgrounds */
  --color-bg-primary:    #F8F9FA;
  --color-bg-secondary:  #FFFFFF;
  --color-bg-tertiary:   #F1F3F5;
  --color-bg-hover:      #E9ECEF;
  --color-bg-active:     #DEE2E6;

  /* Borders */
  --color-border-primary: #DEE2E6;
  --color-border-subtle:  #E9ECEF;

  /* Text */
  --color-text-primary:   #1A1B1E;
  --color-text-secondary: #6B7280;
  --color-text-tertiary:  #9CA3AF;

  /* Accent — Green (Timora brand) */
  --color-accent-green:       #22C55E;
  --color-accent-green-dark:  #16A34A;
  --color-accent-green-soft:  rgba(34, 197, 94, 0.12);

  /* Accent — Blue */
  --color-accent-blue:        #3B82F6;
  --color-accent-blue-dark:   #2563EB;
  --color-accent-blue-soft:   rgba(59, 130, 246, 0.12);

  /* Accent — Purple */
  --color-accent-purple:      #8B5CF6;
  --color-accent-purple-dark: #7C3AED;
  --color-accent-purple-soft: rgba(139, 92, 246, 0.12);

  /* Accent — Red */
  --color-accent-red:         #EF4444;
  --color-accent-red-dark:    #DC2626;
  --color-accent-red-soft:    rgba(239, 68, 68, 0.12);

  /* Accent — Amber */
  --color-accent-amber:       #F59E0B;
  --color-accent-amber-soft:  rgba(245, 158, 11, 0.12);

  /* Accent — Pink */
  --color-accent-pink:        #EC4899;
  --color-accent-pink-soft:   rgba(236, 72, 153, 0.12);

  /* Web-specific */
  --color-glow-green:         rgba(34, 197, 94, 0.07);
  --color-glow-green-strong:  rgba(34, 197, 94, 0.15);
  --color-glow-green-hero:    rgba(34, 197, 94, 0.05);
}

/* ── Dark Mode ───────────────────────────────────────────────── */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:    #0F0F12;
    --color-bg-secondary:  #18181F;
    --color-bg-tertiary:   #1E1E28;
    --color-bg-hover:      #252530;
    --color-bg-active:     #2C2C3A;

    --color-border-primary: #2A2A38;
    --color-border-subtle:  #222230;

    --color-text-primary:   #E8E8F0;
    --color-text-secondary: #9CA3AF;
    --color-text-tertiary:  #6B7280;

    --color-accent-green-soft:  rgba(34, 197, 94, 0.15);
    --color-accent-blue-soft:   rgba(59, 130, 246, 0.15);
    --color-accent-purple-soft: rgba(139, 92, 246, 0.15);
    --color-accent-red-soft:    rgba(239, 68, 68, 0.15);
    --color-accent-amber-soft:  rgba(245, 158, 11, 0.15);
    --color-accent-pink-soft:   rgba(236, 72, 153, 0.15);

    --color-glow-green:         rgba(34, 197, 94, 0.08);
    --color-glow-green-strong:  rgba(34, 197, 94, 0.18);
    --color-glow-green-hero:    rgba(34, 197, 94, 0.06);
  }
}

[data-theme="dark"] {
  --color-bg-primary:    #0F0F12;
  --color-bg-secondary:  #18181F;
  --color-bg-tertiary:   #1E1E28;
  --color-bg-hover:      #252530;
  --color-bg-active:     #2C2C3A;

  --color-border-primary: #2A2A38;
  --color-border-subtle:  #222230;

  --color-text-primary:   #E8E8F0;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary:  #6B7280;

  --color-accent-green-soft:  rgba(34, 197, 94, 0.15);
  --color-accent-blue-soft:   rgba(59, 130, 246, 0.15);
  --color-accent-purple-soft: rgba(139, 92, 246, 0.15);
  --color-accent-red-soft:    rgba(239, 68, 68, 0.15);
  --color-accent-amber-soft:  rgba(245, 158, 11, 0.15);
  --color-accent-pink-soft:   rgba(236, 72, 153, 0.15);

  --color-glow-green:         rgba(34, 197, 94, 0.08);
  --color-glow-green-strong:  rgba(34, 197, 94, 0.18);
  --color-glow-green-hero:    rgba(34, 197, 94, 0.06);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.20);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.20);
  --shadow-md: 0 4px 6px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.35), 0 4px 6px rgba(0,0,0,.25);
}

/* ── Typography ──────────────────────────────────────────────── */
:root {
  --font-family:  'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-family-ar: 'Inter', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Cascadia Code', 'Consolas', 'SF Mono', 'Fira Code', monospace;

  /* Web scale (larger than extension) */
  --font-size-xs:    0.75rem;    /* 12px */
  --font-size-sm:    0.875rem;   /* 14px */
  --font-size-base:  1rem;       /* 16px */
  --font-size-md:    1.125rem;   /* 18px */
  --font-size-lg:    1.25rem;    /* 20px */
  --font-size-xl:    1.5rem;     /* 24px */
  --font-size-2xl:   2rem;       /* 32px */
  --font-size-3xl:   2.25rem;    /* 36px */
  --font-size-hero:  clamp(2.5rem, 5vw, 3.75rem); /* 40–60px */

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

  --line-height-tight:   1.15;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-normal: -0.01em;
  --letter-spacing-wide:    0.06em;
}

/* ── Spacing Scale ───────────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section padding — fluid */
  --section-py: clamp(64px, 10vw, 120px);
  --section-px: 24px;
}

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

/* ── Shadows ─────────────────────────────────────────────────── */
:root {
  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.06), 0 4px 6px rgba(0,0,0,.04);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.08), 0 8px 10px rgba(0,0,0,.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,.12);

  --shadow-glow-green:  0 0 40px rgba(34, 197, 94, 0.20);
  --shadow-glow-green-sm: 0 0 20px rgba(34, 197, 94, 0.15);

  --shadow-focus-green: 0 0 0 3px rgba(34, 197, 94, 0.25);
  --shadow-focus-blue:  0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* ── Transitions ─────────────────────────────────────────────── */
:root {
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Layout ──────────────────────────────────────────────────── */
:root {
  --max-width:      1200px;
  --max-width-text: 680px;
  --nav-height:     64px;
}