/* ============================================================
   NEXORA · Base / Design Tokens — Apple Minimal
   ------------------------------------------------------------
   Light: page #f5f5f7 vs card #fff with hairline + soft shadow
   Dark:  page #000 vs card #1c1c1e with hairline + depth
   Cards now float distinctly from page.
   ============================================================ */

:root {
  /* ---- Brand (monochrome minimal — accent kept for links only) */
  --accent: #1d1d1f;
  --accent-strong: #000000;
  --accent-deep: #000000;
  --accent-2: #1d1d1f;
  --accent-3: #1d1d1f;
  --gold: #1d1d1f;
  --success: #1d1d1f;
  --warning: #1d1d1f;
  --danger: #ff3b30;

  --gradient-brand: none;
  --gradient-brand-soft: none;
  --gradient-text: none;

  /* ---- Semantic surfaces — BLACK is default (dark mode) ----- */
  --bg-page: #000000;
  --bg-page-2: #000000;
  --bg-elevated: #1c1c1e;
  --bg-elevated-2: #2c2c2e;
  --bg-glass: #1c1c1e;

  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --border-accent: rgba(255,255,255,0.14);

  --text-1: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #6e6e73;

  --glow-accent: transparent;
  --glow-cyan: transparent;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.38), 0 1px 4px rgba(0,0,0,0.32);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-glow: none;

  /* Skill chart colors — muted monochrome */
  --c1: #1d1d1f;
  --c2: #6e6e73;
  --c3: #86868b;
  --c4: #a1a1a6;
  --c5: #515154;

  /* ---- Typography -------------------------------------- */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", ui-monospace, monospace;

  --fs-hero: clamp(2.7rem, 1.75rem + 4.4vw, 4.85rem);
  --fs-h2: clamp(1.95rem, 1.45rem + 2.4vw, 2.85rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Radii — softer, Apple-like ----------------------- */
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---- Spacing scale ------------------------------------ */
  --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;

  --section-pad: clamp(4.5rem, 3rem + 6vw, 8rem);
  --container: 76rem;
  --container-narrow: 60rem;
  --container-pad: clamp(1.25rem, 0.7rem + 2vw, 2rem);

  /* ---- Motion ------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur-fast: 0.18s;
  --dur: 0.35s;
  --dur-slow: 0.7s;

  color-scheme: dark;
}

/* ---- Light theme — Apple page gray vs white cards ----- */
[data-theme="light"] {
  --bg-page: #f5f5f7;
  --bg-page-2: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #ffffff;
  --bg-glass: #ffffff;

  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --surface-3: #e8e8ed;

  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.12);
  --border-accent: rgba(0,0,0,0.12);

  --text-1: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;

  --glow-accent: transparent;
  --glow-cyan: transparent;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-glow: none;

  --gradient-text: none;

  color-scheme: light;
}