/* =============================================================
   tokens.css — Design tokens (single source of truth)
   Layers: primitives -> semantic -> Bootstrap bridge
   Consumed by both the Vue app and the static landing page.
   Load this file BEFORE style.css.
   ============================================================= */

/* ---------- Primitives -------------------------------------- */
:root {
  /* color */
  --c-red-500: #da0037;
  --c-red-400: #ff1a53;
  --c-neutral-950: #171717;
  --c-neutral-900: #1e1e1e;
  --c-neutral-800: #333333;
  --c-neutral-600: #555555;
  --c-neutral-500: #717777;
  --c-neutral-200: #e0e0e0;
  --c-neutral-100: #f8f8f8;
  --c-white: #ffffff;

  /* typography */
  --font-family-base: 'Roboto Mono', monospace;
  --fs-2xs: 0.7rem;
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.2rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-display: 3rem;
  --lh-tight: 1.2;
  --lh-base: 1.6;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;

  /* spacing (4px base) */
  --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-24: 6rem;
  --space-32: 8rem;

  /* dimensions */
  --section-gap: 250px;
  --avatar-size: 300px;
  --avatar-size-sm: 120px;
  --avatar-border-width: 8px;
  --avatar-border-width-sm: 3px;
  --avatar-icon-size: 50px;
  --radius-sm: 4px;
  --radius-full: 50%;
  --border-width: 1px;
  --shadow-card: 0 10px 20px rgba(0, 0, 0, 0.2);
  --hover-lift: -5px;
  --container-max-width: 900px;

  /* motion */
  --duration-base: 0.3s;
  --ease-base: cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-base: all var(--duration-base) var(--ease-base);
}

/* ---------- Semantic · DARK (default) ---------------------- */
:root,
[data-bs-theme='dark'],
[data-theme='dark'] {
  --color-primary: var(--c-red-500);
  --color-primary-hover: var(--c-red-400);
  --color-bg: var(--c-neutral-950);
  --color-surface: var(--c-neutral-900);
  --color-border: var(--c-neutral-800);
  --color-text: var(--c-neutral-200);
  --color-text-muted: var(--c-neutral-500);
  --color-on-primary: var(--c-white);

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-family-base);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-primary: var(--color-primary);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
}

/* ---------- Semantic · LIGHT ------------------------------- */
[data-bs-theme='light'],
[data-theme='light'] {
  --color-bg: var(--c-white);
  --color-surface: var(--c-neutral-100);
  --color-border: var(--c-neutral-200);
  --color-text: var(--c-neutral-950);
  --color-text-muted: var(--c-neutral-600);

  /* Bootstrap bridge */
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-border-color: var(--color-border);
}

/* ---------- Responsive tokens ------------------------------ */
@media (max-width: 767.98px) {
  :root,
  [data-bs-theme],
  [data-theme] {
    --section-gap: var(--space-16);
  }
}