/*
 * SLDS Design Tokens
 * Based on SLDS 2 Components Web specification
 * 
 * This file defines CSS custom properties (variables) for colors used in
 * lumina components, e.g. ImageButtonV2.
 */
:root {
  /* ============================================================================
     * OFFICIAL SLDS 2 TOKENS
     * All tokens below are official SLDS 2 design system tokens
     * Reference: https://www.lightningdesignsystem.com/2e1ef8501/p/655b28-color/b/76ba78
     * ============================================================================ */
  /* Brand Colors - Electric Blue Variant (Default), reference Electric Blue palette */
  --slds-g-color-brand-base-10: var(--slds-g-color-palette-electric-blue-10);
  /* Electric Blue 10 - Very dark navy */
  --slds-g-color-brand-base-15: var(--slds-g-color-palette-electric-blue-15);
  /* Electric Blue 15 - Dark navy */
  --slds-g-color-brand-base-20: var(--slds-g-color-palette-electric-blue-20);
  /* Electric Blue 20 - Dark blue */
  --slds-g-color-brand-base-30: var(--slds-g-color-palette-electric-blue-30);
  /* Electric Blue 30 */
  --slds-g-color-brand-base-40: var(--slds-g-color-palette-electric-blue-40);
  /* Electric Blue 40 */
  --slds-g-color-brand-base-50: var(--slds-g-color-palette-electric-blue-50);
  /* Electric Blue 50 */
  --slds-g-color-brand-base-60: var(--slds-g-color-palette-electric-blue-60);
  /* Electric Blue 60 - Light blue */
  --slds-g-color-brand-base-65: var(--slds-g-color-palette-electric-blue-65);
  /* Electric Blue 65 - Lighter blue */
  --slds-g-color-brand-base-70: var(--slds-g-color-palette-electric-blue-70);
  /* Electric Blue 70 - Very light blue */
  --slds-g-color-brand-base-80: var(--slds-g-color-palette-electric-blue-80);
  /* Electric Blue 80 - Used for menu backgrounds/hover states */
  --slds-g-color-brand-base-90: var(--slds-g-color-palette-electric-blue-90);
  /* Electric Blue 90 - Used for menu backgrounds/hover states */
  --slds-g-color-brand-base-95: var(--slds-g-color-palette-electric-blue-95);
  /* Electric Blue 95 - Very light blue */
  --slds-g-color-brand-base-100: var(--slds-g-color-palette-neutral-100);
  /* Step 100 - White (palette has no electric-blue-100) */
  /* Neutral Base Colors */
  --slds-g-color-neutral-base-20: #2E2E2E;
  /* Step 20 */
  --slds-g-color-neutral-base-50: #757575;
  /* Step 50 */
  --slds-g-color-neutral-base-80: #C9C9C9;
  /* Step 80 */
  /* Accent Colors (Electric Blue) */
  --slds-g-color-accent-1: var(--slds-g-color-brand-base-50);
  /* Electric Blue 50 - Emphasis color for large text and icon fills */
  --slds-g-color-accent-2: var(--slds-g-color-brand-base-40);
  /* Electric Blue 40 - Emphasis color for text, links, and icon color fills */
  --slds-g-color-accent-3: var(--slds-g-color-brand-base-30);
  /* Electric Blue 30 */
  --slds-g-color-accent-container-1: var(--slds-g-color-brand-base-50);
  /* Electric Blue 50 */
  --slds-g-color-accent-container-2: var(--slds-g-color-brand-base-40);
  /* Electric Blue 40 */
  --slds-g-color-accent-container-3: var(--slds-g-color-brand-base-30);
  /* Electric Blue 30 - Alternative background fill on hover state */
  --slds-g-color-on-accent-1: var(--slds-g-color-palette-neutral-100);
  /* Neutral 100 */
  --slds-g-color-on-accent-2: var(--slds-g-color-palette-neutral-100);
  /* Neutral 100 */
  --slds-g-color-on-accent-3: var(--slds-g-color-palette-neutral-100);
  /* Neutral 100 */
  /* Surface/Container Colors */
  --slds-g-color-surface-1: var(--slds-g-color-palette-neutral-100);
  /* Neutral 100 */
  --slds-g-color-surface-2: var(--slds-g-color-palette-neutral-95);
  /* Neutral 95 - Darker page backgrounds */
  --slds-g-color-surface-3: var(--slds-g-color-palette-neutral-95);
  /* Neutral 95 - Color surface used for containers */
  --slds-g-color-surface-container-1: var(--slds-g-color-palette-neutral-100);
  /* Neutral 100 */
  --slds-g-color-surface-container-2: var(--slds-g-color-palette-neutral-95);
  /* Neutral 95 */
  --slds-g-color-surface-container-3: var(--slds-g-color-palette-neutral-90);
  /* Neutral 90 - Darkest color for container background fill */
  /* On-Surface Colors (for text/icons on surfaces) */
  --slds-g-color-on-surface-1: var(--slds-g-color-palette-neutral-40);
  /* Neutral 40 - Body text, placeholder text, field labels, sub-headings */
  --slds-g-color-on-surface-2: var(--slds-g-color-palette-neutral-20);
  /* Neutral 20 - Secondary and tertiary headings, dark body copy */
  --slds-g-color-on-surface-3: #03234D;
  /* Dark Blue - Titles, text/icons where strong contrast is needed */
  --slds-g-color-on-surface-inverse-2: var(--slds-g-color-brand-base-80);
  /* Electric Blue 80 - On-surface fill on inverse/branded surfaces */
  /* Border Colors */
  --slds-g-color-border-1: var(--slds-g-color-palette-neutral-80);
  /* Neutral 80 - Decorative/non-interactive borders */
  --slds-g-color-border-2: var(--slds-g-color-palette-neutral-40);
  /* Neutral 40 - Functional borders for interactive elements */
  --slds-g-color-border-accent-1: var(--slds-g-color-brand-base-50);
  /* Electric Blue 50 - Border color for branded containers */
  --slds-g-color-border-accent-2: var(--slds-g-color-brand-base-40);
  /* Electric Blue 40 - Border color for branded containers */
  --slds-g-color-border-accent-3: var(--slds-g-color-brand-base-30);
  /* Electric Blue 30 - Hover border color for branded containers */
  --slds-g-color-border-error-1: #B60554;
  /* Pink 40 - Border color for error containers */
  --slds-g-color-border-error-2: #8A033E;
  /* Pink 30 - Hover border color for error containers */
  /* Disabled Colors */
  --slds-g-color-disabled-1: var(--slds-g-color-palette-neutral-50);
  /* Neutral 50 */
  --slds-g-color-disabled-container-1: var(--slds-g-color-palette-neutral-90);
  /* Neutral 90 */
  --slds-g-color-disabled-container-2: var(--slds-g-color-palette-neutral-80);
  /* Neutral 80 */
  --slds-g-color-on-disabled-1: var(--slds-g-color-palette-neutral-50);
  /* Neutral 50 - Text/icons on disabled-container-1 */
  --slds-g-color-on-disabled-2: var(--slds-g-color-palette-neutral-40);
  /* Neutral 40 - Text/icons on disabled-container-2 */
  --slds-g-color-border-disabled-1: var(--slds-g-color-palette-neutral-50);
  /* Neutral 50 */
  /* Feedback Colors - Error/Destructive */
  --slds-g-color-error-1: #B60554;
  /* Pink 40 */
  --slds-g-color-on-error-1: #B60554;
  /* Pink 40 - Text/icons on error-container-1 */
  --slds-g-color-on-error-2: #8A033E;
  /* Pink 30 - Text/icons on error-container-2 */
  --slds-g-color-error-container-1: #FDDDE3;
  /* Light Pink - Container background for error components like toast/alerts */
  --slds-g-color-error-container-2: #FDB6C5;
  /* Medium Pink - Container background for destructive buttons */
  /* Feedback Colors - Warning */
  --slds-g-color-warning-1: #8C4B02;
  /* Brown - Warning color for text and icons */
  --slds-g-color-on-warning-1: #8C4B02;
  /* Brown - Text/icons on warning-container-1 */
  --slds-g-color-warning-container-1: #F9E3B6;
  /* Light Yellow - Container background for warning components */
  --slds-g-color-border-warning-1: #DD7A01;
  /* Orange - Border color for warning containers */
  /* Feedback Colors - Success */
  --slds-g-color-success-1: #056764;
  /* Teal - Success color for text and icons */
  --slds-g-color-on-success-1: #056764;
  /* Teal - Text/icons on success-container-1 */
  --slds-g-color-on-success-2: #023434;
  /* Dark Teal - Text/icons on success-container-2 */
  --slds-g-color-success-container-1: #ACF3E4;
  /* Light Teal - Container background for success components */
  --slds-g-color-success-container-2: #04E1CB;
  /* Bright Teal - Container background for success components */
  --slds-g-color-border-success-1: #056764;
  /* Teal - Border color for success containers */
  --slds-g-color-border-success-2: #056764;
  /* Teal - Border color for success containers */
  /* Feedback Colors - Info */
  --slds-g-color-info-1: #0B5CAB;
  /* Blue - Info color for text and icons */
  --slds-g-color-info-container-1: #D8E6FE;
  /* Light Blue - Container background for info components */
  --slds-g-color-on-info-1: #0B5CAB;
  /* Blue - Text/icons on info-container-1 */
  /* Transparent */
  --slds-g-color-transparent: transparent;
  /* Neutral Palette Colors (constant values, do not change with theme) */
  --slds-g-color-palette-neutral-10: #181818;
  /* Step 10 - Darkest */
  --slds-g-color-palette-neutral-15: #242424;
  /* Step 15 */
  --slds-g-color-palette-neutral-20: #2E2E2E;
  /* Step 20 */
  --slds-g-color-palette-neutral-30: #444444;
  /* Step 30 */
  --slds-g-color-palette-neutral-40: #5C5C5C;
  /* Step 40 */
  --slds-g-color-palette-neutral-50: #757575;
  /* Step 50 - OVERRIDE: Custom value #757575 instead of official #747474 */
  --slds-g-color-palette-neutral-60: #939393;
  /* Step 60 */
  --slds-g-color-palette-neutral-65: #A0A0A0;
  /* Step 65 */
  --slds-g-color-palette-neutral-70: #AEAEAE;
  /* Step 70 */
  --slds-g-color-palette-neutral-80: #C9C9C9;
  /* Step 80 */
  --slds-g-color-palette-neutral-90: #E5E5E5;
  /* Step 90 */
  --slds-g-color-palette-neutral-95: #F3F3F3;
  /* Step 95 */
  --slds-g-color-palette-neutral-100: #FFFFFF;
  /* Step 100 - Lightest */
  /* Electric Blue Palette Colors (constant values, do not change, used as default theme/brand colors) */
  --slds-g-color-palette-electric-blue-10: #001642;
  /* Step 10 - Darkest */
  --slds-g-color-palette-electric-blue-15: #001E5B;
  /* Step 15 */
  --slds-g-color-palette-electric-blue-20: #002775;
  /* Step 20 */
  --slds-g-color-palette-electric-blue-30: #022AC0;
  /* Step 30 */
  --slds-g-color-palette-electric-blue-40: #0250D9;
  /* Step 40 */
  --slds-g-color-palette-electric-blue-50: #066AFE;
  /* Step 50 */
  --slds-g-color-palette-electric-blue-60: #4992FE;
  /* Step 60 */
  --slds-g-color-palette-electric-blue-65: #5F9FFE;
  /* Step 65 */
  --slds-g-color-palette-electric-blue-70: #7CB1FE;
  /* Step 70 */
  --slds-g-color-palette-electric-blue-80: #A8CBFF;
  /* Step 80 */
  --slds-g-color-palette-electric-blue-90: #D6E6FF;
  /* Step 90 */
  --slds-g-color-palette-electric-blue-95: #EDF4FF;
  /* Step 95 - Lightest */
  --slds-g-color-palette-blue-10: #001639;
  --slds-g-color-palette-blue-15: #03234d;
  --slds-g-color-palette-blue-20: #032d60;
  --slds-g-color-palette-blue-30: #014486;
  --slds-g-color-palette-blue-40: #0b5cab;
  --slds-g-color-palette-blue-50: #0176d3;
  --slds-g-color-palette-blue-60: #1b96ff;
  --slds-g-color-palette-blue-65: #57a3fd;
  --slds-g-color-palette-blue-70: #78b0fd;
  --slds-g-color-palette-blue-80: #aacbff;
  --slds-g-color-palette-blue-90: #d8e6fe;
  --slds-g-color-palette-blue-95: #eef4ff;
  /* ============================================================================
     * SLDS 2 WEB COMPONENTS TOKENS
     * Component hooks specific to SLDS 2 Web Components
     * Reference: https://www.figma.com/design/RiY2reCmbX0Jyq7QAFL8SE/%F0%9F%86%95-SLDS-2-Components---Web
     * ============================================================================ */
  /* Spacing/Sizing – Border Tokens (stroke width) */
  --slds-g-sizing-border-1: 1px;
  --slds-g-sizing-border-2: 2px;
  --slds-g-sizing-border-3: 3px;
  --slds-g-sizing-border-4: 4px;
  /* Spacing/Sizing – Sizing Tokens (width and height) */
  --slds-g-sizing-1: 2px;
  --slds-g-sizing-2: 4px;
  --slds-g-sizing-3: 8px;
  --slds-g-sizing-4: 12px;
  --slds-g-sizing-5: 16px;
  --slds-g-sizing-6: 20px;
  --slds-g-sizing-7: 24px;
  --slds-g-sizing-8: 28px;
  --slds-g-sizing-9: 32px;
  --slds-g-sizing-10: 48px;
  --slds-g-sizing-11: 64px;
  --slds-g-sizing-12: 80px;
  --slds-g-sizing-13: 160px;
  --slds-g-sizing-14: 240px;
  --slds-g-sizing-15: 320px;
  --slds-g-sizing-16: 480px;
  /* Spacing/Sizing - Spacing Tokens (gaps, paddings, margins) */
  --slds-g-spacing-0: 0;
  /* 0px */
  --slds-g-spacing-1: 4px;
  /* 4px */
  --slds-g-spacing-2: 8px;
  /* 8px */
  --slds-g-spacing-3: 12px;
  /* 12px */
  --slds-g-spacing-4: 16px;
  /* 16px */
  --slds-g-spacing-5: 24px;
  /* 24px */
  --slds-g-spacing-6: 32px;
  /* 32px */
  --slds-g-spacing-7: 40px;
  /* 40px */
  --slds-g-spacing-8: 48px;
  /* 48px */
  --slds-g-spacing-9: 56px;
  /* 56px */
  --slds-g-spacing-10: 64px;
  /* 64px */
  --slds-g-spacing-11: 72px;
  /* 72px */
  --slds-g-spacing-12: 80px;
  /* 80px */
  /* Spacing/Sizing - Border Radius Tokens (corner radius) */
  --slds-g-radius-border-1: 4px;
  --slds-g-radius-border-2: 8px;
  --slds-g-radius-border-3: 12px;
  --slds-g-radius-border-4: 20px;
  --slds-g-radius-border-circle: 9999px;
  /* Typography – Font scale (font size) */
  --slds-g-font-scale-neg-2: 10px;
  --slds-g-font-scale-neg-1: 12px;
  --slds-g-font-size-base: 13px;
  --slds-g-font-scale-1: 14px;
  --slds-g-font-scale-2: 16px;
  --slds-g-font-scale-3: 20px;
  --slds-g-font-scale-4: 24px;
  --slds-g-font-scale-5: 28px;
  --slds-g-font-scale-6: 32px;
  --slds-g-font-scale-7: 40px;
  --slds-g-font-scale-8: 48px;
  /* Typography – Font family */
  --slds-g-font-family: var(--slds-g-font-family-base);
  --slds-g-font-family-base: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', 'Fira Sans';
  --slds-g-font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace;
  /* Typography – Font weight */
  --slds-g-font-weight-1: 100;
  --slds-g-font-weight-2: 200;
  --slds-g-font-weight-3: 300;
  /* Light */
  --slds-g-font-weight-4: 400;
  /* Regular */
  --slds-g-font-weight-5: 500;
  /* Medium */
  --slds-g-font-weight-6: 600;
  /* Semibold */
  --slds-g-font-weight-7: 700;
  /* Bold */
  /* Typography – Line height (unitless) */
  --slds-g-font-line-height-1: 1;
  --slds-g-font-line-height-2: 1.25;
  --slds-g-font-line-height-3: 1.375;
  --slds-g-font-line-height-4: 1.5;
  --slds-g-font-line-height-5: 1.75;
  --slds-g-font-line-height-6: 2;
  /* Destructive Button Component Hooks */
  --color-component-hooks-destructive-button-container-1: #E3066A;
  /* Pink/50 - palette-pink-50 */
  --color-component-hooks-destructive-button-container-2: #B60554;
  /* Pink/40 - palette-pink-40 */
  --color-component-hooks-on-destructive-button-1: var(--slds-g-color-palette-neutral-100);
  /* Neutral/100 - neutral-base-100 */
  --color-component-hooks-on-destructive-button-2: var(--slds-g-color-palette-neutral-100);
  /* Neutral/100 - neutral-base-100 */
  --color-component-hooks-destructive-button-bevel: #61022A;
  /* Pink/20 - palette-pink-20 */
  /* Success Button Component Hooks */
  --color-component-hooks-success-button-container-1: #0B827C;
  /* Teal/50 - palette-teal-50 */
  --color-component-hooks-success-button-container-2: #056764;
  /* Teal/40 - palette-teal-40 */
  --color-component-hooks-on-success-button-1: var(--slds-g-color-palette-neutral-100);
  /* Neutral/100 - neutral-base-100 */
  --color-component-hooks-on-success-button-2: var(--slds-g-color-palette-neutral-100);
  /* Neutral/100 - neutral-base-100 */
  --color-component-hooks-success-button-bevel: #023434;
  /* Teal/20 - palette-teal-20 */
  /* Brand Button Component Hooks */
  --color-component-hooks-brand-button-bevel: var(--slds-g-color-brand-base-20);
  /* Electric Blue/20 */
  /* Neutral Button Component Hooks */
  --color-component-hooks-neutral-button-bevel: var(--slds-g-color-palette-neutral-20);
  /* Neutral/20 - neutral-base-20 */
  /* Other Component Hooks */
  /* Fallback for browsers without color-mix() (e.g. Safari <16.2, Chrome <111). See .cursor/docs/slds-tokens-brand-palette-approach.md */
  --color-component-hooks-list-item-drag: rgba(2, 42, 192, 0.8);
  /* Electric Blue 30 at 80% - same as brand-base-30 */
  --color-component-hooks-list-item-drag: color-mix(in srgb, var(--slds-g-color-brand-base-30) 80%, transparent);
  /* Modal Component Hooks */
  --color-component-hooks-modal-backdrop: var(--slds-g-color-palette-neutral-20);
  /* Neutral/20 - neutral-base-20 */
  /* ============================================================================
     * CHART / DATA VISUALIZATION COLORS (Lumina) — SLDS Categorical Palette
     * Use categorical chart colors to differentiate two or more unrelated data
     * categories. Follow the numbered sequence.
     * Ref: https://www.figma.com/design/9yNY521mAafb4VhKMuEN0Q/SLDS-2-Pattern-%E2%80%93-Tableau-Next-Visualization-Toolkit?node-id=9716-2874
     * ============================================================================ */
  --slds-g-color-chart-categorical-1: #4992FE;
  /* Electric Blue 60 */
  --slds-g-color-chart-categorical-2: #BA01FF;
  /* Violet 50 */
  --slds-g-color-chart-categorical-3: #06A59A;
  /* Teal 60 */
  --slds-g-color-chart-categorical-4: #3A49DA;
  /* Indigo 40 */
  --slds-g-color-chart-categorical-5: #FE5C4C;
  /* Red 60 */
  --slds-g-color-chart-categorical-6: #024D4C;
  /* Teal 30 */
  --slds-g-color-chart-categorical-7: #3BA755;
  /* Green 60 */
  --slds-g-color-chart-categorical-8: #8A033E;
  /* Pink 30 */
  --slds-g-color-chart-categorical-9: #E3066A;
  /* Pink 50 */
  --slds-g-color-chart-categorical-10: #002775;
  /* Electronic Blue 20 */
  /* ============================================================================
     * LEGACY / CUSTOM TOKENS
     * Tokens below are legacy, custom, or deprecated and should be replaced with
     * official SLDS 2 tokens where possible
     * ============================================================================ */
  /* Legacy Foundation Colors */
  --slds-g-color-foundation-black-transparent-60: rgba(43, 40, 38, 0.6);
  /* Black 60% opacity - Custom color */
  /* Legacy Info Colors */
  --slds-g-color-info-base-10: #001639;
  /* Dark Blue / Navy - Legacy token, consider replacing with --slds-g-color-info-1 */
  /* Legacy Destructive Colors */
  --slds-g-color-red-40: #BA0517;
  /* Red 40 - Legacy destructive color, consider replacing with --slds-g-color-error-1 */
}