MD3 tokens

/*
  DesignX MD3 token map
  Seed: #2841B8 (Paxeer blue)

  Dark is the default scheme on :root, so an app that never sets `data-theme`
  still renders correctly. Both schemes are also addressable explicitly via
  [data-theme="dark"] / [data-theme="light"] so the ThemeProvider can pin one,
  and any subtree can be inverted by setting the attribute on a wrapper.

  This file is pure custom properties — no Tailwind, no utility classes. Import
  `theme.css` alongside it to get the Tailwind v4 bridge and the dx-* utilities.
*/

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-seed: #2841b8;

  --md-sys-color-primary: #b4c5ff;
  --md-sys-color-on-primary: #002878;
  --md-sys-color-primary-container: #3d56ce;
  --md-sys-color-on-primary-container: #dce1ff;
  --md-sys-color-primary-fixed: #dce1ff;
  --md-sys-color-primary-fixed-dim: #b4c5ff;
  --md-sys-color-on-primary-fixed: #00174b;
  --md-sys-color-on-primary-fixed-variant: #14369f;

  --md-sys-color-secondary: #c0c5dd;
  --md-sys-color-on-secondary: #2a3042;
  --md-sys-color-secondary-container: #404659;
  --md-sys-color-on-secondary-container: #dce1f9;
  --md-sys-color-secondary-fixed: #dce1f9;
  --md-sys-color-secondary-fixed-dim: #c0c5dd;
  --md-sys-color-on-secondary-fixed: #151b2c;
  --md-sys-color-on-secondary-fixed-variant: #404659;

  --md-sys-color-tertiary: #e0bbdd;
  --md-sys-color-on-tertiary: #412743;
  --md-sys-color-tertiary-container: #593d5b;
  --md-sys-color-on-tertiary-container: #ffd6fa;
  --md-sys-color-tertiary-fixed: #fdd7fa;
  --md-sys-color-tertiary-fixed-dim: #e0bbdd;
  --md-sys-color-on-tertiary-fixed: #2b122c;
  --md-sys-color-on-tertiary-fixed-variant: #593d5b;

  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;

  /* Non-MD3 status roles. Kept here so packs never invent their own. */
  --md-sys-color-success: #7bda8a;
  --md-sys-color-on-success: #00390f;
  --md-sys-color-success-container: #08521e;
  --md-sys-color-on-success-container: #96f7a4;

  --md-sys-color-warning: #f2bd6f;
  --md-sys-color-on-warning: #442b00;
  --md-sys-color-warning-container: #613f00;
  --md-sys-color-on-warning-container: #ffddb0;

  --md-sys-color-info: #8bcff0;
  --md-sys-color-on-info: #003549;
  --md-sys-color-info-container: #004d68;
  --md-sys-color-on-info-container: #c3e8ff;

  --md-sys-color-surface: #121318;
  --md-sys-color-on-surface: #e3e2e8;
  --md-sys-color-surface-variant: #44464f;
  --md-sys-color-on-surface-variant: #c5c6d0;
  --md-sys-color-surface-dim: #121318;
  --md-sys-color-surface-bright: #38393f;
  --md-sys-color-surface-container-lowest: #0d0e13;
  --md-sys-color-surface-container-low: #1a1b21;
  --md-sys-color-surface-container: #1e1f25;
  --md-sys-color-surface-container-high: #282a31;
  --md-sys-color-surface-container-highest: #33343b;
  --md-sys-color-surface-tint: #b4c5ff;

  --md-sys-color-outline: #8e909a;
  --md-sys-color-outline-variant: #44464f;
  --md-sys-color-inverse-surface: #e3e2e8;
  --md-sys-color-inverse-on-surface: #303036;
  --md-sys-color-inverse-primary: #2841b8;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

