/* ==========================================================================
   Decimal Design System — Decimal UI Components (Component Layer)
   Mode-scoped component color tokens. Each token maps to a color profile
   token per mode. Can be used directly in UI elements and components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light Mode (default)
   -------------------------------------------------------------------------- */
:root,
[data-mode="light"] {

  /* Glyphs */
  --color-glyphs-prominent: var(--color-base-100);
  --color-glyphs-default: var(--color-base-80);
  --color-glyphs-accent: var(--color-base-50);
  --color-glyphs-knockout: var(--color-contrast-min);
  --color-glyphs-disabled: var(--color-base-30);

  /* Glyphs / Action */
  --color-glyphs-action-neutral-enabled: var(--color-brand-50);
  --color-glyphs-action-neutral-hover: var(--color-brand-60);
  --color-glyphs-action-neutral-press: var(--color-brand-70);
  --color-glyphs-action-visited: var(--color-brand-60);
  --color-glyphs-action-neutral-alt-enabled: var(--color-base-80);
  --color-glyphs-action-neutral-alt-hover: var(--color-base-90);
  --color-glyphs-action-neutral-alt-press: var(--color-base-100);
  --color-glyphs-action-neutral-inverse-enabled: var(--color-brand-40);
  --color-glyphs-action-neutral-inverse-hover: var(--color-brand-30);
  --color-glyphs-action-neutral-inverse-press: var(--color-brand-20);
  --color-glyphs-action-neutral-inverse-visited: var(--color-brand-30);
  --color-glyphs-action-constructive-enabled: var(--color-success-50);
  --color-glyphs-action-constructive-hover: var(--color-success-60);
  --color-glyphs-action-constructive-press: var(--color-success-20);
  --color-glyphs-action-destructive-enabled: var(--color-danger-50);
  --color-glyphs-action-destructive-hover: var(--color-danger-50);
  --color-glyphs-action-destructive-press: var(--color-danger-50);
  --color-glyphs-action-buy-enabled: var(--color-success-50);
  --color-glyphs-action-buy-hover: var(--color-success-60);
  --color-glyphs-action-buy-press: var(--color-success-20);
  --color-glyphs-action-sell-enabled: var(--color-danger-50);
  --color-glyphs-action-sell-hover: var(--color-danger-50);
  --color-glyphs-action-sell-press: var(--color-danger-50);

  /* Glyphs / Feedback */
  --color-glyphs-feedback-info: var(--color-brand-60);
  --color-glyphs-feedback-success: var(--color-success-60);
  --color-glyphs-feedback-warning: var(--color-warning-60);
  --color-glyphs-feedback-danger: var(--color-danger-60);
  --color-glyphs-feedback-inverse-success: var(--color-success-60);
  --color-glyphs-feedback-inverse-danger: var(--color-danger-60);

  /* Surface */
  --color-surface-0: var(--color-contrast-min);
  --color-surface-1: var(--color-base-0);
  --color-surface-2: var(--color-base-10);
  --color-surface-3: var(--color-brand-0);
  --color-surface-inverse: var(--color-base-90);

  /* Effect */
  --color-effect-dropshadow: var(--color-base-A20-100);

  /* Masthead */
  --color-masthead-glyphs: var(--color-contrast-min);
  --color-masthead-fill-default-background: var(--color-base-90);
  --color-masthead-fill-default-badge: var(--color-brand-30);

  /* Fill / Action / Primary */
  --color-fill-action-primary-disabled: var(--color-base-10);

  /* Fill / Action / Primary / Neutral */
  --color-fill-action-primary-neutral-enabled: var(--color-brand-50);
  --color-fill-action-primary-neutral-hover: var(--color-brand-60);
  --color-fill-action-primary-neutral-press: var(--color-brand-70);

  /* Fill / Action / Primary / Constructive */
  --color-fill-action-primary-constructive-enabled: var(--color-success-50);
  --color-fill-action-primary-constructive-hover: var(--color-success-60);
  --color-fill-action-primary-constructive-press: var(--color-success-70);

  /* Fill / Action / Primary / Destructive */
  --color-fill-action-primary-destructive-enabled: var(--color-danger-50);
  --color-fill-action-primary-destructive-hover: var(--color-danger-60);
  --color-fill-action-primary-destructive-press: var(--color-danger-70);

  /* Fill / Action / Primary / Buy */
  --color-fill-action-primary-buy-enabled: var(--color-buy-50);
  --color-fill-action-primary-buy-hover: var(--color-buy-60);
  --color-fill-action-primary-buy-press: var(--color-buy-70);

  /* Fill / Action / Primary / Sell */
  --color-fill-action-primary-sell-enabled: var(--color-sell-50);
  --color-fill-action-primary-sell-hover: var(--color-sell-60);
  --color-fill-action-primary-sell-press: var(--color-sell-70);

  /* Fill / Action / Default */
  --color-fill-action-default-enabled: var(--color-contrast-min);
  --color-fill-action-default-disabled: var(--color-contrast-min);

  /* Fill / Action / Default / Neutral */
  --color-fill-action-default-neutral-hover: var(--color-brand-10);
  --color-fill-action-default-neutral-press: var(--color-brand-20);

  /* Fill / Action / Default / Constructive */
  --color-fill-action-default-constructive-hover: var(--color-success-10);
  --color-fill-action-default-constructive-press: var(--color-success-20);

  /* Fill / Action / Default / Destructive */
  --color-fill-action-default-destructive-hover: var(--color-danger-10);
  --color-fill-action-default-destructive-press: var(--color-danger-20);

  /* Fill / Feedback */
  --color-fill-feedback-neutral: var(--color-base-10);
  --color-fill-feedback-info: var(--color-brand-10);
  --color-fill-feedback-success: var(--color-success-10);
  --color-fill-feedback-warning: var(--color-warning-10);
  --color-fill-feedback-danger: var(--color-danger-10);

  /* Fill / Controls */
  --color-fill-controls-disabled: var(--color-base-10);

  /* Fill / Controls / Default */
  --color-fill-controls-default-enabled: var(--color-contrast-min);
  --color-fill-controls-default-hover: var(--color-highlight-10);
  --color-fill-controls-default-press: var(--color-highlight-20);
  --color-fill-controls-default-prefilled: var(--color-brand-0);

  /* Fill / Controls / Default / Alt */
  --color-fill-controls-default-alt-enabled: var(--color-base-0);

  /* Fill / Controls / Selected */
  --color-fill-controls-selected-enabled: var(--color-brand-10);
  --color-fill-controls-selected-hover: var(--color-brand-20);
  --color-fill-controls-selected-press: var(--color-brand-30);

  /* Fill / Controls / Selected / Alt */
  --color-fill-controls-selected-alt-enabled: var(--color-base-70);
  --color-fill-controls-selected-alt-hover: var(--color-base-80);
  --color-fill-controls-selected-alt-press: var(--color-base-90);

  /* Fill / Data */
  --color-fill-data-header: var(--color-brand-0);
  --color-fill-data-header-row-group: var(--color-base-10);

  /* Fill / Data / Row / A / Default */
  --color-fill-data-row-a-default: var(--color-contrast-min);

  /* Fill / Data / Row / B / Default */
  --color-fill-data-row-b-default: var(--color-base-0);

  /* Fill / Data / Row / Default */
  --color-fill-data-row-default-hover: var(--color-highlight-10);
  --color-fill-data-row-default-press: var(--color-highlight-20);

  /* Fill / Data / Row / Selected */
  --color-fill-data-row-selected-enabled: var(--color-brand-10);
  --color-fill-data-row-selected-hover: var(--color-brand-20);
  --color-fill-data-row-selected-press: var(--color-brand-30);

  /* Stroke */
  --color-stroke-focus: var(--color-brand-50);

  /* Stroke / Action */
  --color-stroke-action-disabled: var(--color-base-30);
  --color-stroke-action-knockout: var(--color-contrast-min);

  /* Stroke / Action / Neutral */
  --color-stroke-action-neutral-enabled: var(--color-brand-50);
  --color-stroke-action-neutral-hover: var(--color-brand-60);
  --color-stroke-action-neutral-press: var(--color-brand-70);

  /* Stroke / Action / Constructive */
  --color-stroke-action-constructive-enabled: var(--color-success-50);
  --color-stroke-action-constructive-hover: var(--color-success-60);
  --color-stroke-action-constructive-press: var(--color-success-70);

  /* Stroke / Action / Destructive */
  --color-stroke-action-destructive-enabled: var(--color-danger-50);
  --color-stroke-action-destructive-hover: var(--color-danger-60);
  --color-stroke-action-destructive-press: var(--color-danger-70);

  /* Stroke / Feedback */
  --color-stroke-feedback-neutral: var(--color-base-50);
  --color-stroke-feedback-info: var(--color-brand-50);
  --color-stroke-feedback-success: var(--color-success-50);
  --color-stroke-feedback-warning: var(--color-warning-50);
  --color-stroke-feedback-danger: var(--color-danger-50);

  /* Stroke / Controls / Default */
  --color-stroke-controls-default-enabled: var(--color-base-50);
  --color-stroke-controls-default-hover: var(--color-base-70);
  --color-stroke-controls-default-press: var(--color-base-90);
  --color-stroke-controls-default-disabled: var(--color-base-30);
  --color-stroke-controls-default-selected: var(--color-brand-50);

  /* Stroke / Controls / Alt */
  --color-stroke-controls-alt-enabled: var(--color-base-20);
  --color-stroke-controls-alt-selected: var(--color-base-50);

  /* Stroke / Controls / Error */
  --color-stroke-controls-error-enabled: var(--color-danger-50);
  --color-stroke-controls-error-hover: var(--color-danger-60);
  --color-stroke-controls-error-press: var(--color-danger-70);

  /* Stroke / Data */
  --color-stroke-data-accent: var(--color-base-30);

  /* Stroke / General */
  --color-stroke-general-accent: var(--color-base-20);
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */
[data-mode="dark"] {

  /* Glyphs */
  --color-glyphs-prominent: var(--color-contrast-min);
  --color-glyphs-default: var(--color-base-0);
  --color-glyphs-accent: var(--color-base-30);
  --color-glyphs-knockout: var(--color-contrast-max);
  --color-glyphs-disabled: var(--color-base-50);

  /* Glyphs / Action */
  --color-glyphs-action-neutral-enabled: var(--color-brand-40);
  --color-glyphs-action-neutral-hover: var(--color-brand-30);
  --color-glyphs-action-neutral-press: var(--color-brand-20);
  --color-glyphs-action-visited: var(--color-brand-30);
  --color-glyphs-action-neutral-alt-enabled: var(--color-base-10);
  --color-glyphs-action-neutral-alt-hover: var(--color-base-0);
  --color-glyphs-action-neutral-alt-press: var(--color-contrast-min);
  --color-glyphs-action-neutral-inverse-enabled: var(--color-brand-50);
  --color-glyphs-action-neutral-inverse-hover: var(--color-brand-60);
  --color-glyphs-action-neutral-inverse-press: var(--color-brand-70);
  --color-glyphs-action-neutral-inverse-visited: var(--color-brand-60);
  --color-glyphs-action-constructive-enabled: var(--color-success-40);
  --color-glyphs-action-constructive-hover: var(--color-success-30);
  --color-glyphs-action-constructive-press: var(--color-success-40);
  --color-glyphs-action-destructive-enabled: var(--color-danger-40);
  --color-glyphs-action-destructive-hover: var(--color-danger-40);
  --color-glyphs-action-destructive-press: var(--color-danger-40);
  --color-glyphs-action-buy-enabled: var(--color-success-40);
  --color-glyphs-action-buy-hover: var(--color-success-30);
  --color-glyphs-action-buy-press: var(--color-success-40);
  --color-glyphs-action-sell-enabled: var(--color-danger-40);
  --color-glyphs-action-sell-hover: var(--color-danger-40);
  --color-glyphs-action-sell-press: var(--color-danger-40);

  /* Glyphs / Feedback */
  --color-glyphs-feedback-info: var(--color-brand-30);
  --color-glyphs-feedback-success: var(--color-success-30);
  --color-glyphs-feedback-warning: var(--color-warning-30);
  --color-glyphs-feedback-danger: var(--color-danger-30);
  --color-glyphs-feedback-inverse-success: var(--color-success-30);
  --color-glyphs-feedback-inverse-danger: var(--color-danger-30);

  /* Surface */
  --color-surface-0: var(--color-base-90);
  --color-surface-1: var(--color-base-80);
  --color-surface-2: var(--color-base-100);
  --color-surface-3: var(--color-base-80);
  --color-surface-inverse: var(--color-contrast-min);

  /* Effect */
  --color-effect-dropshadow: var(--color-base-A20-100);

  /* Masthead */
  --color-masthead-glyphs: var(--color-contrast-min);
  --color-masthead-fill-default-background: var(--color-base-90);
  --color-masthead-fill-default-badge: var(--color-brand-30);

  /* Fill / Action / Primary */
  --color-fill-action-primary-disabled: var(--color-base-70);

  /* Fill / Action / Primary / Neutral */
  --color-fill-action-primary-neutral-enabled: var(--color-brand-30);
  --color-fill-action-primary-neutral-hover: var(--color-brand-40);
  --color-fill-action-primary-neutral-press: var(--color-brand-50);

  /* Fill / Action / Primary / Constructive */
  --color-fill-action-primary-constructive-enabled: var(--color-success-30);
  --color-fill-action-primary-constructive-hover: var(--color-success-40);
  --color-fill-action-primary-constructive-press: var(--color-success-50);

  /* Fill / Action / Primary / Destructive */
  --color-fill-action-primary-destructive-enabled: var(--color-danger-30);
  --color-fill-action-primary-destructive-hover: var(--color-danger-40);
  --color-fill-action-primary-destructive-press: var(--color-danger-50);

  /* Fill / Action / Primary / Buy */
  --color-fill-action-primary-buy-enabled: var(--color-buy-30);
  --color-fill-action-primary-buy-hover: var(--color-buy-40);
  --color-fill-action-primary-buy-press: var(--color-buy-50);

  /* Fill / Action / Primary / Sell */
  --color-fill-action-primary-sell-enabled: var(--color-sell-30);
  --color-fill-action-primary-sell-hover: var(--color-sell-40);
  --color-fill-action-primary-sell-press: var(--color-sell-50);

  /* Fill / Action / Default */
  --color-fill-action-default-enabled: var(--color-base-90);
  --color-fill-action-default-disabled: var(--color-base-90);

  /* Fill / Action / Default / Neutral */
  --color-fill-action-default-neutral-hover: var(--color-base-100);
  --color-fill-action-default-neutral-press: var(--color-contrast-max);

  /* Fill / Action / Default / Constructive */
  --color-fill-action-default-constructive-hover: var(--color-base-100);
  --color-fill-action-default-constructive-press: var(--color-contrast-max);

  /* Fill / Action / Default / Destructive */
  --color-fill-action-default-destructive-hover: var(--color-base-100);
  --color-fill-action-default-destructive-press: var(--color-contrast-max);

  /* Fill / Feedback */
  --color-fill-feedback-neutral: var(--color-base-100);
  --color-fill-feedback-info: var(--color-base-100);
  --color-fill-feedback-success: var(--color-base-100);
  --color-fill-feedback-warning: var(--color-base-100);
  --color-fill-feedback-danger: var(--color-base-100);

  /* Fill / Controls */
  --color-fill-controls-disabled: var(--color-base-80);

  /* Fill / Controls / Default */
  --color-fill-controls-default-enabled: var(--color-base-90);
  --color-fill-controls-default-hover: var(--color-base-100);
  --color-fill-controls-default-press: var(--color-contrast-max);
  --color-fill-controls-default-prefilled: var(--color-base-100);

  /* Fill / Controls / Default / Alt */
  --color-fill-controls-default-alt-enabled: var(--color-base-70);

  /* Fill / Controls / Selected */
  --color-fill-controls-selected-enabled: var(--color-contrast-max);
  --color-fill-controls-selected-hover: var(--color-base-100);
  --color-fill-controls-selected-press: var(--color-base-90);

  /* Fill / Controls / Selected / Alt */
  --color-fill-controls-selected-alt-enabled: var(--color-base-10);
  --color-fill-controls-selected-alt-hover: var(--color-base-20);
  --color-fill-controls-selected-alt-press: var(--color-base-30);

  /* Fill / Data */
  --color-fill-data-header: var(--color-base-80);
  --color-fill-data-header-row-group: var(--color-base-80);

  /* Fill / Data / Row / A / Default */
  --color-fill-data-row-a-default: var(--color-base-90);

  /* Fill / Data / Row / B / Default */
  --color-fill-data-row-b-default: var(--color-base-90);

  /* Fill / Data / Row / Default */
  --color-fill-data-row-default-hover: var(--color-contrast-max);
  --color-fill-data-row-default-press: var(--color-contrast-max);

  /* Fill / Data / Row / Selected */
  --color-fill-data-row-selected-enabled: var(--color-contrast-max);
  --color-fill-data-row-selected-hover: var(--color-base-100);
  --color-fill-data-row-selected-press: var(--color-base-80);

  /* Stroke */
  --color-stroke-focus: var(--color-base-30);

  /* Stroke / Action */
  --color-stroke-action-disabled: var(--color-base-60);
  --color-stroke-action-knockout: var(--color-contrast-max);

  /* Stroke / Action / Neutral */
  --color-stroke-action-neutral-enabled: var(--color-brand-40);
  --color-stroke-action-neutral-hover: var(--color-brand-30);
  --color-stroke-action-neutral-press: var(--color-brand-20);

  /* Stroke / Action / Constructive */
  --color-stroke-action-constructive-enabled: var(--color-success-40);
  --color-stroke-action-constructive-hover: var(--color-success-30);
  --color-stroke-action-constructive-press: var(--color-success-20);

  /* Stroke / Action / Destructive */
  --color-stroke-action-destructive-enabled: var(--color-danger-40);
  --color-stroke-action-destructive-hover: var(--color-danger-30);
  --color-stroke-action-destructive-press: var(--color-danger-20);

  /* Stroke / Feedback */
  --color-stroke-feedback-neutral: var(--color-base-30);
  --color-stroke-feedback-info: var(--color-brand-30);
  --color-stroke-feedback-success: var(--color-success-30);
  --color-stroke-feedback-warning: var(--color-warning-30);
  --color-stroke-feedback-danger: var(--color-danger-30);

  /* Stroke / Controls / Default */
  --color-stroke-controls-default-enabled: var(--color-base-50);
  --color-stroke-controls-default-hover: var(--color-base-0);
  --color-stroke-controls-default-press: var(--color-contrast-min);
  --color-stroke-controls-default-disabled: var(--color-base-70);
  --color-stroke-controls-default-selected: var(--color-brand-30);

  /* Stroke / Controls / Alt */
  --color-stroke-controls-alt-enabled: var(--color-base-100);
  --color-stroke-controls-alt-selected: var(--color-contrast-max);

  /* Stroke / Controls / Error */
  --color-stroke-controls-error-enabled: var(--color-danger-30);
  --color-stroke-controls-error-hover: var(--color-danger-40);
  --color-stroke-controls-error-press: var(--color-danger-50);

  /* Stroke / Data */
  --color-stroke-data-accent: var(--color-base-60);

  /* Stroke / General */
  --color-stroke-general-accent: var(--color-base-80);
}