globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";
@import "@fontsource-variable/geist-mono";
@import "@fontsource-variable/archivo";
@import "@fontsource/space-mono/400.css";
@import "@fontsource/space-mono/700.css";

@custom-variant dark (&:is(.dark *));
@source "../../../apps/**/*.{ts,tsx}";
@source "../../../components/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

@theme inline {
    --font-heading: var(--font-sans);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar: var(--sidebar);
    --color-chart-5: var(--chart-5);
    --color-chart-4: var(--chart-4);
    --color-chart-3: var(--chart-3);
    --color-chart-2: var(--chart-2);
    --color-chart-1: var(--chart-1);
    --color-ring: var(--ring);
    --color-input: var(--input);
    --color-border: var(--border);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-success: var(--success);
    --color-success-foreground: var(--success-foreground);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-info: var(--info);
    --color-info-foreground: var(--info-foreground);
    --color-neutral: var(--neutral);
    --color-danger: var(--danger);
    --color-long: var(--long);
    --color-short: var(--short);
    --color-accent-foreground: var(--accent-foreground);
    --color-accent: var(--accent);
    --color-muted-foreground: var(--muted-foreground);
    --color-muted: var(--muted);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-secondary: var(--secondary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary: var(--primary);
    --color-popover-foreground: var(--popover-foreground);
    --color-popover: var(--popover);
    --color-card-foreground: var(--card-foreground);
    --color-card: var(--card);
    --color-foreground: var(--foreground);
    --color-background: var(--background);
    --color-surface-canvas: var(--surface-canvas);
    --color-surface-sunken: var(--surface-sunken);
    --color-surface-raised: var(--surface-raised);
    --color-surface-overlay: var(--surface-overlay);
    --color-surface-interactive: var(--surface-interactive);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-tertiary);
    --color-text-disabled: var(--text-disabled);
    --color-text-inverse: var(--text-inverse);
    --color-text-link: var(--text-link);
    --color-long-subtle: var(--long-subtle);
    --color-long-border: var(--long-border);
    --color-short-subtle: var(--short-subtle);
    --color-short-border: var(--short-border);
    --color-liquidation: var(--liquidation);
    --color-liquidation-foreground: var(--liquidation-foreground);
    --color-liquidation-subtle: var(--liquidation-subtle);
    --color-liquidation-border: var(--liquidation-border);
    --color-success-subtle: var(--success-subtle);
    --color-success-border: var(--success-border);
    --color-warning-subtle: var(--warning-subtle);
    --color-warning-border: var(--warning-border);
    --color-info-subtle: var(--info-subtle);
    --color-info-border: var(--info-border);
    --color-danger-subtle: var(--danger-subtle);
    --color-danger-border: var(--danger-border);
    --color-neutral-subtle: var(--neutral-subtle);
    --color-neutral-border: var(--neutral-border);
    
    /*
     * Shape and radius scale (DS-008).
     *
     * Defines a restrained, consistent border-radius system for UI elements.
     * The scale provides five named sizes plus 'full' for pills and circular elements.
     * 
     * Component-to-radius mapping:
     * - sm (0.25rem / 4px):   Small controls (buttons, inputs, badges, tabs)
     * - md (0.375rem / 6px):  Medium controls (dropdowns, selects, chips)
     * - lg (0.5rem / 8px):    Cards, panels, modals, popovers
     * - xl (0.75rem / 12px):  Large cards, feature panels, section containers
     * - full (9999px):        Pills, avatar badges, status indicators (fully rounded)
     *
     * Usage: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full
     */
    --radius-sm: 0.25rem;   /* 4px  - buttons, inputs, badges, tabs */
    --radius-md: 0.375rem;  /* 6px  - dropdowns, selects, chips */
    --radius-lg: 0.5rem;    /* 8px  - cards, panels, modals */
    --radius-xl: 0.75rem;   /* 12px - large cards, feature sections */
    --radius-full: 9999px;  /* Fully rounded - pills, avatars, indicators */
    
    --font-sans: 'Geist Variable', sans-serif;
    --font-mono: 'Geist Mono Variable', ui-monospace, monospace;

    /*
     * Micro-typography scale (DS-050).
     *
     * The default Tailwind scale (xs=12px, sm=14px, base=16px, lg=18px) has
     * no steps for the dense, data-table-heavy UI in this app (order books,
     * position tables, referral stats), which had accumulated 250+ ad hoc
     * `text-[Npx]` arbitrary values across the codebase instead. These are
     * the exact values that usage actually converged on, promoted to named
     * tokens so they're an intentional, documented scale instead of
     * per-callsite magic numbers. Named by pixel value (at the default
     * 16px root) rather than a semantic step name (2xs/3xs/...) since a
     * dozen-plus half-pixel steps don't fit a small semantic vocabulary
     * without the names becoming arbitrary themselves.
     */
    --text-8: 0.5rem;         /* 8px  — small badge / dense metadata */
    --text-9-5: 0.59375rem;   /* 9.5px */
    --text-10: 0.625rem;      /* 10px */
    --text-10-5: 0.65625rem;  /* 10.5px */
    --text-11: 0.6875rem;     /* 11px */
    --text-11-5: 0.71875rem;  /* 11.5px */
    --text-12-5: 0.78125rem;  /* 12.5px */
    --text-13: 0.8125rem;     /* 13px */
    --text-13-5: 0.84375rem;  /* 13.5px */
    --text-14-5: 0.90625rem;  /* 14.5px */
    --text-15: 0.9375rem;     /* 15px */
    --text-17: 1.0625rem;     /* 17px */
    --text-22: 1.375rem;      /* 22px */
    --text-26: 1.625rem;      /* 26px */
    --text-40: 2.5rem;        /* 40px */

    /*
     * Spacing scale — micro through section spacing.
     *
     * Intent-named tokens that reduce one-off arbitrary spacing values
     * across the UI. Numeric tokens follow the pixel value at the
     * default 16px root. Semantic tokens encode density intent.
     */
    --spacing-0-5: 0.125rem;   /* 2px  — micro gap */
    --spacing-4-5: 1.125rem;   /* 18px — tight */
    --spacing-7: 1.75rem;      /* 28px */
    --spacing-9: 2.25rem;      /* 36px */
    --spacing-14: 3.5rem;      /* 56px — section */
    --spacing-18: 4.5rem;      /* 72px — section */
    --spacing-20: 5rem;        /* 80px — section */

    /* Control height density tokens — compact / default / comfortable */
    --height-compact: 1.25rem;       /* 20px  — h-5 equivalent */
    --height-default: 1.75rem;       /* 28px  — h-7 equivalent */
    --height-comfortable: 2.5rem;    /* 40px  — h-10 equivalent */

    /*
     * Page gutters — responsive horizontal padding at layout edges.
     *
     * Usage:
     *   px-[var(--gutter-page-sm)]
     *   md:px-[var(--gutter-page-md)]
     *   lg:px-[var(--gutter-page-lg)]
     */
    --gutter-page-sm: 1rem;          /* 16px — mobile */
    --gutter-page-md: 1.5rem;        /* 24px — tablet */
    --gutter-page-lg: 2rem;          /* 32px — desktop */
}

