/*
 * Design tokens — generated from the Figma variable collections in
 * "Stefan Adams - Claude Code Portfolio".
 *
 *   Primitives: Colour / Layout / Typography  → raw values
 *   Theme (Light | Dark)                      → semantic colour tokens
 *   Breakpoint (XS | S | M | L | XL)          → responsive layout + type scale
 *
 * Figma variable "a/b/c" becomes CSS custom property "--a-b-c".
 */

/* ---------- Primitives: Colour ---------- */
:root {
  --black-full: #000000;
  --white-full: #ffffff;
  --black-transparent-0: rgb(0 0 0 / 0);
  --black-transparent-4: rgb(0 0 0 / 0.04);
  --black-transparent-8: rgb(0 0 0 / 0.08);
  --black-transparent-12: rgb(0 0 0 / 0.12);
  --black-transparent-80: rgb(0 0 0 / 0.8);
  --white-transparent-0: rgb(255 255 255 / 0);
  --white-transparent-12: rgb(255 255 255 / 0.12);
  --white-transparent-16: rgb(255 255 255 / 0.16);
  --white-transparent-20: rgb(255 255 255 / 0.2);
  --white-transparent-72: rgb(255 255 255 / 0.72);

  --grey-100: #f5f5f5;
  --grey-200: #d9d9d9;
  --grey-300: #bbbbbb;
  --grey-400: #9c9c9c;
  --grey-500: #818181;
  --grey-600: #686868;
  --grey-700: #525252;
  --grey-800: #3f3f3f;
  --grey-900: #2b2b2b;
  --grey-1000: #171717;

  --blue-100: #f1f5f8;
  --blue-500: #667799;
  --blue-600: #536383;
  --blue-1000: #121721;

  --green-100: #e5f6e3;
  --green-500: #1c9d06;
  --green-700: #0f6d00;
  --green-1000: #031b00;

  --orange-100: #fef2de;
  --orange-500: #db5f00;
  --orange-600: #b14d00;
  --orange-1000: #240f00;

  --red-100: #feeded;
  --red-500: #e81d1d;
  --red-600: #d20007;
  --red-1000: #2d0002;
}

/* ---------- Primitives: Typography ---------- */
:root {
  --font-family-covered-by-your-grace: "Covered By Your Grace", cursive;
  --font-family-pt-serif: "PT Serif", Georgia, serif;
  --font-family-inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  --typography-display-font-family: var(--font-family-covered-by-your-grace);
  --typography-display-font-weight-regular: var(--font-weight-regular);
  --typography-heading-font-family: var(--font-family-pt-serif);
  /* Figma maps heading "semi-bold" to PT Serif Bold (PT Serif ships 400/700 only) */
  --typography-heading-font-weight-semi-bold: var(--font-weight-bold);
  --typography-body-font-family: var(--font-family-inter);
  --typography-body-font-weight-regular: var(--font-weight-regular);
  --typography-body-font-weight-bold: var(--font-weight-semi-bold);
}

