/*
  Design tokens — CSS custom properties only.
  ----------------------------------------------------------------------------
  Replace these placeholder values with the real tokens from the Figma file.
  Use semantic names (--color-primary, --font-size-h1) — NOT raw names
  (--blue-500, --size-32). This way the brand can shift without renaming.

  DO NOT add component rules to this file. Only custom properties.
*/

:root {

  /* ===== Colors ===== */

  /* Brand */
  --color-primary: #1a1a1a;
  --color-primary-hover: #333333;
  --color-accent: #ff5a1f;
  --color-accent-hover: #e04a10;

  /* Surfaces */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f0f0f2;

  /* Text */
  --color-text: #1a1a1a;
  --color-text-muted: #555555;
  --color-text-inverse: #ffffff;
  --color-text-link: var(--color-accent);
  --color-text-link-hover: var(--color-accent-hover);

  /* Borders & dividers */
  --color-border: #e4e4e7;
  --color-border-strong: #c4c4c8;

  /* Feedback */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;

  /* ===== Typography ===== */

  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type scale — semantic */
  --font-size-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --font-size-h2: clamp(1.75rem, 3vw + 0.75rem, 2.75rem);
  --font-size-h3: clamp(1.375rem, 2vw + 0.5rem, 2rem);
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-xs: 0.75rem;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;

  /* ===== Spacing (4px base scale) ===== */

  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Section padding — semantic */
  --section-padding-y: clamp(var(--space-12), 8vw, var(--space-24));
  --section-padding-x: clamp(var(--space-4), 4vw, var(--space-8));

  /* ===== Radii ===== */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* ===== Shadows ===== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* ===== Layout ===== */

  --container-max: 1280px;
  --container-narrow: 768px;

  /* ===== Motion ===== */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  /* ===== Z-index scale ===== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* Optional dark mode — uncomment + adjust if the design calls for it. */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f10;
    --color-bg-alt: #1a1a1c;
    --color-surface: #1a1a1c;
    --color-text: #f4f4f5;
    --color-text-muted: #a1a1aa;
    --color-border: #2a2a2d;
  }
}
*/