/* ==========================================================================
   Theme Variables — Dual Persona System
   .theme-dark  = Security Expert (terminal, monospace, cyber)
   .theme-light = App Developer (clean, minimal, Apple-like)
   ========================================================================== */

/* ---------- Dark Theme — Security Expert ---------- */
.theme-dark {
  --color-bg:            #0a0a1a;
  --color-bg-elevated:   #12122a;
  --color-bg-card:       #161630;
  --color-bg-card-hover: #1c1c3a;
  --color-bg-nav:        rgba(10, 10, 26, 0.92);

  --color-text:          #e0e0e8;
  --color-text-secondary:#8892a0;
  --color-text-muted:    #5a6170;

  --color-accent:        #00d4ff;
  --color-accent-hover:  #33ddff;
  --color-accent-subtle: rgba(0, 212, 255, 0.1);
  --color-accent-glow:   rgba(0, 212, 255, 0.25);

  --color-border:        #1e1e3a;
  --color-border-hover:  #2a2a50;

  --color-success:       #00e676;
  --color-warning:       #ffab00;
  --color-error:         #ff5252;

  --font-heading:        "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  --font-body:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:           "JetBrains Mono", "Fira Code", monospace;

  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg:           0 8px 30px rgba(0, 0, 0, 0.7);
  --shadow-glow:         0 0 20px rgba(0, 212, 255, 0.15);

  --nav-blur:            blur(12px);
  --card-radius:         6px;
  --btn-radius:          4px;
  --badge-radius:        3px;
}

/* ---------- Light Theme — App Developer ---------- */
.theme-light {
  --color-bg:            #fafafa;
  --color-bg-elevated:   #ffffff;
  --color-bg-card:       #ffffff;
  --color-bg-card-hover: #f5f5f7;
  --color-bg-nav:        rgba(250, 250, 250, 0.92);

  --color-text:          #1a1a2e;
  --color-text-secondary:#6b7280;
  --color-text-muted:    #9ca3af;

  --color-accent:        #ff6b35;
  --color-accent-hover:  #ff8555;
  --color-accent-subtle: rgba(255, 107, 53, 0.08);
  --color-accent-glow:   rgba(255, 107, 53, 0.15);

  --color-border:        #e5e7eb;
  --color-border-hover:  #d1d5db;

  --color-success:       #16a34a;
  --color-warning:       #d97706;
  --color-error:         #dc2626;

  --font-heading:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:           "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:           "JetBrains Mono", "Fira Code", monospace;

  --shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:           0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:           0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-glow:         none;

  --nav-blur:            blur(12px);
  --card-radius:         12px;
  --btn-radius:          8px;
  --badge-radius:        6px;
}

/* ---------- Shared Design Tokens ---------- */
:root {
  /* Spacing scale (4px base) */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Typography scale — fluid with clamp() */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);    /* 12–13px */
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);   /* 13–14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15–16px */
  --text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);      /* 17–18px */
  --text-xl:   clamp(1.1875rem, 1.1rem + 0.5vw, 1.3125rem);   /* 19–21px */
  --text-2xl:  clamp(1.4375rem, 1.3rem + 0.7vw, 1.625rem);    /* 23–26px */
  --text-3xl:  clamp(1.75rem, 1.5rem + 1.2vw, 2.125rem);      /* 28–34px */
  --text-4xl:  clamp(2.125rem, 1.8rem + 1.6vw, 2.75rem);      /* 34–44px */
  --text-5xl:  clamp(2.75rem, 2.2rem + 2.5vw, 3.75rem);       /* 44–60px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  /* Layout */
  --container-max:  1200px;
  --nav-height:     64px;

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

  /* Z-index layers */
  --z-base:     1;
  --z-card:     10;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;
}