/**
 * Design tokens — mapped from Figma SDS variables (Portfolio file).
 * Semantic aliases disambiguate reused variable names (e.g. title-hero-size).
 */

:root {
  /* --- SDS color (1:1 names) --- */
  --sds-color-text-neutral-default: #454745;
  --sds-color-text-neutral-secondary: #5a5d5b;
  --sds-color-text-neutral-tertiary: #347840;
  --sds-color-background-default-default: #f9f8f6;
  --sds-color-background-default-default-hover: #f1eee9;
  /* Project list + case-study links: hover fill at 50% opacity */
  --color-project-hover-fill: color-mix(in srgb, var(--sds-color-background-default-default-hover) 50%, transparent);

  /* --- SDS spacing --- */
  --sds-size-space-0: 0px;
  --sds-size-space-100: 4px;
  --sds-size-space-200: 8px;
  --sds-size-space-400: 16px;
  --sds-size-space-1200: 48px;
  --sds-size-space-1600: 64px;
  --sds-size-space-600: 24px;

  /* --- SDS radii --- */
  --sds-size-radius-100: 4px;
  --sds-size-radius-200: 8px;
  --sds-size-radius-400: 16px;

  /* --- SDS icon --- */
  --sds-size-icon-medium: 32px;

  /* --- Typography — Adobe Fonts (Typekit) kit: use.typekit.net/cns8wrc.css; names match .tk-calluna / .tk-neue-kabel --- */
  --font-family-serif: "calluna", Georgia, serif;
  --font-family-sans: "neue-kabel", system-ui, sans-serif;

  /* --- SDS typography (family/weight; size is contextual in Figma) --- */
  --sds-typography-title-hero-font-family: var(--font-family-serif);
  --sds-typography-title-hero-font-weight: 600;
  --sds-typography-title-hero-size: 16px;

  /* --- Semantic typography (explicit sizes from frames) --- */
  --font-size-display: 32px;
  --font-size-section: 24px;
  --font-size-nav-heading: 20px;
  --font-size-body: 16px;
  --font-size-body-small: 14px;
  --font-size-label-uppercase: 14px;
  --line-height-tight: 1;
  --line-height-body: 1.5;
  --letter-spacing-subtitle: 0.98px;

  /* --- Semantic colors (from Figma output where no separate variable) --- */
  --color-section-heading: #141f16;
  --color-border-subtle: #d8ddd9;
  /* Dotted page grid: 2px dots @ 80% opacity, 8px spacing; fades at edges via vignette layer above */
  --page-bg-dot-size: 8px 8px;
  /* Viewport origin for repeat; 0 0 is fine with --layout-page-max on a 16px step (see below) */
  --page-bg-dot-position: 0 0;
  --page-bg-dot-grid: radial-gradient(
    circle at 4px 4px,
    rgba(216, 221, 217, 0.8) 1px,
    transparent 1px
  );
  --color-text-work-muted: #636b65;
  --color-logo-jg-bg: #262626;
  --color-border-media: rgba(69, 71, 69, 0.2);

  /* --- Semantic text (lighter body / footer) --- */
  --color-text-description: #6d706e;
  /* ~4.5:1 on page background — light but readable */
  --color-text-footer: #7d817e;

  /* --- Interactive surfaces --- */
  --color-card-active-fill: #e4e0da;
  --shadow-card-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-logo-drop: 1px 1px 4px rgba(0, 0, 0, 0.16);

  /* --- Modal primary (accent) --- */
  --color-modal-submit-bg: var(--sds-color-text-neutral-tertiary);
  --color-modal-submit-text: #ffffff;

  /* --- Layout / breakpoints (Figma frames) --- */
  /* 1520 ≡ 0 (mod 16): centered 576px column gets margins on 8px grid at max width; “good enough” when viewport ≡ 0 (mod 16) */
  --layout-page-max: 1520px;
  --layout-column: 576px;
  --layout-column-inset: calc((var(--layout-page-max) - var(--layout-column)) / 2);
  --layout-nav-footer: 848px;
  /* Nav/footer aligned to main column width */
  --layout-content-width: var(--layout-column);
  /* Top offset for main / project layout (no top nav bar) */
  --layout-main-content-padding-top: var(--sds-size-space-1200);
  /* Horizontal inset for main column text; project row hover bleeds by this amount to full column width */
  --layout-main-inline-padding: var(--sds-size-space-400);
  --project-card-hover-bleed: var(--layout-main-inline-padding);
  --layout-section-nav: 120px;
  --layout-media-placeholder-height: 304px;

  /* Breakpoints: mobile frame 393px; optional tablet/desktop */
  --bp-mobile-max: 393px;
  --bp-tablet: 768px;
  --bp-desktop: 1280px;

  /* --- Modal (spec-only; uses SDS palette) --- */
  --color-modal-backdrop: rgba(20, 31, 22, 0.45);
  --color-modal-surface: var(--sds-color-background-default-default);
  --color-error-text: #8b2e2e;
  --color-error-border: rgba(139, 46, 46, 0.35);
}