/**
 * variables.css
 * ─────────────────────────────────────────────────────────────────────────────
 * CSS Custom Properties (design tokens) for the entire portfolio.
 *
 * HOW TO RETHEME:
 *   1. Change the values in :root below.
 *   2. The entire site updates automatically — no other files need editing.
 *   3. For a light theme, override these in a [data-theme="light"] selector.
 *
 * SECTIONS:
 *   - Colors (background, text, accent, borders)
 *   - Typography (fonts, sizes, weights, line heights)
 *   - Spacing (section padding, container widths, gaps)
 *   - Borders & Shadows
 *   - Transitions & Animations
 *   - Z-index layers
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {
  /* ── COLORS ─────────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg-primary: #0a0a0f; /* Main page background */
  --color-bg-secondary: #0f0f1a; /* Alternate section background */
  --color-bg-card: #14141f; /* Card/panel background */
  --color-bg-card-hover: #1a1a2e; /* Card hover state */
  --color-bg-overlay: rgba(10, 10, 15, 0.92); /* Modal/overlay backdrop */

  /* Text */
  --color-text-primary: #f0f0f5; /* Main body text */
  --color-text-secondary: #8888a0; /* Subdued text, labels */
  --color-text-muted: #555570; /* Very subdued, placeholders */
  --color-text-inverse: #0a0a0f; /* Text on accent backgrounds */

  /* Accent (primary brand color) */
  --color-accent: #00d4aa; /* Teal/cyan — primary accent */
  --color-accent-hover: #00f0c0; /* Lighter on hover */
  --color-accent-dim: rgba(0, 212, 170, 0.15); /* Subtle accent tint */
  --color-accent-border: rgba(0, 212, 170, 0.3); /* Accent border */

  /* Accent secondary (blue) */
  --color-accent-2: #4f8ef7; /* Blue — secondary accent */
  --color-accent-2-dim: rgba(79, 142, 247, 0.15);

  /* Gradient */
  --gradient-accent: linear-gradient(135deg, #00d4aa 0%, #4f8ef7 100%);
  --gradient-text: linear-gradient(
    135deg,
    #00d4aa 0%,
    #4f8ef7 60%,
    #a855f7 100%
  );
  --gradient-hero-bg:
    radial-gradient(
      ellipse at 60% 40%,
      rgba(0, 212, 170, 0.06) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 20% 80%,
      rgba(79, 142, 247, 0.05) 0%,
      transparent 50%
    );

  /* Status colors */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Borders */
  --color-border: #1e1e30; /* Default border */
  --color-border-light: #2a2a40; /* Slightly lighter border */

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */

  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font sizes (fluid scale) */
  --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 */
  --text-7xl: 4.5rem; /* 72px */

  /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* ── SPACING ────────────────────────────────────────────────── */

  /* Base spacing unit: 4px */
  --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 */
  --space-32: 8rem; /* 128px */

  /* Section vertical padding */
  --section-padding-y: clamp(4rem, 8vw, 8rem);
  --section-gap: clamp(2rem, 4vw, 4rem);

  /* Container widths */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --container-padding-x: clamp(1rem, 4vw, 2rem);

  /* ── BORDERS & RADIUS ───────────────────────────────────────── */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── SHADOWS ────────────────────────────────────────────────── */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 30px rgba(0, 212, 170, 0.2);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--color-border);

  /* ── TRANSITIONS ────────────────────────────────────────────── */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX LAYERS ─────────────────────────────────────────── */

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-chatbot: 500;
  --z-loading: 1000;

  /* ── NAVBAR ─────────────────────────────────────────────────── */

  --navbar-height: 64px;
  --navbar-height-mobile: 56px;

  /* ── CHATBOT ────────────────────────────────────────────────── */

  --chatbot-width: 380px;
  --chatbot-height: 520px;
  --chatbot-fab-size: 56px;
  --chatbot-panel-radius: var(--radius-xl);
}

/* ── DARK THEME (default) ───────────────────────────────────────
   The site is dark by default. This block is here for reference
   and future light-mode support.
──────────────────────────────────────────────────────────────── */
[data-theme='dark'] {
  /* Same as :root — dark is default */
}

/* ── LIGHT THEME OVERRIDE ───────────────────────────────────────
   Uncomment and customize to enable a light mode toggle.
──────────────────────────────────────────────────────────────── */
/*
[data-theme="light"] {
  --color-bg-primary:     #f8f8fc;
  --color-bg-secondary:   #f0f0f8;
  --color-bg-card:        #ffffff;
  --color-bg-card-hover:  #f5f5ff;
  --color-text-primary:   #0a0a0f;
  --color-text-secondary: #555570;
  --color-text-muted:     #8888a0;
  --color-border:         #e0e0f0;
  --color-border-light:   #ebebf8;
  --shadow-card:          0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--color-border);
}
*/