/*
 * Design tokens — mirrors the Figma variable collections
 * (Primitives, Color, Spacing, Responsive) in the Portfolio file.
 * Keep names in sync with each variable's WEB code syntax.
 */

/* ---------- Primitives ---------- */
:root {
  --color-neutral-50: #f9f9f9;
  --color-neutral-100: #f0f0f0;
  --color-neutral-200: #e3e3e3;
  --color-neutral-300: #c8c8c8;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #8f8f8f;
  --color-neutral-600: #747474;
  --color-neutral-700: #4a4a4a;
  --color-neutral-800: #262626;
  --color-neutral-900: #1a1a1a;
  --color-neutral-950: #0d0d0d;

  --color-orange-50: #fff1ec;
  --color-orange-100: #ffe0d4;
  --color-orange-200: #ffbfa8;
  --color-orange-300: #ff9a76;
  --color-orange-400: #ff7a4d;
  --color-orange-500: #ff5925;
  --color-orange-600: #e5461a;
  --color-orange-700: #c23a14;
  --color-orange-800: #8f2c10;
  --color-orange-900: #2e140b;

  --color-blue-50: #eef5ff;
  --color-blue-100: #dceaff;
  --color-blue-200: #b8d4ff;
  --color-blue-300: #8ab8ff;
  --color-blue-400: #5c9dff;
  --color-blue-500: #2f82ff;
  --color-blue-600: #1a6be8;
  --color-blue-700: #1557c2;
  --color-blue-800: #10408f;
  --color-blue-900: #0b1a2e;

  --font-family-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-family-body: "Afacad", system-ui, sans-serif;
}

/* ---------- Color: Light (default) ---------- */
:root,
[data-theme="light"] {
  --color-bg-primary: var(--color-neutral-50);
  --color-bg-secondary: var(--color-neutral-100);
  --color-bg-tertiary: var(--color-neutral-200);
  --color-bg-inverse: var(--color-neutral-950);
  --color-bg-brand: var(--color-blue-500);
  --color-bg-brand-hover: var(--color-blue-600);
  --color-bg-brand-subtle: var(--color-blue-50);

  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-50);
  --color-text-brand: var(--color-blue-500);
  --color-text-on-brand: var(--color-neutral-950);

  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-inverse: var(--color-neutral-950);
  --color-border-brand: var(--color-blue-500);

  --color-icon-primary: var(--color-neutral-950);
  --color-icon-secondary: var(--color-neutral-600);
  --color-icon-brand: var(--color-blue-500);
}

/* ---------- Color: Dark (opt-in via data-theme="dark") ---------- */
[data-theme="dark"] {
  --color-bg-primary: var(--color-neutral-950);
  --color-bg-secondary: var(--color-neutral-900);
  --color-bg-tertiary: var(--color-neutral-800);
  --color-bg-inverse: var(--color-neutral-50);
  --color-bg-brand: var(--color-blue-500);
  --color-bg-brand-hover: var(--color-blue-400);
  --color-bg-brand-subtle: var(--color-blue-900);

  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-tertiary: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-950);
  --color-text-brand: var(--color-blue-500);
  --color-text-on-brand: var(--color-neutral-950);

  --color-border-default: var(--color-neutral-800);
  --color-border-strong: var(--color-neutral-700);
  --color-border-inverse: var(--color-neutral-50);
  --color-border-brand: var(--color-blue-500);

  --color-icon-primary: var(--color-neutral-50);
  --color-icon-secondary: var(--color-neutral-500);
  --color-icon-brand: var(--color-blue-500);
}

/* ---------- Spacing, radius, border ---------- */
:root {
  --space-0: 0px;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;
  --space-7xl: 80px;
  --space-8xl: 96px;
  --space-9xl: 128px;
  --space-10xl: 160px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --border-width-thin: 1px;
  --border-width-thick: 2px;
}

/* ---------- Responsive: Desktop (default) ---------- */
:root {
  --type-display-xl-size: 128px;
  --type-display-xl-line-height: 136px;
  --type-display-lg-size: 96px;
  --type-display-lg-line-height: 104px;
  --type-h1-size: 64px;
  --type-h1-line-height: 76px;
  --type-h2-size: 48px;
  --type-h2-line-height: 60px;
  --type-h3-size: 36px;
  --type-h3-line-height: 46px;
  --type-h4-size: 28px;
  --type-h4-line-height: 38px;
  --type-body-lg-size: 22px;
  --type-body-lg-line-height: 34px;
  --type-body-md-size: 18px;
  --type-body-md-line-height: 28px;
  --type-body-sm-size: 16px;
  --type-body-sm-line-height: 24px;
  --type-caption-size: 14px;
  --type-caption-line-height: 22px;
  --type-label-size: 14px;
  --type-label-line-height: 16px;

  --grid-margin: 80px;
  --grid-gutter: 24px;
  --grid-columns: 12;
  --grid-frame-width: 1440px;
  --grid-content-width: 1280px;
  --layout-section-gap: 160px;
  --layout-block-gap: 64px;
  --layout-nav-height: 72px;
}

/* ---------- Responsive: Mobile ---------- */
@media (max-width: 767px) {
  :root {
    --type-display-xl-size: 64px;
    --type-display-xl-line-height: 72px;
    --type-display-lg-size: 52px;
    --type-display-lg-line-height: 60px;
    --type-h1-size: 40px;
    --type-h1-line-height: 50px;
    --type-h2-size: 32px;
    --type-h2-line-height: 42px;
    --type-h3-size: 26px;
    --type-h3-line-height: 34px;
    --type-h4-size: 22px;
    --type-h4-line-height: 30px;
    --type-body-lg-size: 18px;
    --type-body-lg-line-height: 28px;
    --type-body-md-size: 16px;
    --type-body-md-line-height: 26px;
    --type-body-sm-size: 14px;
    --type-body-sm-line-height: 22px;
    --type-caption-size: 12px;
    --type-caption-line-height: 18px;
    --type-label-size: 12px;
    --type-label-line-height: 14px;

    --grid-margin: 20px;
    --grid-gutter: 16px;
    --grid-columns: 4;
    --grid-frame-width: 390px;
    --grid-content-width: 350px;
    --layout-section-gap: 80px;
    --layout-block-gap: 40px;
    --layout-nav-height: 64px;
  }
}

/* Site-wide: no italics anywhere. Emphasis is carried by colour, not slant. */
em, i, cite, address, dfn, var { font-style: normal; }