/*
 * GMX reference palette and landing theme (GF3).
 *
 * Source material for the GrantFox 3 theme revamp — a faithful translation of
 * GMX's landing theme (gmx-io/gmx-interface @ e27759a, `landing/`) into Tailwind
 * v4 tokens. Namespaced `gmx-*` so it can never collide with semantic tokens;
 * the `.dark` theme and the landing page consume these, they are not consumed
 * directly by app components. Full reference, rationale, and the GMX→SO4 mapping
 * table: docs/gf_3/001_theme_update.md.
 *
 * Fonts: GMX uses the paid TTHoves family, which cannot be redistributed. The
 * approved OFL stand-in is Archivo (400/500); Space Mono is the same font GMX
 * uses for code. See 001_theme_update.md §1.1 for the licensed-TTHoves upgrade
 * path (drop files in apps/web/public/fonts/tthoves/, prepend "TTHoves" to
 * --font-landing-sans).
 *
 * Declared `@theme static` so the full palette is always emitted on `:root` —
 * the default `@theme` prunes unused variables, and this set is reference
 * material consumed by `var(--color-gmx-*)` in raw CSS as well as utilities.
 */
@theme static {
    --color-gmx-slate-950: oklch(0.1545 0.0191 283.94);  /* #0B0B14 */
    --color-gmx-slate-900: oklch(0.1493 0.0216 278.91);  /* #090A14 — page bg */
    --color-gmx-slate-800: oklch(0.2157 0.0294 280.68);  /* #171827 — cards */
    --color-gmx-slate-700: oklch(0.2510 0.0360 278.84);  /* #1E2033 */
    --color-gmx-slate-650: oklch(0.2817 0.0443 277.70);  /* #24273F */
    --color-gmx-slate-600: oklch(0.3862 0.0663 278.34);  /* #3C4067 — borders */
    --color-gmx-slate-500: oklch(0.7242 0.0478 281.04);  /* #A0A3C4 — muted text */
    --color-gmx-slate-400: oklch(0.8145 0.0364 282.07);  /* #BEC0DA — secondary text */
    --color-gmx-light-150: oklch(0.9705 0.0054 274.97);  /* #F4F5F9 — light band */
    --color-gmx-blue-100: oklch(0.8136 0.0838 261.37);   /* #A4C3F9 */
    --color-gmx-blue-300: oklch(0.6651 0.1789 275.83);   /* #7885ff — hover accent */
    --color-gmx-blue-400: oklch(0.5099 0.2688 268.08);   /* #2D42FC — brand/CTA */
    --color-gmx-stroke-primary: oklch(0.3591 0.0539 277.68);  /* #363A59 */
    --color-gmx-surface-primary: oklch(0.1959 0.0264 276.95); /* #121421 */

    --font-landing-sans: "Archivo Variable", "Geist Variable", sans-serif;
    --font-landing-code: "Space Mono", "Geist Mono Variable", monospace;

    /* GMX line-heights — headings tighter than 1.0 is the signature look */
    --leading-heading-lg: 0.98;
    --leading-heading-md: 1.08;
    --leading-body-sm: 1.36;
    --leading-body-md: 1.44;

    /* Tweet/testimonial marquee (SocialSection) */
    --animate-scroll: scroll 60s linear infinite;
    @keyframes scroll {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }
}