/* ---------- Theme: Light (default) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --page-bg-default: var(--grey-100);

  --surface-primary-default: var(--white-full);
  --surface-primary-inverse: var(--black-full);
  --surface-secondary-default: var(--grey-100);
  --surface-secondary-inverse: var(--grey-1000);
  --surface-transparent-default: var(--black-transparent-4);
  --surface-transparent-inverse: var(--white-transparent-12);
  --surface-overlay-default: var(--white-transparent-72);
  --surface-overlay-inverse: var(--black-transparent-80);
  --surface-overlay-none: var(--white-transparent-0);
  --surface-status-success: var(--green-100);

  --text-primary-default: var(--grey-1000);
  --text-primary-inverse: var(--grey-100);
  --text-secondary-default: var(--grey-600);
  --text-secondary-inverse: var(--grey-400);
  --text-status-success: var(--green-700);

  --icon-primary-default: var(--grey-1000);
  --icon-primary-inverse: var(--grey-100);
  --icon-secondary-default: var(--grey-600);
  --icon-secondary-inverse: var(--grey-400);
  --icon-status-success: var(--green-700);

  --border-primary-default: var(--grey-1000);
  --border-primary-inverse: var(--grey-100);
  --border-secondary-default: var(--grey-600);
  --border-secondary-inverse: var(--grey-400);
  --border-transparent-default: var(--black-transparent-8);
  --border-transparent-inverse: var(--white-transparent-16);
  --border-transparent-fixed-dark: var(--black-transparent-8);

  --interactive-action-primary-default-enabled: var(--grey-1000);
  --interactive-action-primary-default-hover: var(--grey-900);
  --interactive-action-primary-default-pressed: var(--grey-800);
  --interactive-action-primary-inverse-enabled: var(--grey-100);
  --interactive-action-primary-inverse-hover: var(--grey-200);
  --interactive-action-primary-inverse-pressed: var(--grey-300);
  --interactive-action-secondary-default-enabled: var(--grey-100);
  --interactive-action-secondary-default-hover: var(--grey-200);
  --interactive-action-secondary-default-pressed: var(--grey-300);
  --interactive-action-secondary-inverse-enabled: var(--grey-1000);
  --interactive-action-secondary-inverse-hover: var(--grey-900);
  --interactive-action-secondary-inverse-pressed: var(--grey-800);

  --interactive-action-primary-default-effect: var(--black-transparent-12);
  --interactive-action-primary-inverse-effect: var(--white-transparent-20);
  --interactive-action-secondary-default-effect: var(--black-transparent-4);
  --interactive-action-secondary-inverse-effect: var(--white-transparent-12);

  --interactive-navigation-primary-default-enabled: var(--grey-1000);
  --interactive-navigation-primary-default-hover: var(--grey-1000);
  --interactive-navigation-primary-default-pressed: var(--grey-900);
  --interactive-navigation-secondary-default-enabled: var(--grey-600);
  --interactive-navigation-secondary-default-hover: var(--grey-1000);
  --interactive-navigation-secondary-default-pressed: var(--grey-900);
  --interactive-navigation-primary-default-effect: var(--black-transparent-12);
  --interactive-navigation-secondary-default-effect: var(--black-transparent-12);
}

/* ---------- Theme: Dark ----------
 * Applied via data-theme="dark" on <html>. An inline script in <head> sets it
 * before first paint from the saved choice or the OS prefers-color-scheme.
 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --page-bg-default: var(--grey-1000);

  --surface-primary-default: var(--black-full);
  --surface-primary-inverse: var(--white-full);
  --surface-secondary-default: var(--grey-1000);
  --surface-secondary-inverse: var(--grey-100);
  --surface-transparent-default: var(--white-transparent-12);
  --surface-transparent-inverse: var(--black-transparent-4);
  --surface-overlay-default: var(--black-transparent-80);
  --surface-overlay-inverse: var(--white-transparent-72);
  --surface-overlay-none: var(--black-transparent-0);
  --surface-status-success: var(--green-1000);

  --text-primary-default: var(--grey-100);
  --text-primary-inverse: var(--grey-1000);
  --text-secondary-default: var(--grey-400);
  --text-secondary-inverse: var(--grey-600);
  --text-status-success: var(--green-500);

  --icon-primary-default: var(--grey-100);
  --icon-primary-inverse: var(--grey-1000);
  --icon-secondary-default: var(--grey-400);
  --icon-secondary-inverse: var(--grey-600);
  --icon-status-success: var(--green-500);

  --border-primary-default: var(--grey-100);
  --border-primary-inverse: var(--grey-1000);
  --border-secondary-default: var(--grey-400);
  --border-secondary-inverse: var(--grey-600);
  --border-transparent-default: var(--white-transparent-16);
  --border-transparent-inverse: var(--black-transparent-8);
  --border-transparent-fixed-dark: var(--black-transparent-8);

  --interactive-action-primary-default-enabled: var(--grey-100);
  --interactive-action-primary-default-hover: var(--grey-200);
  --interactive-action-primary-default-pressed: var(--grey-300);
  --interactive-action-primary-inverse-enabled: var(--grey-1000);
  --interactive-action-primary-inverse-hover: var(--grey-900);
  --interactive-action-primary-inverse-pressed: var(--grey-800);
  --interactive-action-secondary-default-enabled: var(--grey-1000);
  --interactive-action-secondary-default-hover: var(--grey-900);
  --interactive-action-secondary-default-pressed: var(--grey-800);
  --interactive-action-secondary-inverse-enabled: var(--grey-100);
  --interactive-action-secondary-inverse-hover: var(--grey-200);
  --interactive-action-secondary-inverse-pressed: var(--grey-300);

  --interactive-action-primary-default-effect: var(--white-transparent-20);
  --interactive-action-primary-inverse-effect: var(--black-transparent-12);
  --interactive-action-secondary-default-effect: var(--white-transparent-12);
  --interactive-action-secondary-inverse-effect: var(--black-transparent-4);

  --interactive-navigation-primary-default-enabled: var(--grey-100);
  --interactive-navigation-primary-default-hover: var(--grey-100);
  --interactive-navigation-primary-default-pressed: var(--grey-200);
  --interactive-navigation-secondary-default-enabled: var(--grey-400);
  --interactive-navigation-secondary-default-hover: var(--grey-100);
  --interactive-navigation-secondary-default-pressed: var(--grey-200);
  --interactive-navigation-primary-default-effect: var(--white-transparent-20);
  --interactive-navigation-secondary-default-effect: var(--white-transparent-20);
}

/* ---------- Fixed (theme-independent) tokens ---------- */
:root {
  --border-radius-none: 0px;
  --border-radius-8: 8px;
  --border-radius-20: 20px;
  --border-radius-28: 28px;
  --border-radius-32: 32px;
  --border-radius-full: 9999px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --icon-size-16: 16px;
  --icon-size-20: 20px;
  --icon-size-24: 24px;
  --icon-size-32: 32px;
  --icon-size-40: 40px;
}

