/* ============================================================
   THEME.CSS — Central Theme Engine (Design Tokens)
   Techsheba — Graphic Design Agency & Creative Portfolio
   ------------------------------------------------------------
   All design tokens, colors, typography scales, spacing
   variables and quick-preference toggles live here.
   Dark theme is the default (Obsidian Tech).
   ============================================================ */

/* ---------- 1. Base / Reset-level tokens ---------- */
:root {
  --font-display: "Cabinet Grotesk", "Clash Display", "Plus Jakarta Sans", sans-serif;
  --font-hero: "Clash Display", "Cabinet Grotesk", "Plus Jakarta Sans", sans-serif;
  --font-body: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Space Mono", ui-monospace, monospace;

  /* Fluid type scale */
  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-md: 1rem;
  --text-lg: 1.18rem;
  --text-xl: clamp(1.35rem, 2.4vw, 1.7rem);

  /* Display scale */
  --display-hero: clamp(2.6rem, 5.8vw, 4.7rem);
  --display-h2: clamp(2rem, 4.6vw, 3.6rem);
  --display-h3: clamp(1.35rem, 2.2vw, 1.75rem);

  /* Spacing scale */
  --space-1: 0.375rem;   /* 6px  */
  --space-2: 0.75rem;    /* 12px */
  --space-3: 1.25rem;    /* 20px */
  --space-4: 2rem;       /* 32px */
  --space-5: 3.25rem;    /* 52px */
  --space-6: 5rem;       /* 80px */
  --space-7: 8rem;       /* 128px */

  /* Layout */
  --container: 1280px;
  --container-wide: 1520px;
  --header-h: 76px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s;
  --t-med: 0.32s;
  --t-slow: 0.6s;

  /* Typography helpers */
  --tracking-tight: -0.03em;
  --tracking-label: 0.18em;
  --lh-body: 1.6;
}

/* ============================================================
   2. DARK THEME (DEFAULT) — Obsidian Tech
   ============================================================ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg-primary: #0B0F12;
  --bg-surface: #12181B;
  --bg-elevated: #172025;
  --bg-inset: #0D1216;

  /* Accents */
  --accent-green: #00FF66;
  --accent-cobalt: #3B82F6;
  --accent-violet: #8B7CFF;
  --accent-amber: #FFC24B;

  /* Text */
  --text-main: #FFFFFF;
  --text-muted: #8E95A5;
  --text-faint: #5A6270;

  /* Lines & fills */
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --line-grid: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.04);

  /* Effects */
  --glow-green: 0 0 0 1px rgba(0, 255, 102, 0.25), 0 0 44px -8px rgba(0, 255, 102, 0.5);
  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
  --hero-glow-a: rgba(0, 255, 102, 0.16);
  --hero-glow-b: rgba(59, 130, 246, 0.14);

  /* Header */
  --header-bg: rgba(11, 15, 18, 0.72);

  /* Toggle icons */
  --icon-sun: block;
  --icon-moon: none;
}

/* ============================================================
   3. LIGHT THEME — High-Contrast Clean Studio
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  --bg-primary: #F8F9FA;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-inset: #F1F3F5;

  --accent-green: #00CC52;
  --accent-cobalt: #2563EB;
  --accent-violet: #6D5CE7;
  --accent-amber: #E8A020;

  --text-main: #0F172A;
  --text-muted: #475569;
  --text-faint: #94A3B8;

  --border-glass: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);
  --line-grid: rgba(15, 23, 42, 0.06);
  --surface-hover: rgba(15, 23, 42, 0.04);

  --glow-green: 0 0 0 1px rgba(0, 204, 82, 0.28), 0 0 40px -10px rgba(0, 204, 82, 0.45);
  --shadow-card: 0 24px 54px -30px rgba(15, 23, 42, 0.28);
  --hero-glow-a: rgba(0, 204, 82, 0.14);
  --hero-glow-b: rgba(37, 99, 235, 0.12);

  --header-bg: rgba(248, 249, 250, 0.78);

  --icon-sun: none;
  --icon-moon: block;
}

/* ---------- 4. Accessibility — reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 6. Selection & scrollbar (theme-aware) ---------- */
::selection {
  background: var(--accent-green);
  color: #0B0F12;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}