/*
 * GMX landing typography and button components (GF3).
 *
 * Verbatim translations of GMX's `fontComponentsPlugin` classes to 16px-root
 * rems (GMX runs a 10px root; SO4 does not — see 001_theme_update.md §2).
 * Landing-scoped: use on the landing route, not in app components, which keep
 * the DS-060 text-* roles above.
 */
@utility text-heading-1 {
    font-size: 3.125rem;           /* 50px */
    font-weight: 500;
    line-height: var(--leading-heading-lg);
    letter-spacing: -2.6px;
    @media (min-width: 640px) {
        font-size: 6.25rem;        /* 100px */
        letter-spacing: -5.2px;
    }
}
@utility text-heading-2 {
    font-size: 2.5rem;             /* 40px */
    font-weight: 500;
    line-height: var(--leading-heading-lg);
    letter-spacing: -2.08px;
    @media (min-width: 640px) {
        font-size: 5rem;           /* 80px */
        letter-spacing: -4.16px;
    }
}
@utility text-heading-3 {
    font-size: 2rem;               /* 32px */
    font-weight: 500;
    line-height: var(--leading-heading-md);
    letter-spacing: -0.96px;
}
@utility text-heading-4 {
    font-size: 1.5rem;             /* 24px */
    font-weight: 500;
    line-height: var(--leading-heading-md);
    letter-spacing: -0.96px;
}
@utility text-subheadline {
    font-size: 0.875rem;           /* 14px */
    font-weight: 500;
    line-height: var(--leading-body-sm);
    letter-spacing: 0.028px;
    color: var(--color-gmx-slate-400);
}
@utility text-description {
    font-size: 1rem;               /* 16px */
    font-weight: 400;
    line-height: var(--leading-body-sm);
    letter-spacing: 0.028px;
    color: var(--color-gmx-slate-400);
}
@utility btn-landing {
    background-color: var(--color-gmx-blue-400);
    color: #fff;
    font-weight: 500;
    transition-property: color, background-color, border-color;
    transition-duration: 180ms;
    @media (hover: hover) {
        &:hover {
            background: linear-gradient(0deg, rgba(9, 10, 21, 0.1) 0%, rgba(9, 10, 21, 0.1) 100%),
                var(--color-gmx-blue-400);
        }
        &:active {
            background: linear-gradient(0deg, rgba(9, 10, 21, 0.2) 0%, rgba(9, 10, 21, 0.2) 100%),
                var(--color-gmx-blue-400);
        }
    }
}
/* GMX's 0.5px hairline separators (border-1/2 in their v3 config) */
@utility border-hairline {
    border-width: 0.5px;
}
/* Marquee helpers (GMX customUtilsPlugin) */
@utility animate-pause {
    animation-play-state: paused;
}
@utility scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
}

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.5 0.134 242.749);
    --primary-foreground: oklch(0.977 0.013 236.62);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: var(--long);
    --chart-2: var(--short);
    --chart-3: var(--liquidation);
    --chart-4: var(--info);
    --chart-5: var(--neutral);

    /* Semantic status roles — shared by badges, alerts, numeric text and the
       trading chart so a "long" candle is the same green as a positive PnL. */
    --success: oklch(0.596 0.145 163.225);
    --success-foreground: oklch(0.985 0 0);
    --warning: oklch(0.681 0.162 75.834);
    --warning-foreground: oklch(0.21 0 0);
    --info: oklch(0.546 0.245 262.881);
    --info-foreground: oklch(0.985 0 0);
    --neutral: oklch(0.556 0 0);
    --danger: var(--destructive);
    --long: var(--success);
    --short: var(--destructive);

    --long-foreground: var(--success-foreground);
    --long-subtle: oklch(0.18 0.05 163.225);
    --long-border: oklch(0.35 0.10 163.225);
    --short-foreground: var(--destructive-foreground);
    --short-subtle: oklch(0.18 0.05 27.325);
    --short-border: oklch(0.35 0.10 27.325);
    --liquidation: oklch(0.82 0.16 65);
    --liquidation-foreground: oklch(0.21 0 0);
    --liquidation-subtle: oklch(0.18 0.05 75.834);
    --liquidation-border: oklch(0.35 0.10 75.834);
    --success-subtle: oklch(0.18 0.05 163.225);
    --success-border: oklch(0.35 0.10 163.225);
    --warning-subtle: oklch(0.18 0.05 75.834);
    --warning-border: oklch(0.35 0.10 75.834);
    --info-subtle: oklch(0.18 0.05 262.881);
    --info-border: oklch(0.35 0.10 262.881);
    --danger-subtle: oklch(0.18 0.05 27.325);
    --danger-border: oklch(0.35 0.10 27.325);
    --neutral-subtle: oklch(0.20 0 0);
    --neutral-border: oklch(0.32 0 0);

    --chart-surface: oklch(0.145 0 0);
    --chart-text: var(--muted-foreground);
    --chart-grid: oklch(0.269 0 0);
    --chart-crosshair: oklch(0.44 0 0);
    --chart-crosshair-label: oklch(0.269 0 0);
    --chart-border: oklch(0.269 0 0);
    --chart-up: var(--long);
    --chart-down: var(--short);
    --chart-liquidation: var(--warning);

    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.685 0.169 237.323);
    --sidebar-primary-foreground: oklch(0.293 0.066 243.157);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    }
  body {
    @apply bg-background text-foreground;
    }
  button:not(:disabled), [role="button"]:not(:disabled) {
    cursor: pointer;
    }
}

