/* themes.css — generado desde tokens.json. No editar a mano: edite tokens.json/gen_tokens.py. Uso: Capas: --ds-p-* primitivos (no usar en componentes) · --ds-* semánticos · --ds-control-* etc. de componente. */ :root { color-scheme: light; /* ---- tipografía */ --ds-font-display: "Rubik", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --ds-type-display-family: var(--ds-font-display); --ds-type-display-size: 2.5rem; --ds-type-display-line: 1.2; --ds-type-display-weight: 700; --ds-type-display-tracking: -0.01em; --ds-type-h1-family: var(--ds-font-display); --ds-type-h1-size: 2rem; --ds-type-h1-line: 1.25; --ds-type-h1-weight: 700; --ds-type-h1-tracking: -0.005em; --ds-type-h2-family: var(--ds-font-display); --ds-type-h2-size: 1.5rem; --ds-type-h2-line: 1.333; --ds-type-h2-weight: 600; --ds-type-h2-tracking: 0em; --ds-type-h3-family: var(--ds-font-sans); --ds-type-h3-size: 1.25rem; --ds-type-h3-line: 1.4; --ds-type-h3-weight: 650; --ds-type-h3-tracking: -0.005em; --ds-type-h4-family: var(--ds-font-sans); --ds-type-h4-size: 1.062rem; --ds-type-h4-line: 1.412; --ds-type-h4-weight: 650; --ds-type-h4-tracking: 0em; --ds-type-body-lg-family: var(--ds-font-sans); --ds-type-body-lg-size: 1.062rem; --ds-type-body-lg-line: 1.647; --ds-type-body-lg-weight: 400; --ds-type-body-lg-tracking: 0em; --ds-type-body-family: var(--ds-font-sans); --ds-type-body-size: 0.9375rem; --ds-type-body-line: 1.6; --ds-type-body-weight: 400; --ds-type-body-tracking: 0em; --ds-type-body-sm-family: var(--ds-font-sans); --ds-type-body-sm-size: 0.875rem; --ds-type-body-sm-line: 1.429; --ds-type-body-sm-weight: 400; --ds-type-body-sm-tracking: 0em; --ds-type-label-family: var(--ds-font-sans); --ds-type-label-size: 0.875rem; --ds-type-label-line: 1.429; --ds-type-label-weight: 600; --ds-type-label-tracking: 0.005em; --ds-type-helptext-family: var(--ds-font-sans); --ds-type-helptext-size: 0.8125rem; --ds-type-helptext-line: 1.385; --ds-type-helptext-weight: 400; --ds-type-helptext-tracking: 0.005em; --ds-type-caption-family: var(--ds-font-sans); --ds-type-caption-size: 0.75rem; --ds-type-caption-line: 1.333; --ds-type-caption-weight: 500; --ds-type-caption-tracking: 0.02em; --ds-type-code-family: var(--ds-font-mono); --ds-type-code-size: 0.8125rem; --ds-type-code-line: 1.538; --ds-type-code-weight: 450; --ds-type-code-tracking: 0em; /* ---- espaciado (base 4px) */ --ds-space-0: 0; --ds-space-2: 0.125rem; --ds-space-4: 0.25rem; --ds-space-8: 0.5rem; --ds-space-12: 0.75rem; --ds-space-16: 1rem; --ds-space-20: 1.25rem; --ds-space-24: 1.5rem; --ds-space-32: 2rem; --ds-space-40: 2.5rem; --ds-space-48: 3rem; --ds-space-64: 4rem; /* ---- radios y bordes */ --ds-radius-none: 0px; --ds-radius-xs: 2px; --ds-radius-sm: 4px; --ds-radius-md: 6px; --ds-radius-lg: 10px; --ds-radius-xl: 16px; --ds-radius-pill: 999px; --ds-border-thin: 1px; --ds-border-thick: 2px; --ds-border-accent: 3px; --ds-border-focus-width: 2px; --ds-border-focus-offset: 2px; /* ---- movimiento */ --ds-duration-instant: 0ms; --ds-duration-fast: 120ms; --ds-duration-base: 200ms; --ds-duration-slow: 320ms; --ds-duration-slower: 480ms; --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ds-ease-enter: cubic-bezier(0, 0, 0.2, 1); --ds-ease-exit: cubic-bezier(0.4, 0, 1, 1); --ds-ease-linear: cubic-bezier(0, 0, 1, 1); /* ---- capas de apilamiento */ --ds-z-sticky: 100; --ds-z-drawer: 400; --ds-z-modal: 500; --ds-z-popover: 600; --ds-z-toast: 700; --ds-z-tooltip: 800; /* ---- primitivos de color por tema (NO consumir en componentes) */ --ds-p-claro-neutral-0: #FFFFFF; --ds-p-claro-neutral-25: #F9FAFA; --ds-p-claro-neutral-50: #F4F4F5; --ds-p-claro-neutral-100: #EAEBEB; --ds-p-claro-neutral-150: #DFDFE0; --ds-p-claro-neutral-200: #D2D3D3; --ds-p-claro-neutral-300: #BABBBC; --ds-p-claro-neutral-400: #9B9B9D; --ds-p-claro-neutral-500: #7D7D7F; --ds-p-claro-neutral-600: #636366; --ds-p-claro-neutral-700: #4C4C4F; --ds-p-claro-neutral-800: #37373A; --ds-p-claro-neutral-850: #2C2C2F; --ds-p-claro-neutral-900: #222225; --ds-p-claro-neutral-950: #141518; --ds-p-claro-neutral-hover: #F3F3F3; --ds-p-claro-surface-base: #FFFFFF; --ds-p-claro-surface-raised: #FFFFFF; --ds-p-claro-surface-sunken: #F4F4F5; --ds-p-claro-surface-overlay: #FFFFFF; --ds-p-claro-scrim: #1415188C; --ds-p-claro-text-secondary: #4C4C4F; --ds-p-claro-text-muted: #6F6F71; --ds-p-claro-text-inverse: #FFFFFF; --ds-p-claro-link: #1F54C9; --ds-p-claro-link-hover: #1E4598; --ds-p-claro-border-subtle: #E4E4E5; --ds-p-claro-border-default: #8C8C8E; --ds-p-claro-border-strong: #6E6F71; --ds-p-claro-accent: #1E1F23; --ds-p-claro-accent-hover: #3A3C42; --ds-p-claro-accent-active: #35373D; --ds-p-claro-accent-text: #FFFFFF; --ds-p-claro-secondary: #EAEBEB; --ds-p-claro-secondary-hover: #DFDFE0; --ds-p-claro-secondary-text: #1E1F23; --ds-p-claro-transparent: #00000000; --ds-p-claro-ghost-hover: #EFEFEF; --ds-p-claro-disabled: #ECECED; --ds-p-claro-disabled-text: #929394; --ds-p-claro-focus: #1F54C9; --ds-p-claro-highlight: #F1F1EF; --ds-p-claro-highlight-text: #141518; --ds-p-claro-selected: #EAEBEB; --ds-p-claro-selected-border: #1E1F23; --ds-p-claro-success: #1F7A3A; --ds-p-claro-success-bg: #E9F1EA; --ds-p-claro-success-border: #80AF87; --ds-p-claro-success-text: #1F7A3A; --ds-p-claro-warning: #B26A00; --ds-p-claro-warning-bg: #F8F0E8; --ds-p-claro-warning-border: #D3A67A; --ds-p-claro-warning-text: #9E5E07; --ds-p-claro-danger: #C8312B; --ds-p-claro-danger-bg: #FDECE9; --ds-p-claro-danger-border: #E78C81; --ds-p-claro-danger-text: #C8312B; --ds-p-claro-info: #1D63C9; --ds-p-claro-info-bg: #E8F0FB; --ds-p-claro-info-border: #7BA4E3; --ds-p-claro-info-text: #1D63C9; --ds-p-claro-danger-solid-text: #FFFFFF; --ds-p-claro-danger-hover: #A5302A; --ds-p-claro-ai-surface: #F8F8F8; --ds-p-claro-ai-border: #87888A; --ds-p-claro-ai-accent: #37373A; --ds-p-claro-ai-text: #4C4C4F; --ds-p-oscuro-neutral-0: #E9EDF3; --ds-p-oscuro-neutral-25: #E9EDF3; --ds-p-oscuro-neutral-50: #E9EDF3; --ds-p-oscuro-neutral-100: #E7ECF2; --ds-p-oscuro-neutral-150: #DBE0E6; --ds-p-oscuro-neutral-200: #CFD3D9; --ds-p-oscuro-neutral-300: #B6BBC1; --ds-p-oscuro-neutral-400: #979CA2; --ds-p-oscuro-neutral-500: #797D84; --ds-p-oscuro-neutral-600: #5F646A; --ds-p-oscuro-neutral-700: #494E54; --ds-p-oscuro-neutral-800: #34393F; --ds-p-oscuro-neutral-850: #282D33; --ds-p-oscuro-neutral-900: #1F232A; --ds-p-oscuro-neutral-950: #171B21; --ds-p-oscuro-neutral-975: #171B21; --ds-p-oscuro-neutral-990: #0F1217; --ds-p-oscuro-neutral-930: #20242B; --ds-p-oscuro-neutral-910: #282C33; --ds-p-oscuro-neutral-880: #31353C; --ds-p-oscuro-neutral-hover: #24282E; --ds-p-oscuro-surface-base: #171B21; --ds-p-oscuro-surface-raised: #20242B; --ds-p-oscuro-surface-sunken: #0F1217; --ds-p-oscuro-surface-overlay: #282C33; --ds-p-oscuro-scrim: #000000A6; --ds-p-oscuro-text-87: #E9EDF3DE; --ds-p-oscuro-text-70: #E9EDF3B3; --ds-p-oscuro-text-58: #E9EDF394; --ds-p-oscuro-text-inverse: #171B21; --ds-p-oscuro-link: #A9BBF4; --ds-p-oscuro-link-hover: #B9C8F4; --ds-p-oscuro-border-subtle: #2C3036; --ds-p-oscuro-border-default: #6A6E75; --ds-p-oscuro-border-strong: #878B92; --ds-p-oscuro-accent: #93A8EE; --ds-p-oscuro-accent-hover: #AABBF3; --ds-p-oscuro-accent-active: #B1C1F3; --ds-p-oscuro-accent-text: #11151B; --ds-p-oscuro-secondary: #282F3D; --ds-p-oscuro-secondary-hover: #343C50; --ds-p-oscuro-secondary-text: #93A8EE; --ds-p-oscuro-transparent: #00000000; --ds-p-oscuro-ghost-hover: #242A36; --ds-p-oscuro-disabled: #282C33; --ds-p-oscuro-disabled-text: #666B71; --ds-p-oscuro-focus: #93A8EE; --ds-p-oscuro-highlight: #262C36; --ds-p-oscuro-highlight-text: #E9EDF3; --ds-p-oscuro-selected: #2D3444; --ds-p-oscuro-selected-border: #93A8EE; --ds-p-oscuro-success: #6CC490; --ds-p-oscuro-success-bg: #253432; --ds-p-oscuro-success-border: #4B7F64; --ds-p-oscuro-success-text: #6CC490; --ds-p-oscuro-warning: #E3B75C; --ds-p-oscuro-warning-bg: #35322D; --ds-p-oscuro-warning-border: #907849; --ds-p-oscuro-warning-text: #E3B75C; --ds-p-oscuro-danger: #EF8585; --ds-p-oscuro-danger-bg: #372C31; --ds-p-oscuro-danger-border: #975C5E; --ds-p-oscuro-danger-text: #EF8585; --ds-p-oscuro-info: #6FB4DE; --ds-p-oscuro-info-bg: #25323D; --ds-p-oscuro-info-border: #4D7691; --ds-p-oscuro-info-text: #6FB4DE; --ds-p-oscuro-danger-solid-text: #171B21; --ds-p-oscuro-danger-hover: #F09998; --ds-p-oscuro-ai-surface: #2A2E35; --ds-p-oscuro-ai-border: #797E85; --ds-p-oscuro-ai-accent: #DBE0E6; --ds-p-oscuro-ai-text: #CFD3D9; --ds-p-signal-blue-neutral-0: #F8F7F4; --ds-p-signal-blue-neutral-25: #F8F7F4; --ds-p-signal-blue-neutral-50: #F5F5F2; --ds-p-signal-blue-neutral-100: #ECEBEA; --ds-p-signal-blue-neutral-150: #DFDFE0; --ds-p-signal-blue-neutral-200: #D1D3D5; --ds-p-signal-blue-neutral-300: #B7BAC0; --ds-p-signal-blue-neutral-400: #969CA6; --ds-p-signal-blue-neutral-500: #767E8C; --ds-p-signal-blue-neutral-600: #5B6375; --ds-p-signal-blue-neutral-700: #434D61; --ds-p-signal-blue-neutral-800: #2D374D; --ds-p-signal-blue-neutral-850: #212C43; --ds-p-signal-blue-neutral-900: #17233A; --ds-p-signal-blue-neutral-950: #0D1830; --ds-p-signal-blue-neutral-hover: #ECECEA; --ds-p-signal-blue-surface-base: #F8F7F4; --ds-p-signal-blue-surface-raised: #FEFEFD; --ds-p-signal-blue-surface-sunken: #ECEBEA; --ds-p-signal-blue-surface-overlay: #FEFEFD; --ds-p-signal-blue-scrim: #0D18308C; --ds-p-signal-blue-text-secondary: #434D61; --ds-p-signal-blue-text-muted: #626A78; --ds-p-signal-blue-text-inverse: #F8F7F4; --ds-p-signal-blue-link: #0057FF; --ds-p-signal-blue-link-hover: #0A47C6; --ds-p-signal-blue-border-subtle: #DDDEDF; --ds-p-signal-blue-border-default: #83878F; --ds-p-signal-blue-border-strong: #626A78; --ds-p-signal-blue-accent: #0057FF; --ds-p-signal-blue-accent-hover: #0045CC; --ds-p-signal-blue-accent-active: #0440B8; --ds-p-signal-blue-accent-text: #FFFFFF; --ds-p-signal-blue-secondary: #E5ECF7; --ds-p-signal-blue-secondary-hover: #D7E4F9; --ds-p-signal-blue-secondary-text: #0555F2; --ds-p-signal-blue-transparent: #00000000; --ds-p-signal-blue-ghost-hover: #EAEFF6; --ds-p-signal-blue-disabled: #E5E5E5; --ds-p-signal-blue-disabled-text: #8B919D; --ds-p-signal-blue-focus: #0057FF; --ds-p-signal-blue-highlight: #E6EEFF; --ds-p-signal-blue-highlight-text: #0D1830; --ds-p-signal-blue-selected: #E3EBF8; --ds-p-signal-blue-selected-border: #0057FF; --ds-p-signal-blue-success: #22792F; --ds-p-signal-blue-success-bg: #E3EAE0; --ds-p-signal-blue-success-border: #7EAB7E; --ds-p-signal-blue-success-text: #1F772D; --ds-p-signal-blue-warning: #A65A00; --ds-p-signal-blue-warning-bg: #F1E7DE; --ds-p-signal-blue-warning-border: #CA9973; --ds-p-signal-blue-warning-text: #9D5605; --ds-p-signal-blue-danger: #C42D2D; --ds-p-signal-blue-danger-bg: #F6E4DF; --ds-p-signal-blue-danger-border: #E1877D; --ds-p-signal-blue-danger-text: #C42D2D; --ds-p-signal-blue-info: #0B6E87; --ds-p-signal-blue-info-bg: #E2E9E9; --ds-p-signal-blue-info-border: #78A4B3; --ds-p-signal-blue-info-text: #0B6E87; --ds-p-signal-blue-danger-solid-text: #FFFFFF; --ds-p-signal-blue-danger-hover: #A13033; --ds-p-signal-blue-ai-surface: #F7F7F7; --ds-p-signal-blue-ai-border: #838A98; --ds-p-signal-blue-ai-accent: #2D374D; --ds-p-signal-blue-ai-text: #434D61; --ds-p-ultra-violet-neutral-0: #FBFAFD; --ds-p-ultra-violet-neutral-25: #FBF9FD; --ds-p-ultra-violet-neutral-50: #F5F4F8; --ds-p-ultra-violet-neutral-100: #EBEAF0; --ds-p-ultra-violet-neutral-150: #E0DEE6; --ds-p-ultra-violet-neutral-200: #D3D1DB; --ds-p-ultra-violet-neutral-300: #BBB8C6; --ds-p-ultra-violet-neutral-400: #9C98AA; --ds-p-ultra-violet-neutral-500: #7E798F; --ds-p-ultra-violet-neutral-600: #645F78; --ds-p-ultra-violet-neutral-700: #4F4864; --ds-p-ultra-violet-neutral-800: #3A3250; --ds-p-ultra-violet-neutral-850: #2F2745; --ds-p-ultra-violet-neutral-900: #251D3C; --ds-p-ultra-violet-neutral-950: #1A1030; --ds-p-ultra-violet-neutral-hover: #EFEEF3; --ds-p-ultra-violet-surface-base: #FBFAFD; --ds-p-ultra-violet-surface-raised: #FEFEFF; --ds-p-ultra-violet-surface-sunken: #EBEAF0; --ds-p-ultra-violet-surface-overlay: #FEFEFF; --ds-p-ultra-violet-scrim: #1A10308C; --ds-p-ultra-violet-text-secondary: #4F4864; --ds-p-ultra-violet-text-muted: #6B667C; --ds-p-ultra-violet-text-inverse: #FBFAFD; --ds-p-ultra-violet-link: #6A00F4; --ds-p-ultra-violet-link-hover: #5414BF; --ds-p-ultra-violet-border-subtle: #E1E0E7; --ds-p-ultra-violet-border-default: #878492; --ds-p-ultra-violet-border-strong: #6C677D; --ds-p-ultra-violet-accent: #6A00F4; --ds-p-ultra-violet-accent-hover: #5500C4; --ds-p-ultra-violet-accent-active: #4D0AB1; --ds-p-ultra-violet-accent-text: #FFFFFF; --ds-p-ultra-violet-secondary: #EDEBFF; --ds-p-ultra-violet-secondary-hover: #E3E0FF; --ds-p-ultra-violet-secondary-text: #6A00F4; --ds-p-ultra-violet-transparent: #00000000; --ds-p-ultra-violet-ghost-hover: #F0EFFE; --ds-p-ultra-violet-disabled: #E9E7ED; --ds-p-ultra-violet-disabled-text: #938FA2; --ds-p-ultra-violet-focus: #6A00F4; --ds-p-ultra-violet-highlight: #FFD6A5; --ds-p-ultra-violet-highlight-text: #1A1030; --ds-p-ultra-violet-selected: #EBE9FF; --ds-p-ultra-violet-selected-border: #6A00F4; --ds-p-ultra-violet-success: #1F7A43; --ds-p-ultra-violet-success-bg: #E6EDE9; --ds-p-ultra-violet-success-border: #7FAD8B; --ds-p-ultra-violet-success-text: #1D7942; --ds-p-ultra-violet-warning: #A15800; --ds-p-ultra-violet-warning-bg: #F3E9E6; --ds-p-ultra-violet-warning-border: #C89976; --ds-p-ultra-violet-warning-text: #9D580E; --ds-p-ultra-violet-danger: #C42B3A; --ds-p-ultra-violet-danger-bg: #F9E7E8; --ds-p-ultra-violet-danger-border: #E38786; --ds-p-ultra-violet-danger-text: #C42B3A; --ds-p-ultra-violet-info: #0B6A9C; --ds-p-ultra-violet-info-bg: #E5EBF4; --ds-p-ultra-violet-info-border: #78A3C4; --ds-p-ultra-violet-info-text: #0B6A9C; --ds-p-ultra-violet-danger-solid-text: #FFFFFF; --ds-p-ultra-violet-danger-hover: #A22B3C; --ds-p-ultra-violet-ai-surface: #F7F7F9; --ds-p-ultra-violet-ai-border: #8A8699; --ds-p-ultra-violet-ai-accent: #3A3250; --ds-p-ultra-violet-ai-text: #4F4864; --ds-p-dragonfruit-neutral-0: #F6EEFB; --ds-p-dragonfruit-neutral-25: #F6EEFB; --ds-p-dragonfruit-neutral-50: #F6EEFB; --ds-p-dragonfruit-neutral-100: #F0E8F5; --ds-p-dragonfruit-neutral-150: #E4DCEB; --ds-p-dragonfruit-neutral-200: #D7CFE0; --ds-p-dragonfruit-neutral-300: #BFB6CA; --ds-p-dragonfruit-neutral-400: #A097AE; --ds-p-dragonfruit-neutral-500: #827893; --ds-p-dragonfruit-neutral-600: #685D7B; --ds-p-dragonfruit-neutral-700: #524666; --ds-p-dragonfruit-neutral-800: #3C3152; --ds-p-dragonfruit-neutral-850: #312546; --ds-p-dragonfruit-neutral-900: #281B3D; --ds-p-dragonfruit-neutral-950: #1E1133; --ds-p-dragonfruit-neutral-975: #1E1033; --ds-p-dragonfruit-neutral-990: #140925; --ds-p-dragonfruit-neutral-930: #281A3D; --ds-p-dragonfruit-neutral-910: #302345; --ds-p-dragonfruit-neutral-880: #392D4E; --ds-p-dragonfruit-neutral-hover: #2B1E40; --ds-p-dragonfruit-surface-base: #1E1033; --ds-p-dragonfruit-surface-raised: #281A3D; --ds-p-dragonfruit-surface-sunken: #140925; --ds-p-dragonfruit-surface-overlay: #302345; --ds-p-dragonfruit-scrim: #000000A6; --ds-p-dragonfruit-text-secondary: #E4DCEB; --ds-p-dragonfruit-text-muted: #BFB6CA; --ds-p-dragonfruit-text-inverse: #1E1033; --ds-p-dragonfruit-link: #FF8DBF; --ds-p-dragonfruit-link-hover: #FFA6CE; --ds-p-dragonfruit-border-subtle: #332749; --ds-p-dragonfruit-border-default: #716687; --ds-p-dragonfruit-border-strong: #8E849E; --ds-p-dragonfruit-accent: #FF4696; --ds-p-dragonfruit-accent-hover: #FF70AD; --ds-p-dragonfruit-accent-active: #FF81B6; --ds-p-dragonfruit-accent-text: #1E1033; --ds-p-dragonfruit-secondary: #3D1B42; --ds-p-dragonfruit-secondary-hover: #52214C; --ds-p-dragonfruit-secondary-text: #FC6AA2; --ds-p-dragonfruit-transparent: #00000000; --ds-p-dragonfruit-ghost-hover: #35183F; --ds-p-dragonfruit-disabled: #302345; --ds-p-dragonfruit-disabled-text: #6F6582; --ds-p-dragonfruit-focus: #FF4696; --ds-p-dragonfruit-highlight: #3A1F55; --ds-p-dragonfruit-highlight-text: #F6EEFB; --ds-p-dragonfruit-selected: #451D46; --ds-p-dragonfruit-selected-border: #FF4696; --ds-p-dragonfruit-success: #5ED39A; --ds-p-dragonfruit-success-bg: #2B2F45; --ds-p-dragonfruit-success-border: #4A8574; --ds-p-dragonfruit-success-text: #5ED39A; --ds-p-dragonfruit-warning: #F2C14E; --ds-p-dragonfruit-warning-bg: #3B2C3F; --ds-p-dragonfruit-warning-border: #9A7B52; --ds-p-dragonfruit-warning-text: #F2C14E; --ds-p-dragonfruit-danger: #FF7A52; --ds-p-dragonfruit-danger-bg: #3E233D; --ds-p-dragonfruit-danger-border: #A2524F; --ds-p-dragonfruit-danger-text: #FF7A52; --ds-p-dragonfruit-info: #8EA8FF; --ds-p-dragonfruit-info-bg: #302752; --ds-p-dragonfruit-info-border: #626BAD; --ds-p-dragonfruit-info-text: #8EA8FF; --ds-p-dragonfruit-danger-solid-text: #1E1033; --ds-p-dragonfruit-ai-surface: #322547; --ds-p-dragonfruit-ai-border: #837994; --ds-p-dragonfruit-ai-accent: #E4DCEB; --ds-p-dragonfruit-ai-text: #D7CFE0; --ds-p-lime-spark-neutral-0: #EEF0F4; --ds-p-lime-spark-neutral-25: #EEF0F4; --ds-p-lime-spark-neutral-50: #EEF0F4; --ds-p-lime-spark-neutral-100: #E9ECF0; --ds-p-lime-spark-neutral-150: #DDE0E4; --ds-p-lime-spark-neutral-200: #D0D2D7; --ds-p-lime-spark-neutral-300: #B8BAC0; --ds-p-lime-spark-neutral-400: #999BA2; --ds-p-lime-spark-neutral-500: #7A7D85; --ds-p-lime-spark-neutral-600: #60636B; --ds-p-lime-spark-neutral-700: #494D55; --ds-p-lime-spark-neutral-800: #343840; --ds-p-lime-spark-neutral-850: #292D35; --ds-p-lime-spark-neutral-900: #23262F; --ds-p-lime-spark-neutral-950: #23262F; --ds-p-lime-spark-neutral-975: #23262F; --ds-p-lime-spark-neutral-990: #181B22; --ds-p-lime-spark-neutral-930: #2C2F38; --ds-p-lime-spark-neutral-910: #343740; --ds-p-lime-spark-neutral-880: #3D4049; --ds-p-lime-spark-neutral-hover: #30333C; --ds-p-lime-spark-surface-base: #23262F; --ds-p-lime-spark-surface-raised: #2C2F38; --ds-p-lime-spark-surface-sunken: #181B22; --ds-p-lime-spark-surface-overlay: #343740; --ds-p-lime-spark-scrim: #000000A6; --ds-p-lime-spark-text-secondary: #DDE0E4; --ds-p-lime-spark-text-muted: #B8BAC0; --ds-p-lime-spark-text-inverse: #23262F; --ds-p-lime-spark-link: #A3CFFF; --ds-p-lime-spark-link-hover: #B6D7FD; --ds-p-lime-spark-border-subtle: #383B44; --ds-p-lime-spark-border-default: #757981; --ds-p-lime-spark-border-strong: #95989F; --ds-p-lime-spark-accent: #B6FF2E; --ds-p-lime-spark-accent-hover: #CBFF6B; --ds-p-lime-spark-accent-active: #CFFE81; --ds-p-lime-spark-accent-text: #1A1C22; --ds-p-lime-spark-secondary: #374539; --ds-p-lime-spark-secondary-hover: #45593D; --ds-p-lime-spark-secondary-text: #B6FF2E; --ds-p-lime-spark-transparent: #00000000; --ds-p-lime-spark-ghost-hover: #323D36; --ds-p-lime-spark-disabled: #343740; --ds-p-lime-spark-disabled-text: #71737B; --ds-p-lime-spark-focus: #B6FF2E; --ds-p-lime-spark-highlight: #323726; --ds-p-lime-spark-highlight-text: #EEF0F4; --ds-p-lime-spark-selected: #3D4D3B; --ds-p-lime-spark-selected-border: #B6FF2E; --ds-p-lime-spark-success: #4FD1A5; --ds-p-lime-spark-success-bg: #2D4042; --ds-p-lime-spark-success-border: #438C77; --ds-p-lime-spark-success-text: #4FD1A5; --ds-p-lime-spark-warning: #FFC24D; --ds-p-lime-spark-warning-bg: #433E39; --ds-p-lime-spark-warning-border: #A5844B; --ds-p-lime-spark-warning-text: #FFC24D; --ds-p-lime-spark-danger: #FF7D7D; --ds-p-lime-spark-danger-bg: #45353C; --ds-p-lime-spark-danger-border: #A75D60; --ds-p-lime-spark-danger-text: #FF7D7D; --ds-p-lime-spark-info: #7DBBFF; --ds-p-lime-spark-info-bg: #323D4E; --ds-p-lime-spark-info-border: #5A7FAB; --ds-p-lime-spark-info-text: #7DBBFF; --ds-p-lime-spark-danger-solid-text: #23262F; --ds-p-lime-spark-danger-hover: #FF9492; --ds-p-lime-spark-ai-surface: #363942; --ds-p-lime-spark-ai-border: #83868D; --ds-p-lime-spark-ai-accent: #DDE0E4; --ds-p-lime-spark-ai-text: #D0D2D7; --ds-p-emerald-ink-neutral-0: #FCF8F1; --ds-p-emerald-ink-neutral-25: #FCF8F1; --ds-p-emerald-ink-neutral-50: #F7F4ED; --ds-p-emerald-ink-neutral-100: #EDEBE4; --ds-p-emerald-ink-neutral-150: #E1E0D9; --ds-p-emerald-ink-neutral-200: #D2D4CC; --ds-p-emerald-ink-neutral-300: #B8BCB5; --ds-p-emerald-ink-neutral-400: #959E96; --ds-p-emerald-ink-neutral-500: #748079; --ds-p-emerald-ink-neutral-600: #586860; --ds-p-emerald-ink-neutral-700: #40524A; --ds-p-emerald-ink-neutral-800: #283D35; --ds-p-emerald-ink-neutral-850: #1B322A; --ds-p-emerald-ink-neutral-900: #112821; --ds-p-emerald-ink-neutral-950: #0B241D; --ds-p-emerald-ink-neutral-hover: #F0EDE6; --ds-p-emerald-ink-surface-base: #FCF8F1; --ds-p-emerald-ink-surface-raised: #FFFEFD; --ds-p-emerald-ink-surface-sunken: #EDEBE4; --ds-p-emerald-ink-surface-overlay: #FFFEFD; --ds-p-emerald-ink-scrim: #0B241D8C; --ds-p-emerald-ink-text-secondary: #3F5149; --ds-p-emerald-ink-text-muted: #606C65; --ds-p-emerald-ink-text-inverse: #FCF8F1; --ds-p-emerald-ink-link: #0B6E52; --ds-p-emerald-ink-link-hover: #0E5A44; --ds-p-emerald-ink-border-subtle: #E1E0D9; --ds-p-emerald-ink-border-default: #838882; --ds-p-emerald-ink-border-strong: #606D65; --ds-p-emerald-ink-accent: #064E3B; --ds-p-emerald-ink-accent-hover: #0B6B51; --ds-p-emerald-ink-accent-active: #0D624A; --ds-p-emerald-ink-accent-text: #FFFFFF; --ds-p-emerald-ink-accent-mid: #0F8A66; --ds-p-emerald-ink-secondary: #E8E9E1; --ds-p-emerald-ink-secondary-hover: #DADFD5; --ds-p-emerald-ink-secondary-text: #0A6F52; --ds-p-emerald-ink-transparent: #00000000; --ds-p-emerald-ink-ghost-hover: #EDEDE5; --ds-p-emerald-ink-disabled: #E9E7E0; --ds-p-emerald-ink-disabled-text: #8E9890; --ds-p-emerald-ink-focus: #0F8A66; --ds-p-emerald-ink-highlight: #F8E7C9; --ds-p-emerald-ink-highlight-text: #0B241D; --ds-p-emerald-ink-selected: #E6E8DF; --ds-p-emerald-ink-selected-border: #064E3B; --ds-p-emerald-ink-success: #3A7A16; --ds-p-emerald-ink-success-bg: #E8EBDC; --ds-p-emerald-ink-success-border: #88AC74; --ds-p-emerald-ink-success-text: #367610; --ds-p-emerald-ink-warning: #9E5A00; --ds-p-emerald-ink-warning-bg: #F3E8DB; --ds-p-emerald-ink-warning-border: #C69970; --ds-p-emerald-ink-warning-text: #99590C; --ds-p-emerald-ink-danger: #B4232F; --ds-p-emerald-ink-danger-bg: #F8E4DC; --ds-p-emerald-ink-danger-border: #D9817B; --ds-p-emerald-ink-danger-text: #B4232F; --ds-p-emerald-ink-info: #1F5FBF; --ds-p-emerald-ink-info-bg: #E5E9EE; --ds-p-emerald-ink-info-border: #799ED7; --ds-p-emerald-ink-info-text: #1F5FBF; --ds-p-emerald-ink-danger-solid-text: #FFFFFF; --ds-p-emerald-ink-danger-hover: #962B2D; --ds-p-emerald-ink-ai-surface: #F8F8F7; --ds-p-emerald-ink-ai-border: #85918C; --ds-p-emerald-ink-ai-accent: #283D35; --ds-p-emerald-ink-ai-text: #40524A; --ds-p-butter-yellow-neutral-0: #FBFAFE; --ds-p-butter-yellow-neutral-25: #FBF9FE; --ds-p-butter-yellow-neutral-50: #F5F4F9; --ds-p-butter-yellow-neutral-100: #ECEAF1; --ds-p-butter-yellow-neutral-150: #E0DEE7; --ds-p-butter-yellow-neutral-200: #D3D1DC; --ds-p-butter-yellow-neutral-300: #BAB8C8; --ds-p-butter-yellow-neutral-400: #9B99AD; --ds-p-butter-yellow-neutral-500: #7D7A93; --ds-p-butter-yellow-neutral-600: #635F7C; --ds-p-butter-yellow-neutral-700: #4C4868; --ds-p-butter-yellow-neutral-800: #383255; --ds-p-butter-yellow-neutral-850: #2D264A; --ds-p-butter-yellow-neutral-900: #231C41; --ds-p-butter-yellow-neutral-950: #1B1238; --ds-p-butter-yellow-neutral-hover: #EFEEF4; --ds-p-butter-yellow-surface-base: #FBFAFE; --ds-p-butter-yellow-surface-raised: #FEFEFF; --ds-p-butter-yellow-surface-sunken: #ECEAF1; --ds-p-butter-yellow-surface-overlay: #FEFEFF; --ds-p-butter-yellow-scrim: #1B12388C; --ds-p-butter-yellow-text-secondary: #4C4868; --ds-p-butter-yellow-text-muted: #6A6780; --ds-p-butter-yellow-text-inverse: #FBFAFE; --ds-p-butter-yellow-link: #3A0CA3; --ds-p-butter-yellow-link-hover: #311387; --ds-p-butter-yellow-border-subtle: #E1E0E9; --ds-p-butter-yellow-border-default: #868395; --ds-p-butter-yellow-border-strong: #696681; --ds-p-butter-yellow-accent: #3A0CA3; --ds-p-butter-yellow-accent-hover: #4C20C2; --ds-p-butter-yellow-accent-active: #4620B0; --ds-p-butter-yellow-accent-text: #FFFFFF; --ds-p-butter-yellow-secondary: #E8E8F8; --ds-p-butter-yellow-secondary-hover: #DBDBF4; --ds-p-butter-yellow-secondary-text: #3A0CA3; --ds-p-butter-yellow-transparent: #00000000; --ds-p-butter-yellow-ghost-hover: #EDEDFA; --ds-p-butter-yellow-disabled: #E9E8EF; --ds-p-butter-yellow-disabled-text: #9390A7; --ds-p-butter-yellow-focus: #3A0CA3; --ds-p-butter-yellow-highlight: #FFF275; --ds-p-butter-yellow-highlight-text: #1B1238; --ds-p-butter-yellow-selected: #E6E6F8; --ds-p-butter-yellow-selected-border: #3A0CA3; --ds-p-butter-yellow-success: #1E7A3C; --ds-p-butter-yellow-success-bg: #E6EDE9; --ds-p-butter-yellow-success-border: #7EAD88; --ds-p-butter-yellow-success-text: #1C793B; --ds-p-butter-yellow-warning: #9A5600; --ds-p-butter-yellow-warning-bg: #FDEAD8; --ds-p-butter-yellow-warning-border: #C7976E; --ds-p-butter-yellow-warning-text: #9A5600; --ds-p-butter-yellow-danger: #BF2C2C; --ds-p-butter-yellow-danger-bg: #F8E7E8; --ds-p-butter-yellow-danger-border: #DF8780; --ds-p-butter-yellow-danger-text: #BF2C2C; --ds-p-butter-yellow-info: #0B6C9A; --ds-p-butter-yellow-info-bg: #E5EBF4; --ds-p-butter-yellow-info-border: #79A4C3; --ds-p-butter-yellow-info-text: #0B6C9A; --ds-p-butter-yellow-danger-solid-text: #FFFFFF; --ds-p-butter-yellow-danger-hover: #9F2C34; --ds-p-butter-yellow-ai-surface: #F7F7FA; --ds-p-butter-yellow-ai-border: #8A889F; --ds-p-butter-yellow-ai-accent: #383255; --ds-p-butter-yellow-ai-text: #4C4868; } @media (prefers-reduced-motion: reduce) { :root { --ds-duration-fast: 0ms; --ds-duration-base: 0ms; --ds-duration-slow: 0ms; --ds-duration-slower: 0ms; } } /* ---- tema Claro (claro) */ :root, [data-theme="claro"] { color-scheme: light; --ds-surface-hover: var(--ds-p-claro-neutral-hover); --ds-surface-base: var(--ds-p-claro-surface-base); --ds-surface-raised: var(--ds-p-claro-surface-raised); --ds-surface-sunken: var(--ds-p-claro-surface-sunken); --ds-surface-overlay: var(--ds-p-claro-surface-overlay); --ds-surface-scrim: var(--ds-p-claro-scrim); --ds-text-primary: var(--ds-p-claro-neutral-950); --ds-text-secondary: var(--ds-p-claro-text-secondary); --ds-text-muted: var(--ds-p-claro-text-muted); --ds-text-inverse: var(--ds-p-claro-text-inverse); --ds-text-link: var(--ds-p-claro-link); --ds-text-link-hover: var(--ds-p-claro-link-hover); --ds-border-subtle: var(--ds-p-claro-border-subtle); --ds-border-default: var(--ds-p-claro-border-default); --ds-border-strong: var(--ds-p-claro-border-strong); --ds-action-primary: var(--ds-p-claro-accent); --ds-action-primary-hover: var(--ds-p-claro-accent-hover); --ds-action-primary-active: var(--ds-p-claro-accent-active); --ds-action-primary-text: var(--ds-p-claro-accent-text); --ds-action-secondary: var(--ds-p-claro-secondary); --ds-action-secondary-hover: var(--ds-p-claro-secondary-hover); --ds-action-secondary-text: var(--ds-p-claro-secondary-text); --ds-action-ghost: var(--ds-p-claro-transparent); --ds-action-ghost-hover: var(--ds-p-claro-ghost-hover); --ds-action-disabled: var(--ds-p-claro-disabled); --ds-action-disabled-text: var(--ds-p-claro-disabled-text); --ds-border-focus: var(--ds-p-claro-focus); --ds-accent-highlight-bg: var(--ds-p-claro-highlight); --ds-accent-highlight-text: var(--ds-p-claro-highlight-text); --ds-surface-selected: var(--ds-p-claro-selected); --ds-border-selected: var(--ds-p-claro-selected-border); --ds-feedback-success: var(--ds-p-claro-success); --ds-feedback-success-bg: var(--ds-p-claro-success-bg); --ds-feedback-success-border: var(--ds-p-claro-success-border); --ds-feedback-success-text: var(--ds-p-claro-success-text); --ds-feedback-warning: var(--ds-p-claro-warning); --ds-feedback-warning-bg: var(--ds-p-claro-warning-bg); --ds-feedback-warning-border: var(--ds-p-claro-warning-border); --ds-feedback-warning-text: var(--ds-p-claro-warning-text); --ds-feedback-danger: var(--ds-p-claro-danger); --ds-feedback-danger-bg: var(--ds-p-claro-danger-bg); --ds-feedback-danger-border: var(--ds-p-claro-danger-border); --ds-feedback-danger-text: var(--ds-p-claro-danger-text); --ds-feedback-info: var(--ds-p-claro-info); --ds-feedback-info-bg: var(--ds-p-claro-info-bg); --ds-feedback-info-border: var(--ds-p-claro-info-border); --ds-feedback-info-text: var(--ds-p-claro-info-text); --ds-feedback-danger-solid-text: var(--ds-p-claro-danger-solid-text); --ds-action-danger: var(--ds-p-claro-danger); --ds-action-danger-hover: var(--ds-p-claro-danger-hover); --ds-action-danger-text: var(--ds-p-claro-danger-solid-text); --ds-action-danger-border: var(--ds-p-claro-danger); --ds-ai-surface: var(--ds-p-claro-ai-surface); --ds-ai-border: var(--ds-p-claro-ai-border); --ds-ai-accent: var(--ds-p-claro-ai-accent); --ds-ai-accent-text: var(--ds-p-claro-ai-text); --ds-elevation-1: 0 1px 2px rgb(20 21 24 / 0.08), 0 0 0 1px rgb(20 21 24 / 0.04); --ds-elevation-2: 0 2px 6px rgb(20 21 24 / 0.10), 0 8px 20px rgb(20 21 24 / 0.08); --ds-elevation-3: 0 8px 24px rgb(20 21 24 / 0.14), 0 24px 56px rgb(20 21 24 / 0.14); } /* ---- tema Oscuro (oscuro) */ [data-theme="oscuro"] { color-scheme: dark; --ds-surface-hover: var(--ds-p-oscuro-neutral-hover); --ds-surface-base: var(--ds-p-oscuro-surface-base); --ds-surface-raised: var(--ds-p-oscuro-surface-raised); --ds-surface-sunken: var(--ds-p-oscuro-surface-sunken); --ds-surface-overlay: var(--ds-p-oscuro-surface-overlay); --ds-surface-scrim: var(--ds-p-oscuro-scrim); --ds-text-primary: var(--ds-p-oscuro-text-87); --ds-text-secondary: var(--ds-p-oscuro-text-70); --ds-text-muted: var(--ds-p-oscuro-text-58); --ds-text-inverse: var(--ds-p-oscuro-text-inverse); --ds-text-link: var(--ds-p-oscuro-link); --ds-text-link-hover: var(--ds-p-oscuro-link-hover); --ds-border-subtle: var(--ds-p-oscuro-border-subtle); --ds-border-default: var(--ds-p-oscuro-border-default); --ds-border-strong: var(--ds-p-oscuro-border-strong); --ds-action-primary: var(--ds-p-oscuro-accent); --ds-action-primary-hover: var(--ds-p-oscuro-accent-hover); --ds-action-primary-active: var(--ds-p-oscuro-accent-active); --ds-action-primary-text: var(--ds-p-oscuro-accent-text); --ds-action-secondary: var(--ds-p-oscuro-secondary); --ds-action-secondary-hover: var(--ds-p-oscuro-secondary-hover); --ds-action-secondary-text: var(--ds-p-oscuro-secondary-text); --ds-action-ghost: var(--ds-p-oscuro-transparent); --ds-action-ghost-hover: var(--ds-p-oscuro-ghost-hover); --ds-action-disabled: var(--ds-p-oscuro-disabled); --ds-action-disabled-text: var(--ds-p-oscuro-disabled-text); --ds-border-focus: var(--ds-p-oscuro-focus); --ds-accent-highlight-bg: var(--ds-p-oscuro-highlight); --ds-accent-highlight-text: var(--ds-p-oscuro-highlight-text); --ds-surface-selected: var(--ds-p-oscuro-selected); --ds-border-selected: var(--ds-p-oscuro-selected-border); --ds-feedback-success: var(--ds-p-oscuro-success); --ds-feedback-success-bg: var(--ds-p-oscuro-success-bg); --ds-feedback-success-border: var(--ds-p-oscuro-success-border); --ds-feedback-success-text: var(--ds-p-oscuro-success-text); --ds-feedback-warning: var(--ds-p-oscuro-warning); --ds-feedback-warning-bg: var(--ds-p-oscuro-warning-bg); --ds-feedback-warning-border: var(--ds-p-oscuro-warning-border); --ds-feedback-warning-text: var(--ds-p-oscuro-warning-text); --ds-feedback-danger: var(--ds-p-oscuro-danger); --ds-feedback-danger-bg: var(--ds-p-oscuro-danger-bg); --ds-feedback-danger-border: var(--ds-p-oscuro-danger-border); --ds-feedback-danger-text: var(--ds-p-oscuro-danger-text); --ds-feedback-info: var(--ds-p-oscuro-info); --ds-feedback-info-bg: var(--ds-p-oscuro-info-bg); --ds-feedback-info-border: var(--ds-p-oscuro-info-border); --ds-feedback-info-text: var(--ds-p-oscuro-info-text); --ds-feedback-danger-solid-text: var(--ds-p-oscuro-danger-solid-text); --ds-action-danger: var(--ds-p-oscuro-danger); --ds-action-danger-hover: var(--ds-p-oscuro-danger-hover); --ds-action-danger-text: var(--ds-p-oscuro-danger-solid-text); --ds-action-danger-border: var(--ds-p-oscuro-danger); --ds-ai-surface: var(--ds-p-oscuro-ai-surface); --ds-ai-border: var(--ds-p-oscuro-ai-border); --ds-ai-accent: var(--ds-p-oscuro-ai-accent); --ds-ai-accent-text: var(--ds-p-oscuro-ai-text); --ds-elevation-1: 0 0 0 1px rgb(255 255 255 / 0.06); --ds-elevation-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 4px 12px rgb(0 0 0 / 0.28); --ds-elevation-3: 0 0 0 1px rgb(255 255 255 / 0.10), 0 12px 32px rgb(0 0 0 / 0.40); } /* ---- tema Signal Blue (claro) */ [data-theme="signal-blue"] { color-scheme: light; --ds-surface-hover: var(--ds-p-signal-blue-neutral-hover); --ds-surface-base: var(--ds-p-signal-blue-surface-base); --ds-surface-raised: var(--ds-p-signal-blue-surface-raised); --ds-surface-sunken: var(--ds-p-signal-blue-surface-sunken); --ds-surface-overlay: var(--ds-p-signal-blue-surface-overlay); --ds-surface-scrim: var(--ds-p-signal-blue-scrim); --ds-text-primary: var(--ds-p-signal-blue-neutral-950); --ds-text-secondary: var(--ds-p-signal-blue-text-secondary); --ds-text-muted: var(--ds-p-signal-blue-text-muted); --ds-text-inverse: var(--ds-p-signal-blue-text-inverse); --ds-text-link: var(--ds-p-signal-blue-link); --ds-text-link-hover: var(--ds-p-signal-blue-link-hover); --ds-border-subtle: var(--ds-p-signal-blue-border-subtle); --ds-border-default: var(--ds-p-signal-blue-border-default); --ds-border-strong: var(--ds-p-signal-blue-border-strong); --ds-action-primary: var(--ds-p-signal-blue-accent); --ds-action-primary-hover: var(--ds-p-signal-blue-accent-hover); --ds-action-primary-active: var(--ds-p-signal-blue-accent-active); --ds-action-primary-text: var(--ds-p-signal-blue-accent-text); --ds-action-secondary: var(--ds-p-signal-blue-secondary); --ds-action-secondary-hover: var(--ds-p-signal-blue-secondary-hover); --ds-action-secondary-text: var(--ds-p-signal-blue-secondary-text); --ds-action-ghost: var(--ds-p-signal-blue-transparent); --ds-action-ghost-hover: var(--ds-p-signal-blue-ghost-hover); --ds-action-disabled: var(--ds-p-signal-blue-disabled); --ds-action-disabled-text: var(--ds-p-signal-blue-disabled-text); --ds-border-focus: var(--ds-p-signal-blue-focus); --ds-accent-highlight-bg: var(--ds-p-signal-blue-highlight); --ds-accent-highlight-text: var(--ds-p-signal-blue-highlight-text); --ds-surface-selected: var(--ds-p-signal-blue-selected); --ds-border-selected: var(--ds-p-signal-blue-selected-border); --ds-feedback-success: var(--ds-p-signal-blue-success); --ds-feedback-success-bg: var(--ds-p-signal-blue-success-bg); --ds-feedback-success-border: var(--ds-p-signal-blue-success-border); --ds-feedback-success-text: var(--ds-p-signal-blue-success-text); --ds-feedback-warning: var(--ds-p-signal-blue-warning); --ds-feedback-warning-bg: var(--ds-p-signal-blue-warning-bg); --ds-feedback-warning-border: var(--ds-p-signal-blue-warning-border); --ds-feedback-warning-text: var(--ds-p-signal-blue-warning-text); --ds-feedback-danger: var(--ds-p-signal-blue-danger); --ds-feedback-danger-bg: var(--ds-p-signal-blue-danger-bg); --ds-feedback-danger-border: var(--ds-p-signal-blue-danger-border); --ds-feedback-danger-text: var(--ds-p-signal-blue-danger-text); --ds-feedback-info: var(--ds-p-signal-blue-info); --ds-feedback-info-bg: var(--ds-p-signal-blue-info-bg); --ds-feedback-info-border: var(--ds-p-signal-blue-info-border); --ds-feedback-info-text: var(--ds-p-signal-blue-info-text); --ds-feedback-danger-solid-text: var(--ds-p-signal-blue-danger-solid-text); --ds-action-danger: var(--ds-p-signal-blue-danger); --ds-action-danger-hover: var(--ds-p-signal-blue-danger-hover); --ds-action-danger-text: var(--ds-p-signal-blue-danger-solid-text); --ds-action-danger-border: var(--ds-p-signal-blue-danger); --ds-ai-surface: var(--ds-p-signal-blue-ai-surface); --ds-ai-border: var(--ds-p-signal-blue-ai-border); --ds-ai-accent: var(--ds-p-signal-blue-ai-accent); --ds-ai-accent-text: var(--ds-p-signal-blue-ai-text); --ds-elevation-1: 0 1px 2px rgb(13 24 48 / 0.08), 0 0 0 1px rgb(13 24 48 / 0.04); --ds-elevation-2: 0 2px 6px rgb(13 24 48 / 0.10), 0 8px 20px rgb(13 24 48 / 0.08); --ds-elevation-3: 0 8px 24px rgb(13 24 48 / 0.14), 0 24px 56px rgb(13 24 48 / 0.14); } /* ---- tema Ultra Violet (claro) */ [data-theme="ultra-violet"] { color-scheme: light; --ds-surface-hover: var(--ds-p-ultra-violet-neutral-hover); --ds-surface-base: var(--ds-p-ultra-violet-surface-base); --ds-surface-raised: var(--ds-p-ultra-violet-surface-raised); --ds-surface-sunken: var(--ds-p-ultra-violet-surface-sunken); --ds-surface-overlay: var(--ds-p-ultra-violet-surface-overlay); --ds-surface-scrim: var(--ds-p-ultra-violet-scrim); --ds-text-primary: var(--ds-p-ultra-violet-neutral-950); --ds-text-secondary: var(--ds-p-ultra-violet-text-secondary); --ds-text-muted: var(--ds-p-ultra-violet-text-muted); --ds-text-inverse: var(--ds-p-ultra-violet-text-inverse); --ds-text-link: var(--ds-p-ultra-violet-link); --ds-text-link-hover: var(--ds-p-ultra-violet-link-hover); --ds-border-subtle: var(--ds-p-ultra-violet-border-subtle); --ds-border-default: var(--ds-p-ultra-violet-border-default); --ds-border-strong: var(--ds-p-ultra-violet-border-strong); --ds-action-primary: var(--ds-p-ultra-violet-accent); --ds-action-primary-hover: var(--ds-p-ultra-violet-accent-hover); --ds-action-primary-active: var(--ds-p-ultra-violet-accent-active); --ds-action-primary-text: var(--ds-p-ultra-violet-accent-text); --ds-action-secondary: var(--ds-p-ultra-violet-secondary); --ds-action-secondary-hover: var(--ds-p-ultra-violet-secondary-hover); --ds-action-secondary-text: var(--ds-p-ultra-violet-secondary-text); --ds-action-ghost: var(--ds-p-ultra-violet-transparent); --ds-action-ghost-hover: var(--ds-p-ultra-violet-ghost-hover); --ds-action-disabled: var(--ds-p-ultra-violet-disabled); --ds-action-disabled-text: var(--ds-p-ultra-violet-disabled-text); --ds-border-focus: var(--ds-p-ultra-violet-focus); --ds-accent-highlight-bg: var(--ds-p-ultra-violet-highlight); --ds-accent-highlight-text: var(--ds-p-ultra-violet-highlight-text); --ds-surface-selected: var(--ds-p-ultra-violet-selected); --ds-border-selected: var(--ds-p-ultra-violet-selected-border); --ds-feedback-success: var(--ds-p-ultra-violet-success); --ds-feedback-success-bg: var(--ds-p-ultra-violet-success-bg); --ds-feedback-success-border: var(--ds-p-ultra-violet-success-border); --ds-feedback-success-text: var(--ds-p-ultra-violet-success-text); --ds-feedback-warning: var(--ds-p-ultra-violet-warning); --ds-feedback-warning-bg: var(--ds-p-ultra-violet-warning-bg); --ds-feedback-warning-border: var(--ds-p-ultra-violet-warning-border); --ds-feedback-warning-text: var(--ds-p-ultra-violet-warning-text); --ds-feedback-danger: var(--ds-p-ultra-violet-danger); --ds-feedback-danger-bg: var(--ds-p-ultra-violet-danger-bg); --ds-feedback-danger-border: var(--ds-p-ultra-violet-danger-border); --ds-feedback-danger-text: var(--ds-p-ultra-violet-danger-text); --ds-feedback-info: var(--ds-p-ultra-violet-info); --ds-feedback-info-bg: var(--ds-p-ultra-violet-info-bg); --ds-feedback-info-border: var(--ds-p-ultra-violet-info-border); --ds-feedback-info-text: var(--ds-p-ultra-violet-info-text); --ds-feedback-danger-solid-text: var(--ds-p-ultra-violet-danger-solid-text); --ds-action-danger: var(--ds-p-ultra-violet-danger); --ds-action-danger-hover: var(--ds-p-ultra-violet-danger-hover); --ds-action-danger-text: var(--ds-p-ultra-violet-danger-solid-text); --ds-action-danger-border: var(--ds-p-ultra-violet-danger); --ds-ai-surface: var(--ds-p-ultra-violet-ai-surface); --ds-ai-border: var(--ds-p-ultra-violet-ai-border); --ds-ai-accent: var(--ds-p-ultra-violet-ai-accent); --ds-ai-accent-text: var(--ds-p-ultra-violet-ai-text); --ds-elevation-1: 0 1px 2px rgb(26 16 48 / 0.08), 0 0 0 1px rgb(26 16 48 / 0.04); --ds-elevation-2: 0 2px 6px rgb(26 16 48 / 0.10), 0 8px 20px rgb(26 16 48 / 0.08); --ds-elevation-3: 0 8px 24px rgb(26 16 48 / 0.14), 0 24px 56px rgb(26 16 48 / 0.14); } /* ---- tema Dragonfruit (oscuro) */ [data-theme="dragonfruit"] { color-scheme: dark; --ds-surface-hover: var(--ds-p-dragonfruit-neutral-hover); --ds-surface-base: var(--ds-p-dragonfruit-surface-base); --ds-surface-raised: var(--ds-p-dragonfruit-surface-raised); --ds-surface-sunken: var(--ds-p-dragonfruit-surface-sunken); --ds-surface-overlay: var(--ds-p-dragonfruit-surface-overlay); --ds-surface-scrim: var(--ds-p-dragonfruit-scrim); --ds-text-primary: var(--ds-p-dragonfruit-neutral-25); --ds-text-secondary: var(--ds-p-dragonfruit-text-secondary); --ds-text-muted: var(--ds-p-dragonfruit-text-muted); --ds-text-inverse: var(--ds-p-dragonfruit-text-inverse); --ds-text-link: var(--ds-p-dragonfruit-link); --ds-text-link-hover: var(--ds-p-dragonfruit-link-hover); --ds-border-subtle: var(--ds-p-dragonfruit-border-subtle); --ds-border-default: var(--ds-p-dragonfruit-border-default); --ds-border-strong: var(--ds-p-dragonfruit-border-strong); --ds-action-primary: var(--ds-p-dragonfruit-accent); --ds-action-primary-hover: var(--ds-p-dragonfruit-accent-hover); --ds-action-primary-active: var(--ds-p-dragonfruit-accent-active); --ds-action-primary-text: var(--ds-p-dragonfruit-accent-text); --ds-action-secondary: var(--ds-p-dragonfruit-secondary); --ds-action-secondary-hover: var(--ds-p-dragonfruit-secondary-hover); --ds-action-secondary-text: var(--ds-p-dragonfruit-secondary-text); --ds-action-ghost: var(--ds-p-dragonfruit-transparent); --ds-action-ghost-hover: var(--ds-p-dragonfruit-ghost-hover); --ds-action-disabled: var(--ds-p-dragonfruit-disabled); --ds-action-disabled-text: var(--ds-p-dragonfruit-disabled-text); --ds-border-focus: var(--ds-p-dragonfruit-focus); --ds-accent-highlight-bg: var(--ds-p-dragonfruit-highlight); --ds-accent-highlight-text: var(--ds-p-dragonfruit-highlight-text); --ds-surface-selected: var(--ds-p-dragonfruit-selected); --ds-border-selected: var(--ds-p-dragonfruit-selected-border); --ds-feedback-success: var(--ds-p-dragonfruit-success); --ds-feedback-success-bg: var(--ds-p-dragonfruit-success-bg); --ds-feedback-success-border: var(--ds-p-dragonfruit-success-border); --ds-feedback-success-text: var(--ds-p-dragonfruit-success-text); --ds-feedback-warning: var(--ds-p-dragonfruit-warning); --ds-feedback-warning-bg: var(--ds-p-dragonfruit-warning-bg); --ds-feedback-warning-border: var(--ds-p-dragonfruit-warning-border); --ds-feedback-warning-text: var(--ds-p-dragonfruit-warning-text); --ds-feedback-danger: var(--ds-p-dragonfruit-danger); --ds-feedback-danger-bg: var(--ds-p-dragonfruit-danger-bg); --ds-feedback-danger-border: var(--ds-p-dragonfruit-danger-border); --ds-feedback-danger-text: var(--ds-p-dragonfruit-danger-text); --ds-feedback-info: var(--ds-p-dragonfruit-info); --ds-feedback-info-bg: var(--ds-p-dragonfruit-info-bg); --ds-feedback-info-border: var(--ds-p-dragonfruit-info-border); --ds-feedback-info-text: var(--ds-p-dragonfruit-info-text); --ds-feedback-danger-solid-text: var(--ds-p-dragonfruit-danger-solid-text); --ds-action-danger: var(--ds-p-dragonfruit-transparent); --ds-action-danger-hover: var(--ds-p-dragonfruit-danger-bg); --ds-action-danger-text: var(--ds-p-dragonfruit-danger-text); --ds-action-danger-border: var(--ds-p-dragonfruit-danger); --ds-ai-surface: var(--ds-p-dragonfruit-ai-surface); --ds-ai-border: var(--ds-p-dragonfruit-ai-border); --ds-ai-accent: var(--ds-p-dragonfruit-ai-accent); --ds-ai-accent-text: var(--ds-p-dragonfruit-ai-text); --ds-elevation-1: 0 0 0 1px rgb(255 255 255 / 0.06); --ds-elevation-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 4px 12px rgb(0 0 0 / 0.28); --ds-elevation-3: 0 0 0 1px rgb(255 255 255 / 0.10), 0 12px 32px rgb(0 0 0 / 0.40); } /* ---- tema Lime Spark (oscuro) */ [data-theme="lime-spark"] { color-scheme: dark; --ds-surface-hover: var(--ds-p-lime-spark-neutral-hover); --ds-surface-base: var(--ds-p-lime-spark-surface-base); --ds-surface-raised: var(--ds-p-lime-spark-surface-raised); --ds-surface-sunken: var(--ds-p-lime-spark-surface-sunken); --ds-surface-overlay: var(--ds-p-lime-spark-surface-overlay); --ds-surface-scrim: var(--ds-p-lime-spark-scrim); --ds-text-primary: var(--ds-p-lime-spark-neutral-25); --ds-text-secondary: var(--ds-p-lime-spark-text-secondary); --ds-text-muted: var(--ds-p-lime-spark-text-muted); --ds-text-inverse: var(--ds-p-lime-spark-text-inverse); --ds-text-link: var(--ds-p-lime-spark-link); --ds-text-link-hover: var(--ds-p-lime-spark-link-hover); --ds-border-subtle: var(--ds-p-lime-spark-border-subtle); --ds-border-default: var(--ds-p-lime-spark-border-default); --ds-border-strong: var(--ds-p-lime-spark-border-strong); --ds-action-primary: var(--ds-p-lime-spark-accent); --ds-action-primary-hover: var(--ds-p-lime-spark-accent-hover); --ds-action-primary-active: var(--ds-p-lime-spark-accent-active); --ds-action-primary-text: var(--ds-p-lime-spark-accent-text); --ds-action-secondary: var(--ds-p-lime-spark-secondary); --ds-action-secondary-hover: var(--ds-p-lime-spark-secondary-hover); --ds-action-secondary-text: var(--ds-p-lime-spark-secondary-text); --ds-action-ghost: var(--ds-p-lime-spark-transparent); --ds-action-ghost-hover: var(--ds-p-lime-spark-ghost-hover); --ds-action-disabled: var(--ds-p-lime-spark-disabled); --ds-action-disabled-text: var(--ds-p-lime-spark-disabled-text); --ds-border-focus: var(--ds-p-lime-spark-focus); --ds-accent-highlight-bg: var(--ds-p-lime-spark-highlight); --ds-accent-highlight-text: var(--ds-p-lime-spark-highlight-text); --ds-surface-selected: var(--ds-p-lime-spark-selected); --ds-border-selected: var(--ds-p-lime-spark-selected-border); --ds-feedback-success: var(--ds-p-lime-spark-success); --ds-feedback-success-bg: var(--ds-p-lime-spark-success-bg); --ds-feedback-success-border: var(--ds-p-lime-spark-success-border); --ds-feedback-success-text: var(--ds-p-lime-spark-success-text); --ds-feedback-warning: var(--ds-p-lime-spark-warning); --ds-feedback-warning-bg: var(--ds-p-lime-spark-warning-bg); --ds-feedback-warning-border: var(--ds-p-lime-spark-warning-border); --ds-feedback-warning-text: var(--ds-p-lime-spark-warning-text); --ds-feedback-danger: var(--ds-p-lime-spark-danger); --ds-feedback-danger-bg: var(--ds-p-lime-spark-danger-bg); --ds-feedback-danger-border: var(--ds-p-lime-spark-danger-border); --ds-feedback-danger-text: var(--ds-p-lime-spark-danger-text); --ds-feedback-info: var(--ds-p-lime-spark-info); --ds-feedback-info-bg: var(--ds-p-lime-spark-info-bg); --ds-feedback-info-border: var(--ds-p-lime-spark-info-border); --ds-feedback-info-text: var(--ds-p-lime-spark-info-text); --ds-feedback-danger-solid-text: var(--ds-p-lime-spark-danger-solid-text); --ds-action-danger: var(--ds-p-lime-spark-danger); --ds-action-danger-hover: var(--ds-p-lime-spark-danger-hover); --ds-action-danger-text: var(--ds-p-lime-spark-danger-solid-text); --ds-action-danger-border: var(--ds-p-lime-spark-danger); --ds-ai-surface: var(--ds-p-lime-spark-ai-surface); --ds-ai-border: var(--ds-p-lime-spark-ai-border); --ds-ai-accent: var(--ds-p-lime-spark-ai-accent); --ds-ai-accent-text: var(--ds-p-lime-spark-ai-text); --ds-elevation-1: 0 0 0 1px rgb(255 255 255 / 0.06); --ds-elevation-2: 0 0 0 1px rgb(255 255 255 / 0.08), 0 4px 12px rgb(0 0 0 / 0.28); --ds-elevation-3: 0 0 0 1px rgb(255 255 255 / 0.10), 0 12px 32px rgb(0 0 0 / 0.40); } /* ---- tema Emerald Ink (claro) */ [data-theme="emerald-ink"] { color-scheme: light; --ds-surface-hover: var(--ds-p-emerald-ink-neutral-hover); --ds-surface-base: var(--ds-p-emerald-ink-surface-base); --ds-surface-raised: var(--ds-p-emerald-ink-surface-raised); --ds-surface-sunken: var(--ds-p-emerald-ink-surface-sunken); --ds-surface-overlay: var(--ds-p-emerald-ink-surface-overlay); --ds-surface-scrim: var(--ds-p-emerald-ink-scrim); --ds-text-primary: var(--ds-p-emerald-ink-neutral-950); --ds-text-secondary: var(--ds-p-emerald-ink-text-secondary); --ds-text-muted: var(--ds-p-emerald-ink-text-muted); --ds-text-inverse: var(--ds-p-emerald-ink-text-inverse); --ds-text-link: var(--ds-p-emerald-ink-link); --ds-text-link-hover: var(--ds-p-emerald-ink-link-hover); --ds-border-subtle: var(--ds-p-emerald-ink-border-subtle); --ds-border-default: var(--ds-p-emerald-ink-border-default); --ds-border-strong: var(--ds-p-emerald-ink-border-strong); --ds-action-primary: var(--ds-p-emerald-ink-accent); --ds-action-primary-hover: var(--ds-p-emerald-ink-accent-hover); --ds-action-primary-active: var(--ds-p-emerald-ink-accent-active); --ds-action-primary-text: var(--ds-p-emerald-ink-accent-text); --ds-accent-mid: var(--ds-p-emerald-ink-accent-mid); --ds-action-secondary: var(--ds-p-emerald-ink-secondary); --ds-action-secondary-hover: var(--ds-p-emerald-ink-secondary-hover); --ds-action-secondary-text: var(--ds-p-emerald-ink-secondary-text); --ds-action-ghost: var(--ds-p-emerald-ink-transparent); --ds-action-ghost-hover: var(--ds-p-emerald-ink-ghost-hover); --ds-action-disabled: var(--ds-p-emerald-ink-disabled); --ds-action-disabled-text: var(--ds-p-emerald-ink-disabled-text); --ds-border-focus: var(--ds-p-emerald-ink-focus); --ds-accent-highlight-bg: var(--ds-p-emerald-ink-highlight); --ds-accent-highlight-text: var(--ds-p-emerald-ink-highlight-text); --ds-surface-selected: var(--ds-p-emerald-ink-selected); --ds-border-selected: var(--ds-p-emerald-ink-selected-border); --ds-feedback-success: var(--ds-p-emerald-ink-success); --ds-feedback-success-bg: var(--ds-p-emerald-ink-success-bg); --ds-feedback-success-border: var(--ds-p-emerald-ink-success-border); --ds-feedback-success-text: var(--ds-p-emerald-ink-success-text); --ds-feedback-warning: var(--ds-p-emerald-ink-warning); --ds-feedback-warning-bg: var(--ds-p-emerald-ink-warning-bg); --ds-feedback-warning-border: var(--ds-p-emerald-ink-warning-border); --ds-feedback-warning-text: var(--ds-p-emerald-ink-warning-text); --ds-feedback-danger: var(--ds-p-emerald-ink-danger); --ds-feedback-danger-bg: var(--ds-p-emerald-ink-danger-bg); --ds-feedback-danger-border: var(--ds-p-emerald-ink-danger-border); --ds-feedback-danger-text: var(--ds-p-emerald-ink-danger-text); --ds-feedback-info: var(--ds-p-emerald-ink-info); --ds-feedback-info-bg: var(--ds-p-emerald-ink-info-bg); --ds-feedback-info-border: var(--ds-p-emerald-ink-info-border); --ds-feedback-info-text: var(--ds-p-emerald-ink-info-text); --ds-feedback-danger-solid-text: var(--ds-p-emerald-ink-danger-solid-text); --ds-action-danger: var(--ds-p-emerald-ink-danger); --ds-action-danger-hover: var(--ds-p-emerald-ink-danger-hover); --ds-action-danger-text: var(--ds-p-emerald-ink-danger-solid-text); --ds-action-danger-border: var(--ds-p-emerald-ink-danger); --ds-ai-surface: var(--ds-p-emerald-ink-ai-surface); --ds-ai-border: var(--ds-p-emerald-ink-ai-border); --ds-ai-accent: var(--ds-p-emerald-ink-ai-accent); --ds-ai-accent-text: var(--ds-p-emerald-ink-ai-text); --ds-elevation-1: 0 1px 2px rgb(11 36 29 / 0.08), 0 0 0 1px rgb(11 36 29 / 0.04); --ds-elevation-2: 0 2px 6px rgb(11 36 29 / 0.10), 0 8px 20px rgb(11 36 29 / 0.08); --ds-elevation-3: 0 8px 24px rgb(11 36 29 / 0.14), 0 24px 56px rgb(11 36 29 / 0.14); } /* ---- tema Butter Yellow (claro) */ [data-theme="butter-yellow"] { color-scheme: light; --ds-surface-hover: var(--ds-p-butter-yellow-neutral-hover); --ds-surface-base: var(--ds-p-butter-yellow-surface-base); --ds-surface-raised: var(--ds-p-butter-yellow-surface-raised); --ds-surface-sunken: var(--ds-p-butter-yellow-surface-sunken); --ds-surface-overlay: var(--ds-p-butter-yellow-surface-overlay); --ds-surface-scrim: var(--ds-p-butter-yellow-scrim); --ds-text-primary: var(--ds-p-butter-yellow-neutral-950); --ds-text-secondary: var(--ds-p-butter-yellow-text-secondary); --ds-text-muted: var(--ds-p-butter-yellow-text-muted); --ds-text-inverse: var(--ds-p-butter-yellow-text-inverse); --ds-text-link: var(--ds-p-butter-yellow-link); --ds-text-link-hover: var(--ds-p-butter-yellow-link-hover); --ds-border-subtle: var(--ds-p-butter-yellow-border-subtle); --ds-border-default: var(--ds-p-butter-yellow-border-default); --ds-border-strong: var(--ds-p-butter-yellow-border-strong); --ds-action-primary: var(--ds-p-butter-yellow-accent); --ds-action-primary-hover: var(--ds-p-butter-yellow-accent-hover); --ds-action-primary-active: var(--ds-p-butter-yellow-accent-active); --ds-action-primary-text: var(--ds-p-butter-yellow-accent-text); --ds-action-secondary: var(--ds-p-butter-yellow-secondary); --ds-action-secondary-hover: var(--ds-p-butter-yellow-secondary-hover); --ds-action-secondary-text: var(--ds-p-butter-yellow-secondary-text); --ds-action-ghost: var(--ds-p-butter-yellow-transparent); --ds-action-ghost-hover: var(--ds-p-butter-yellow-ghost-hover); --ds-action-disabled: var(--ds-p-butter-yellow-disabled); --ds-action-disabled-text: var(--ds-p-butter-yellow-disabled-text); --ds-border-focus: var(--ds-p-butter-yellow-focus); --ds-accent-highlight-bg: var(--ds-p-butter-yellow-highlight); --ds-accent-highlight-text: var(--ds-p-butter-yellow-highlight-text); --ds-surface-selected: var(--ds-p-butter-yellow-selected); --ds-border-selected: var(--ds-p-butter-yellow-selected-border); --ds-feedback-success: var(--ds-p-butter-yellow-success); --ds-feedback-success-bg: var(--ds-p-butter-yellow-success-bg); --ds-feedback-success-border: var(--ds-p-butter-yellow-success-border); --ds-feedback-success-text: var(--ds-p-butter-yellow-success-text); --ds-feedback-warning: var(--ds-p-butter-yellow-warning); --ds-feedback-warning-bg: var(--ds-p-butter-yellow-warning-bg); --ds-feedback-warning-border: var(--ds-p-butter-yellow-warning-border); --ds-feedback-warning-text: var(--ds-p-butter-yellow-warning-text); --ds-feedback-danger: var(--ds-p-butter-yellow-danger); --ds-feedback-danger-bg: var(--ds-p-butter-yellow-danger-bg); --ds-feedback-danger-border: var(--ds-p-butter-yellow-danger-border); --ds-feedback-danger-text: var(--ds-p-butter-yellow-danger-text); --ds-feedback-info: var(--ds-p-butter-yellow-info); --ds-feedback-info-bg: var(--ds-p-butter-yellow-info-bg); --ds-feedback-info-border: var(--ds-p-butter-yellow-info-border); --ds-feedback-info-text: var(--ds-p-butter-yellow-info-text); --ds-feedback-danger-solid-text: var(--ds-p-butter-yellow-danger-solid-text); --ds-action-danger: var(--ds-p-butter-yellow-danger); --ds-action-danger-hover: var(--ds-p-butter-yellow-danger-hover); --ds-action-danger-text: var(--ds-p-butter-yellow-danger-solid-text); --ds-action-danger-border: var(--ds-p-butter-yellow-danger); --ds-ai-surface: var(--ds-p-butter-yellow-ai-surface); --ds-ai-border: var(--ds-p-butter-yellow-ai-border); --ds-ai-accent: var(--ds-p-butter-yellow-ai-accent); --ds-ai-accent-text: var(--ds-p-butter-yellow-ai-text); --ds-elevation-1: 0 1px 2px rgb(27 18 56 / 0.08), 0 0 0 1px rgb(27 18 56 / 0.04); --ds-elevation-2: 0 2px 6px rgb(27 18 56 / 0.10), 0 8px 20px rgb(27 18 56 / 0.08); --ds-elevation-3: 0 8px 24px rgb(27 18 56 / 0.14), 0 24px 56px rgb(27 18 56 / 0.14); } :root, [data-density="comfortable"] { --ds-control-height-sm: 2rem; --ds-control-height-md: 2.5rem; --ds-control-height-lg: 3rem; --ds-control-padding-x: 0.75rem; --ds-control-padding-y: 0.5rem; --ds-control-font-size: 0.9375rem; --ds-control-icon-size: 1.25rem; --ds-field-gap: 0.375rem; --ds-field-stack: 1.25rem; --ds-field-label-size: 0.875rem; --ds-field-help-size: 0.8125rem; --ds-table-row-height: 2.75rem; --ds-table-cell-padding-x: 0.75rem; --ds-target-min: 2.5rem; --ds-text-line-height: 1.6; } [data-density="compact"] { --ds-control-height-sm: 1.75rem; --ds-control-height-md: 2rem; --ds-control-height-lg: 2.5rem; --ds-control-padding-x: 0.5rem; --ds-control-padding-y: 0.375rem; --ds-control-font-size: 0.875rem; --ds-control-icon-size: 1rem; --ds-field-gap: 0.25rem; --ds-field-stack: 0.75rem; --ds-field-label-size: 0.8125rem; --ds-field-help-size: 0.75rem; --ds-table-row-height: 2rem; --ds-table-cell-padding-x: 0.5rem; --ds-target-min: 1.5rem; --ds-text-line-height: 1.45; } [data-density="field"] { --ds-control-height-sm: 3rem; --ds-control-height-md: 3.5rem; --ds-control-height-lg: 4rem; --ds-control-padding-x: 1rem; --ds-control-padding-y: 0.75rem; --ds-control-font-size: 1.125rem; --ds-control-icon-size: 1.5rem; --ds-field-gap: 0.5rem; --ds-field-stack: 1.5rem; --ds-field-label-size: 1rem; --ds-field-help-size: 0.9375rem; --ds-table-row-height: 3.75rem; --ds-table-cell-padding-x: 1rem; --ds-target-min: 3.5rem; --ds-text-line-height: 1.55; }