carmanagement/apps/homepage/src/styles/component-tokens.css

/*
 * Phase 11 component-facing token layer.
 * Raw palette values remain in the immutable Phase 9 token source. Components consume only
 * the semantic aliases below. Added roles are documented in docs/TOKEN_IMPLEMENTATION_v1.0.md.
 */
:root {
  --surface-page: var(--color-canvas);
  --surface-primary: var(--color-surface);
  --surface-elevated: var(--color-surface-raised);
  --surface-muted: var(--color-surface-muted);
  --surface-strong: var(--color-surface-strong);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-subdued: var(--color-gray-500);
  --text-inverse: var(--color-on-inverse);
  --border-standard: var(--color-border);
  --border-strong: var(--color-border-strong);
  --interactive-primary: var(--color-action-primary);
  --interactive-primary-hover: var(--color-action-primary-hover);
  --interactive-conversion: var(--color-action-conversion);
  --interactive-conversion-hover: var(--color-action-conversion-hover);
  --interactive-danger: var(--color-red-700);
  --link-default: var(--color-action-primary);
  --link-hover: var(--color-action-primary-hover);
  --focus-ring: var(--color-focus);
  --status-success-surface: var(--color-green-100);
  --status-success-text: var(--color-green-700);
  --status-warning-surface: var(--color-amber-100);
  --status-warning-text: var(--color-amber-800);
  --status-error-surface: var(--color-red-100);
  --status-error-text: var(--color-red-700);
  --status-info-surface: var(--color-soft-blue);
  --status-info-text: var(--color-blue-800);
  --overlay-scrim: color-mix(in srgb, var(--color-navy-950) 72%, transparent);
  --control-disabled-surface: var(--color-gray-100);
  --control-disabled-text: var(--color-gray-600);
  --selection-surface: var(--color-blue-200);
  --selection-text: var(--color-gray-900);
  --skeleton-base: var(--color-surface-strong);
  --skeleton-highlight: var(--color-surface-raised);
  --shadow-subtle: 0 1px 2px var(--shadow-color);
  --shadow-card: 0 20px 60px var(--shadow-color);
  --shadow-overlay: 0 28px 80px var(--shadow-color);
  --container-wide: var(--size-container-max);
  --container-content: 960px;
  --container-reading: 720px;
  --layout-gutter: clamp(var(--space-4), 4vw, var(--space-10));
  --section-space: clamp(var(--space-12), 8vw, var(--space-24));
  --header-min-block-size: 76px;
  --header-offset: 92px;
  --layer-base: 0;
  --layer-sticky: 100;
  --layer-overlay: 500;
  --layer-skip-link: 1000;
  --opacity-disabled: 0.62;
  --type-display-size: clamp(2.25rem, 6vw, 4.75rem);
  --type-heading-1-size: clamp(2rem, 5vw, 4rem);
  --type-heading-2-size: clamp(1.75rem, 3vw, 2.75rem);
  --type-heading-3-size: clamp(1.25rem, 2vw, 1.75rem);
  --type-body-large-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  --type-body-size: 1rem;
  --type-label-size: 0.875rem;
  --type-caption-size: 0.8125rem;
  --line-display: 1.05;
  --line-heading: 1.18;
  --line-body: 1.65;
  --line-arabic-body: 1.85;
  --tracking-display: -0.035em;
  --tracking-label: 0.04em;
}

html[data-theme='dark'] {
  --text-subdued: #a8a29e;
  --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
  --status-success-text: var(--color-green-100);
  --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
  --status-warning-text: var(--color-amber-100);
  --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
  --status-error-text: var(--color-red-100);
  --status-info-text: var(--color-blue-100);
  --control-disabled-surface: var(--color-navy-800);
  --control-disabled-text: var(--color-gray-300);
  --selection-surface: var(--color-blue-800);
  --selection-text: var(--color-gray-25);
}

/* CSS-only fallback for system theme when JavaScript is unavailable or delayed. */
@media (prefers-color-scheme: dark) {
  html[data-theme-preference='system'] {
    --surface-page: var(--color-navy-950);
    --surface-primary: var(--color-navy-900);
    --surface-elevated: var(--color-navy-850);
    --surface-muted: var(--color-navy-900);
    --surface-strong: var(--color-navy-800);
    --text-primary: #f5f5f4;
    --text-secondary: #d6d3d1;
    --text-subdued: #a8a29e;
    --text-inverse: var(--color-navy-950);
    --border-standard: var(--color-navy-800);
    --border-strong: #1d4ed8;
    --interactive-primary: var(--color-action-primary);
    --interactive-primary-hover: var(--color-action-primary-hover);
    --interactive-conversion: var(--color-orange-400);
    --interactive-conversion-hover: var(--color-orange-100);
    --link-default: var(--color-action-primary);
    --link-hover: var(--color-action-primary-hover);
    --focus-ring: var(--color-orange-400);
    --status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
    --status-success-text: var(--color-green-100);
    --status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
    --status-warning-text: var(--color-amber-100);
    --status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
    --status-error-text: var(--color-red-100);
    --status-info-surface: var(--color-navy-800);
    --status-info-text: var(--color-blue-100);
    --control-disabled-surface: var(--color-navy-800);
    --control-disabled-text: var(--color-gray-300);
    --selection-surface: var(--color-blue-800);
    --selection-text: var(--color-gray-25);
    --skeleton-base: var(--color-navy-800);
    --skeleton-highlight: var(--color-navy-850);
    --shadow-subtle: 0 1px 2px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
    --shadow-card: 0 20px 60px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
    --shadow-overlay: 0 28px 80px color-mix(in srgb, var(--color-navy-950) 78%, transparent);
    color-scheme: dark;
  }
}