/*
 * 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.60); /* Black 60% opacity - Custom color */

    /* Legacy Info Colors */
    --slds-g-color-info-base-10: rgba(0, 22, 57, 1); /* 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 */

}