/* ---------- Breakpoint: XS (default, <568px) ---------- */
:root {
  --page-container-max-width: 1248px;
  --page-content-border-radius: 0px;
  --page-padding: 0px;
  --component-card-padding: 24px;

  --typography-display-letter-spacing: -2px;
  --typography-display-font-size-s: 28px;   --typography-display-line-height-s: 28px;
  --typography-display-font-size-m: 32px;   --typography-display-line-height-m: 32px;
  --typography-display-font-size-l: 36px;   --typography-display-line-height-l: 36px;
  --typography-display-font-size-xl: 44px;  --typography-display-line-height-xl: 44px;
  --typography-display-font-size-xxl: 48px; --typography-display-line-height-xxl: 48px;

  --typography-heading-font-size-s: 20px;   --typography-heading-line-height-s: 28px;
  --typography-heading-font-size-m: 24px;   --typography-heading-line-height-m: 32px;
  --typography-heading-font-size-l: 28px;   --typography-heading-line-height-l: 36px;
  --typography-heading-font-size-xl: 36px;  --typography-heading-line-height-xl: 44px;
  --typography-heading-font-size-xxl: 40px; --typography-heading-line-height-xxl: 48px;

  --typography-body-font-size-s: 12px; --typography-body-line-height-s: 16px;
  --typography-body-font-size-m: 14px; --typography-body-line-height-m: 20px;
  --typography-body-font-size-l: 16px; --typography-body-line-height-l: 24px;
}

/* S (>568) has identical values to XS in Figma. */

/* ---------- Breakpoint: M (>=768px) ---------- */
@media (min-width: 768px) {
  :root {
    --page-content-border-radius: 20px;
    --page-padding: 8px;

    --typography-display-font-size-s: 32px;   --typography-display-line-height-s: 32px;
    --typography-display-font-size-m: 40px;   --typography-display-line-height-m: 40px;
    --typography-display-font-size-l: 44px;   --typography-display-line-height-l: 44px;
    --typography-display-font-size-xl: 48px;  --typography-display-line-height-xl: 48px;
    --typography-display-font-size-xxl: 52px; --typography-display-line-height-xxl: 52px;

    --typography-heading-font-size-s: 24px;   --typography-heading-line-height-s: 32px;
    --typography-heading-font-size-m: 32px;   --typography-heading-line-height-m: 40px;
    --typography-heading-font-size-l: 36px;   --typography-heading-line-height-l: 44px;
    --typography-heading-font-size-xl: 40px;  --typography-heading-line-height-xl: 48px;
    --typography-heading-font-size-xxl: 44px; --typography-heading-line-height-xxl: 52px;
  }
}

/* ---------- Breakpoint: L (>=1024px) — XL (>1440) has identical values ---------- */
@media (min-width: 1024px) {
  :root {
    --component-card-padding: 40px;

    --typography-display-font-size-m: 44px;   --typography-display-line-height-m: 44px;
    --typography-display-font-size-l: 48px;   --typography-display-line-height-l: 48px;
    --typography-display-font-size-xl: 56px;  --typography-display-line-height-xl: 56px;
    --typography-display-font-size-xxl: 64px; --typography-display-line-height-xxl: 64px;

    --typography-heading-font-size-m: 36px;   --typography-heading-line-height-m: 44px;
    --typography-heading-font-size-l: 40px;   --typography-heading-line-height-l: 48px;
    --typography-heading-font-size-xl: 48px;  --typography-heading-line-height-xl: 56px;
    --typography-heading-font-size-xxl: 56px; --typography-heading-line-height-xxl: 64px;
  }
}