[data-theme="light"] {
  color-scheme: light;

  --md-sys-color-primary: #2841b8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dce1ff;
  --md-sys-color-on-primary-container: #00164d;
  --md-sys-color-primary-fixed: #dce1ff;
  --md-sys-color-primary-fixed-dim: #b4c5ff;
  --md-sys-color-on-primary-fixed: #00174b;
  --md-sys-color-on-primary-fixed-variant: #14369f;

  --md-sys-color-secondary: #585e71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dce1f9;
  --md-sys-color-on-secondary-container: #151b2c;
  --md-sys-color-secondary-fixed: #dce1f9;
  --md-sys-color-secondary-fixed-dim: #c0c5dd;
  --md-sys-color-on-secondary-fixed: #151b2c;
  --md-sys-color-on-secondary-fixed-variant: #404659;

  --md-sys-color-tertiary: #725572;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fdd7fa;
  --md-sys-color-on-tertiary-container: #2b122c;
  --md-sys-color-tertiary-fixed: #fdd7fa;
  --md-sys-color-tertiary-fixed-dim: #e0bbdd;
  --md-sys-color-on-tertiary-fixed: #2b122c;
  --md-sys-color-on-tertiary-fixed-variant: #593d5b;

  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-success: #106b2a;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #96f7a4;
  --md-sys-color-on-success-container: #00210a;

  --md-sys-color-warning: #805600;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #ffddb0;
  --md-sys-color-on-warning-container: #291800;

  --md-sys-color-info: #00668a;
  --md-sys-color-on-info: #ffffff;
  --md-sys-color-info-container: #c3e8ff;
  --md-sys-color-on-info-container: #001e2c;

  --md-sys-color-surface: #fbf8ff;
  --md-sys-color-on-surface: #1a1b21;
  --md-sys-color-surface-variant: #e2e1ec;
  --md-sys-color-on-surface-variant: #44464f;
  --md-sys-color-surface-dim: #dbd9e0;
  --md-sys-color-surface-bright: #fbf8ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f2fa;
  --md-sys-color-surface-container: #efedf4;
  --md-sys-color-surface-container-high: #e9e7ef;
  --md-sys-color-surface-container-highest: #e3e2e8;
  --md-sys-color-surface-tint: #2841b8;

  --md-sys-color-outline: #757680;
  --md-sys-color-outline-variant: #c5c6d0;
  --md-sys-color-inverse-surface: #2f3036;
  --md-sys-color-inverse-on-surface: #f2f0f7;
  --md-sys-color-inverse-primary: #b4c5ff;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
}

/* Scheme-independent system tokens. */
:root {
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
  --md-sys-state-disabled-content-opacity: 0.38;
  --md-sys-state-disabled-container-opacity: 0.12;

  /* Dense MD3 focus ring */
  --md-sys-focus-ring-thickness: 2px;
  --md-sys-focus-ring-offset: 1px;

  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* MD3 elevation. Umbra/penumbra pair per level. */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --md-sys-elevation-level3: 0 4px 8px 3px rgb(0 0 0 / 0.15), 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --md-sys-elevation-level4: 0 6px 10px 4px rgb(0 0 0 / 0.15), 0 2px 3px 0 rgb(0 0 0 / 0.3);
  --md-sys-elevation-level5: 0 8px 12px 6px rgb(0 0 0 / 0.15), 0 4px 4px 0 rgb(0 0 0 / 0.3);

  /* MD3 motion. */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
}

export const seedColor = "#2841B8";

export const md3Roles = [
  "primary",
  "on-primary",
  "primary-container",
  "on-primary-container",
  "secondary",
  "on-secondary",
  "secondary-container",
  "on-secondary-container",
  "tertiary",
  "on-tertiary",
  "tertiary-container",
  "on-tertiary-container",
  "error",
  "on-error",
  "error-container",
  "on-error-container",
  "surface",
  "on-surface",
  "surface-variant",
  "on-surface-variant",
  "surface-dim",
  "surface-bright",
  "surface-container-lowest",
  "surface-container-low",
  "surface-container",
  "surface-container-high",
  "surface-container-highest",
  "outline",
  "outline-variant",
  "inverse-surface",
  "inverse-on-surface",
  "inverse-primary",
  "scrim",
  "shadow",
] as const;

export type Md3Role = (typeof md3Roles)[number];

/** Pack variants must resolve to these roles — never pack-local colors. */
export const variantRoleMap = {
  "buy-emphasis": {
    container: "primary",
    on: "on-primary",
    containerFill: "primary-container",
    onContainer: "on-primary-container",
  },
  "sell-emphasis": {
    container: "error",
    on: "on-error",
    containerFill: "error-container",
    onContainer: "on-error-container",
  },
} as const;

export type EmphasisVariant = keyof typeof variantRoleMap;

export const typefaceTokens = {
  brand: "var(--md-ref-typeface-brand)",
  plain: "var(--md-ref-typeface-plain)",
  mono: "var(--md-ref-typeface-mono)",
} as const;