@layer base {
  :root, .density-default {
    --density-height-control: var(--height-default);
    --density-gap: var(--spacing-4-5);
    --density-padding-cell: 0.75rem;
  }
  .density-compact {
    --density-height-control: var(--height-compact);
    --density-gap: var(--spacing-0-5);
    --density-padding-cell: 0.25rem;
  }
  .density-comfortable {
    --density-height-control: var(--height-comfortable);
    --density-gap: var(--spacing-7);
    --density-padding-cell: 1rem;
  }
  
  @media (pointer: coarse) {
    /* Ensure minimum accessible touch target size (44px) on coarse pointer devices */
    .density-compact, .density-default, .density-comfortable, :root {
       --density-height-control: 2.75rem; 
    }
  }
}

/*
 * Typography role utilities (DS-060).
 *
 * Semantic roles that bundle size, line height, weight, and tracking into
 * a single class — replaces ad-hoc combinations of text-*/font-*/leading-*
 * that previously accumulated across the codebase.
 *
 * Numeric roles additionally enable tabular figures and slashed zero via
 * font-variant-numeric, ensuring decimal-aligned columns and unambiguous
 * zeros in data tables and trading interfaces.
 */
@utility text-display {
  font-size: var(--text-40);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@utility text-display-sm {
  font-size: var(--text-26);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@utility text-page-title {
  font-size: var(--text-22);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@utility text-section-title {
  font-size: var(--text-17);
  line-height: 1.3;
  font-weight: 500;
}
@utility text-subtitle {
  font-size: var(--text-15);
  line-height: 1.4;
  font-weight: 500;
}
@utility text-body {
  font-size: var(--text-13-5);
  line-height: 1.5;
  font-weight: 400;
}
@utility text-body-sm {
  font-size: var(--text-13);
  line-height: 1.4;
  font-weight: 400;
}
@utility text-label {
  font-size: var(--text-12-5);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@utility text-label-sm {
  font-size: var(--text-11);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@utility text-caption {
  font-size: var(--text-11);
  line-height: 1.4;
  font-weight: 400;
}
@utility text-numeric-lg {
  font-family: var(--font-mono);
  font-size: var(--text-22);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums slashed-zero;
}
@utility text-numeric {
  font-family: var(--font-mono);
  font-size: var(--text-15);
  line-height: 1.3;
  font-weight: 400;
  font-variant-numeric: tabular-nums slashed-zero;
}
@utility text-numeric-sm {
  font-family: var(--font-mono);
  font-size: var(--text-12-5);
  line-height: 1.3;
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
}

/*
 * Themed scrollbars for ScrollArea (DS-079)
 *
 * Colors only — width, momentum, and overlay-vs-classic behaviour stay with the
 * platform, so a user who has asked for permanently visible scrollbars keeps
 * them. `scrollbar-color` covers Firefox and Chromium 121+; the ::-webkit rules
 * cover older Chromium and Safari.
 */
@utility scroll-area-scrollbars {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;

  &::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--surface-sunken);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: var(--radius-full);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-tertiary);
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

/*
 * Windows forced-colors mode support (DS-067)
 *
 * When Windows High Contrast Mode is active, CSS gradients, translucent
 * borders, and custom colors are replaced with system colors. These overrides
 * ensure core primitives remain operable and distinguishable.
 *
 * System color keywords:
 * - ButtonText, ButtonFace, GrayText, Highlight, HighlightText
 * - LinkText, CanvasText, Canvas, Field, FieldText
 * - Mark, MarkText
 *
 * Reference: https://drafts.csswg.org/css-color-adjust-1/#forced
 */
@media (forced-colors: active) {
  /* Base text and backgrounds */
  * {
    background-color: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
  }

  /* Buttons */
  button,
  [role="button"],
  [data-slot="button"] {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
  }

  button:hover,
  [role="button"]:hover,
  button:focus-visible,
  [role="button"]:focus-visible {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  button:disabled,
  [role="button"]:disabled,
  button[aria-disabled="true"],
  [role="button"][aria-disabled="true"] {
    color: GrayText !important;
    border-color: GrayText !important;
  }

  /* Links */
  a {
    color: LinkText !important;
    text-decoration: underline;
  }

  a:hover,
  a:focus-visible {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }

  /* Form controls */
  input,
  textarea,
  select,
  [data-slot="input"],
  [data-slot="textarea"],
  [data-slot="select"] {
    background-color: Field !important;
    color: FieldText !important;
    border: 1px solid FieldText !important;
  }

  input:focus,
  textarea:focus,
  select:focus {
    forced-color-adjust: none;
    outline: 2px solid Highlight !important;
    outline-offset: 0;
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    color: GrayText !important;
    border-color: GrayText !important;
  }

  input[aria-invalid="true"],
  textarea[aria-invalid="true"],
  [data-slot="input"][aria-invalid="true"] {
    border: 2px solid CanvasText !important;
    outline: 1px solid CanvasText !important;
    outline-offset: -3px;
  }

  /* Checkboxes and radios */
  input[type="checkbox"],
  input[type="radio"],
  [role="checkbox"],
  [role="radio"] {
    forced-color-adjust: none;
    appearance: auto;
    background-color: Field !important;
    border: 1px solid FieldText !important;
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked,
  [role="checkbox"][aria-checked="true"],
  [role="radio"][aria-checked="true"] {
    forced-color-adjust: none;
    background-color: Highlight !important;
    border-color: Highlight !important;
  }

  /* Selected and highlighted states */
  [aria-selected="true"],
  [data-selected="true"],
  [aria-current]:not([aria-current="false"]) {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
    border-color: Highlight !important;
  }

  /* Tabs */
  [role="tab"][aria-selected="true"] {
    forced-color-adjust: none;
    background-color: Canvas !important;
    color: CanvasText !important;
    border-bottom: 3px solid CanvasText !important;
  }

  /* Dialogs and overlays */
  [role="dialog"],
  [role="alertdialog"],
  [data-slot="dialog"],
  [data-slot="sheet"] {
    background-color: Canvas !important;
    border: 2px solid CanvasText !important;
  }

  /* Alerts */
  [role="alert"],
  [role="status"],
  [data-slot="alert"] {
    border: 2px solid CanvasText !important;
  }

  /* Menus */
  [role="menu"],
  [role="menubar"],
  [role="listbox"] {
    background-color: Canvas !important;
    border: 1px solid CanvasText !important;
  }

  [role="menuitem"],
  [role="option"] {
    color: CanvasText !important;
  }

  [role="menuitem"]:hover,
  [role="menuitem"]:focus,
  [role="option"]:hover,
  [role="option"]:focus,
  [role="menuitem"][data-highlighted],
  [role="option"][data-highlighted] {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
  }

  /* Focus indicators - always visible */
  *:focus-visible {
    forced-color-adjust: none;
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  /* Icons and SVGs */
  svg {
    forced-color-adjust: auto;
    fill: currentColor;
    stroke: currentColor;
  }

  /* Ensure separators are visible */
  hr,
  [role="separator"] {
    border-color: CanvasText !important;
    background-color: CanvasText !important;
  }

  /* Remove background images and gradients */
  * {
    background-image: none !important;
  }

  /* Ensure tooltips are visible */
  [role="tooltip"] {
    forced-color-adjust: none;
    background-color: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText !important;
  }

  /*
   * Scroll areas (DS-079). The blanket `* { background-color: Canvas }` above
   * would otherwise flatten the scrollbar into its track, and the gradient edge
   * affordances are dropped in forced colors — so the scrollbar itself has to
   * carry the "there is more content" signal.
   */
  [data-slot="scroll-area-viewport"] {
    forced-color-adjust: none;
    scrollbar-color: CanvasText Canvas !important;
  }

  [data-slot="scroll-area-viewport"]::-webkit-scrollbar-track {
    background-color: Canvas !important;
    border: 1px solid CanvasText !important;
  }

  [data-slot="scroll-area-viewport"]::-webkit-scrollbar-thumb {
    background-color: CanvasText !important;
  }
}