:root {
  /* Foundational luminance ramp: establish peaks first, then dialed steps */
  --lum-light-100: #ffffff;
  --lum-light-98: rgba(255, 255, 255, 0.98);
  --lum-light-96: rgba(255, 255, 255, 0.96);
  --lum-light-95: rgba(255, 255, 255, 0.95);
  --lum-light-94: rgba(255, 255, 255, 0.94);
  --lum-light-92: rgba(255, 255, 255, 0.92);
  --lum-light-90: rgba(255, 255, 255, 0.9);
  --lum-light-78: rgba(255, 255, 255, 0.78);
  --lum-light-70: rgba(255, 255, 255, 0.7);
  --lum-light-50: rgba(255, 255, 255, 0.5);
  --lum-light-30: rgba(255, 255, 255, 0.3);
  --lum-light-24: rgba(255, 255, 255, 0.24);
  --lum-light-20: rgba(255, 255, 255, 0.2);
  --lum-light-16: rgba(255, 255, 255, 0.16);
  --lum-light-42: rgba(255, 255, 255, 0.42);
  --lum-light-75: rgba(255, 255, 255, 0.75);
  --lum-light-06: rgba(255, 255, 255, 0.06);
  --lum-light-04: rgba(255, 255, 255, 0.04);
  --lum-transparent: transparent;
  --lum-dark-100: #000000;
  --lum-dark-50: rgba(0, 0, 0, 0.5);
  --lum-dark-20: rgba(0, 0, 0, 0.2);
  --lum-ink-11: #111111;
  --lum-ink-10: #101010;
  --lum-slate-100: #a2aab2;
  --lum-slate-200: #727d88;
  --lum-slate-300: #4e5b67;
  --lum-charcoal-700: #22252c;
  --lum-charcoal-650: #2b2f38;
  --lum-charcoal-900: #0f0f0f;
  --lum-brand-gold-500: #ebb50a;

  /* Semantic color tokens: color -> category -> context/role/state */
  --color-text-content-primary: var(--lum-slate-100);
  --color-text-content-strong: var(--lum-light-90);
  --color-text-content-tertiary: var(--lum-slate-300);
  --color-text-content-tertiary-aa: var(--lum-slate-200);
  --color-text-content-overlay-copy: var(--lum-light-94);
  --color-text-content-overlay-presence: var(--lum-light-20);
  --color-text-content-overlay-cursor: var(--lum-light-98);
  --color-text-content-overlay-rail: var(--lum-light-96);
  --color-text-content-overlay-rail-icon: var(--lum-light-92);
  --color-text-content-overlay-title: var(--lum-light-95);
  --color-text-content-overlay-status: var(--lum-light-70);
  --color-text-link-global-idle: var(--lum-light-30);
  --color-text-link-global-hover: var(--lum-light-50);
  --color-text-link-onbrand-idle: var(--lum-dark-20);
  --color-text-link-onbrand-hover: var(--lum-dark-50);
  --color-text-on-dark-primary: var(--lum-light-100);
  --color-text-on-light-primary: var(--lum-ink-11);
  --color-text-on-light-strong: var(--lum-ink-10);
  --color-text-transparent: var(--lum-transparent);
  --color-border-surface-default: var(--lum-charcoal-700);
  --color-border-surface-ui: var(--lum-charcoal-650);
  --color-border-surface-strong: var(--lum-dark-100);
  --color-border-onbrand-subtle: var(--lum-charcoal-900);
  --color-border-overlay-subtle: var(--lum-light-06);
  --color-border-overlay-soft: var(--lum-light-04);
  --color-border-overlay-control: var(--lum-light-24);
  --color-border-overlay-control-hover: var(--lum-light-42);
  --color-border-overlay-control-disabled: var(--lum-light-16);
  --color-border-focus-high: var(--lum-light-75);
  --color-border-transparent: var(--lum-transparent);
  --color-border-accent-brand: var(--lum-brand-gold-500);
  --color-surface-hero-stage: #060708;
  --color-surface-overlay-panel: rgba(11, 12, 12, 0.78);
  --color-surface-overlay-rail: rgba(255, 255, 255, 0.02);
  --color-surface-control-glass: rgba(11, 12, 12, 0.34);
  --color-surface-elevated-neutral: #232626;
  --color-surface-interactive-hover: rgba(255, 255, 255, 0.05);
  --color-surface-interactive-press: rgba(255, 255, 255, 0.1);
  --color-surface-company-card: #1c1f1f;
  --color-surface-success-action-default: #053d13;
  --color-surface-success-action-hover: #07481a;
  --color-surface-success-action-pressed: #043511;
  --color-surface-scrim: rgba(0, 0, 0, 0.8);
  --color-surface-debug-overlay: rgba(0, 0, 0, 0.72);
  --color-surface-overlay-control-default: rgba(255, 255, 255, 0.08);
  --color-surface-overlay-control-hover: rgba(255, 255, 255, 0.16);
  --color-surface-overlay-control-disabled: rgba(255, 255, 255, 0.04);
  --color-surface-inverse: #ffffff;
  --color-surface-inverse-hover: #f3f3f3;
  --fx-noise-dot-light: rgba(255, 255, 255, 0.018);
  --fx-noise-dot-dark: rgba(0, 0, 0, 0.02);
  --fx-scroll-label-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  --fx-nav-blur-surface-gradient: linear-gradient(180deg, rgba(28, 31, 31, 0.9) 0%, rgba(28, 31, 31, 0.82) 58%, rgba(28, 31, 31, 0.72) 100%);
  --fx-glass-rim-gradient: linear-gradient(180deg, rgba(254, 254, 254, 0) 72%, rgba(255, 255, 255, 0.05) 100%);
  --fx-glass-depth-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 26%, rgba(102, 102, 102, 0.08) 100%);
  --fx-glass-hover-overlay: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035));
  --fx-soft-light-inset-shadow:
    inset 0 0 0 1px var(--border-strong),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.16),
    inset 0 4px 5px 4px rgba(255, 255, 255, 0.01),
    inset 0 0 12px 1px rgba(255, 255, 255, 0.03),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.04),
    inset 0 2px 1px 1px rgba(255, 255, 255, 0.16);
  --fx-elevated-menu-shadow:
    0 18px 34px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --fx-company-icon-gradient:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)),
    rgba(15, 17, 18, 0.92);
  --fx-company-icon-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.8);
  --fx-success-action-shadow-default:
    inset 0 3px 4px rgba(22, 99, 41, 0.2),
    inset 0 1px 0 #267d3b,
    inset 0 0 4px #166329;
  --fx-success-action-shadow-hover:
    inset 0 2px 3px rgba(24, 108, 47, 0.22),
    inset 0 1px 0 #2a8745,
    inset 0 0 3px #1a6c34;
  --fx-success-action-shadow-pressed:
    inset 0 1px 2px rgba(8, 42, 18, 0.55),
    inset 0 1px 0 rgba(12, 62, 26, 0.65);
  --fx-depth-card-shadow: 0 28px 40px rgba(0, 0, 0, 0.35);
  --fx-presence-shimmer-gradient: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, 0) 100%
  );

  /* ETC section color system (balanced default, OKLCH tuned to reduce halation) */
  --etc-oklch-anchor: oklch(0.82 0.01 240);
  --etc-oklch-row-title: oklch(0.78 0.01 240);
  --etc-oklch-body: oklch(0.67 0.013 245);
  --etc-oklch-tertiary: oklch(0.64 0.014 245);
  --etc-oklch-link-hover: oklch(0.76 0.012 242);
  --etc-oklch-row-hover-bg: oklch(0.74 0.012 245 / 0.03);
  --etc-oklch-row-hover-border: oklch(0.74 0.012 245 / 0.32);

  --etc-lum-anchor: var(--etc-oklch-anchor);
  --etc-lum-row-title: var(--etc-oklch-row-title);
  --etc-lum-body: var(--etc-oklch-body);
  --etc-lum-tertiary: var(--etc-oklch-tertiary);
  --etc-lum-link-hover: var(--etc-oklch-link-hover);
  --etc-lum-row-hover-bg: var(--etc-oklch-row-hover-bg);
  --etc-lum-row-hover-border: var(--etc-oklch-row-hover-border);

  --etc-text-anchor: var(--etc-lum-anchor);
  --etc-text-row-title: var(--etc-lum-row-title);
  --etc-text-body: var(--etc-lum-body);
  --etc-text-tertiary: var(--etc-lum-tertiary);
  --etc-text-link-rest: var(--etc-lum-tertiary);
  --etc-text-link-hover: var(--etc-lum-link-hover);
  --etc-row-hover-bg: var(--etc-lum-row-hover-bg);
  --etc-row-hover-border: var(--etc-lum-row-hover-border);
  --etc-talk-row-hover-border: var(--border-color);

  /* Inline badge tokens */
  --inline-badge-height: 18px;
  --inline-badge-height-compact: 16px;
  --inline-badge-font-size: 11px;
  --inline-badge-font-size-compact: 10px;
  --inline-badge-letter-spacing: 0.04em;
  --inline-badge-radius: 7px;
  --inline-badge-padding-inline: 6px;
  --inline-badge-padding-inline-compact: 5px;
  --inline-badge-gap: 12px;
  --inline-badge-icon-gap: 4px;
  --inline-badge-icon-size: 10px;
  --inline-badge-icon-size-compact: 9px;
  --inline-badge-fill: currentColor;
  --inline-badge-punched-text: var(--page-background);
  --inline-badge-baseline-shift: -1px;
  --inline-badge-secondary-fill: rgba(255, 255, 255, 0.12);
  --inline-badge-secondary-text: var(--etc-text-body);

  /* Bridge aliases from existing global tokens */
  --etc-alias-text-strong: var(--text-strong);
  --etc-alias-text-secondary: var(--text-secondary);
  --etc-alias-text-tertiary: var(--text-tertiary);
  --page-background: #0b0c0c;
  --text-default: var(--color-text-content-primary);
  --text-strong: var(--color-text-content-strong);
  --text-link-onbrand-underline: var(--color-text-link-onbrand-idle);
  --text-link-onbrand-underline-hover: var(--color-text-link-onbrand-hover);
  --text-brand-default: var(--color-text-on-light-primary);
  --text-brand-strong: var(--color-text-on-light-strong);
  --text-primary: var(--text-default);
  --text-secondary: var(--text-default);
  --text-tertiary: var(--color-text-content-tertiary-aa);
  --text-inverse: var(--text-brand-default);
  --text-inverse-muted: var(--text-brand-strong);
  --border-color: var(--color-border-surface-default);
  --awards-border-color: var(--color-border-surface-default);
  --border-ui: var(--color-border-surface-ui);
  --border-strong: var(--color-border-surface-strong);
  --border-brand: var(--color-border-onbrand-subtle);
  --brand-color: var(--color-border-accent-brand);
  --surface-ui: #171a1a;
  --surface-media: #0f1112;
  --details-grid-gap: 24px;
  --content-max-width: 760px;
  --header-height: 72px;
  --layout-inline-padding: 0px;
  --nav-surface: rgba(11, 12, 12, 0.72);
  --scroll-prompt-bottom: 40px;
  --scroll-prompt-height: 84px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --rhythm-content-top: var(--space-6);
  --rhythm-section-gap: var(--space-6);
  --rhythm-company-edge: var(--space-2);
  --rhythm-company-stack: var(--space-5);
  --rhythm-project-y: var(--space-4);
  --rhythm-project-y-mobile: var(--space-4);
  --button-hover-overlay: rgba(255, 255, 255, 0.06);
  --company-icon-hover-overlay: rgba(255, 255, 255, 0.06);
}

:root[data-etc-tone="conservative"] {
  --etc-lum-anchor: oklch(0.79 0.009 242);
  --etc-lum-row-title: oklch(0.75 0.009 242);
  --etc-lum-body: oklch(0.65 0.012 245);
  --etc-lum-tertiary: oklch(0.61 0.013 245);
  --etc-lum-link-hover: oklch(0.73 0.011 243);
  --etc-lum-row-hover-bg: oklch(0.72 0.011 245 / 0.024);
  --etc-lum-row-hover-border: oklch(0.72 0.011 245 / 0.32);
}

:root[data-etc-tone="punchier"] {
  --etc-lum-anchor: oklch(0.85 0.012 240);
  --etc-lum-row-title: oklch(0.81 0.012 240);
  --etc-lum-body: oklch(0.70 0.015 244);
  --etc-lum-tertiary: oklch(0.67 0.016 244);
  --etc-lum-link-hover: oklch(0.80 0.014 241);
  --etc-lum-row-hover-bg: oklch(0.76 0.014 244 / 0.038);
  --etc-lum-row-hover-border: oklch(0.76 0.014 244 / 0.32);
}