/**
 * Sumtastic Design System - CSS Tokens
 * Version: 1.0.0
 * Generated by Generic Design System Kit
 *
 * Usage: Include this file in your webapp to get all design tokens.
 * Supports light theme (default) and dark theme via [data-theme="dark"]
 */

:root {
    /* === BORDER RADIUS === */
    --sum-border-radius-xs: 8px;
    --sum-border-radius-sm: 12px;
    --sum-border-radius-md: 16px;
    --sum-border-radius-lg: 20px;
    --sum-border-radius-xl: 28px;

    /* === SPACING (2xs - 12xl) === */
    --sum-spacing-2xs: 2px;
    --sum-spacing-xs: 4px;
    --sum-spacing-sm: 8px;
    --sum-spacing-md: 12px;
    --sum-spacing-lg: 16px;
    --sum-spacing-xl: 20px;
    --sum-spacing-2xl: 24px;
    --sum-spacing-3xl: 28px;
    --sum-spacing-4xl: 36px;
    --sum-spacing-5xl: 40px;
    --sum-spacing-6xl: 48px;
    --sum-spacing-7xl: 56px;
    --sum-spacing-8xl: 64px;
    --sum-spacing-9xl: 72px;
    --sum-spacing-10xl: 80px;
    --sum-spacing-11xl: 96px;
    --sum-spacing-12xl: 128px;

    /* === TYPOGRAPHY - Font Family === */
    --sum-font-family-web: Inter, sans-serif;

    /* === TYPOGRAPHY - Font Sizes === */
    --sum-font-size-display-lg: 96px;
    --sum-font-size-body-sm: 12px;
    --sum-font-size-body-md: 14px;
    --sum-font-size-body-lg: 16px;
    --sum-font-size-body-xl: 20px;
    --sum-font-size-label-sm: 12px;
    --sum-font-size-label-md: 14px;
    --sum-font-size-label-lg: 16px;
    --sum-font-size-label-xl: 18px;
    --sum-font-size-headline-sm: 18px;
    --sum-font-size-headline-md: 20px;
    --sum-font-size-headline-lg: 24px;
    --sum-font-size-headline-xl: 28px;
    --sum-font-size-headline-2xl: 34px;
    --sum-font-size-headline-3xl: 40px;

    /* === TYPOGRAPHY - Font Weights === */
    --sum-font-weight-regular: 400;
    --sum-font-weight-medium: 500;
    --sum-font-weight-semibold: 600;
    --sum-font-weight-bold: 700;

    /* === TYPOGRAPHY - Letter Spacing === */
    --sum-font-letter-spacing-tight: -2%;
    --sum-font-letter-spacing-normal: 0%;
    --sum-font-letter-spacing-wide: 5%;

    /* === TYPOGRAPHY - Line Height === */
    --sum-font-line-height-tightest: 100%;
    --sum-font-line-height-tighter: 110%;
    --sum-font-line-height-tight: 120%;
    --sum-font-line-height-base: 150%;

    /* === TYPOGRAPHY COMPOSITES - Display === */
    --sum-display-large-font-family: Inter, sans-serif;
    --sum-display-large-font-weight: 700;
    --sum-display-large-line-height: 110%;
    --sum-display-large-font-size: 96px;
    --sum-display-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Headline 3XL === */
    --sum-headline-3x-large-font-family: Inter, sans-serif;
    --sum-headline-3x-large-font-weight-light: 400;
    --sum-headline-3x-large-font-weight-regular: 500;
    --sum-headline-3x-large-font-weight-prominent: 600;
    --sum-headline-3x-large-line-height: 110%;
    --sum-headline-3x-large-font-size: 40px;
    --sum-headline-3x-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Headline 2XL === */
    --sum-headline-2x-large-font-family: Inter, sans-serif;
    --sum-headline-2x-large-font-weight-light: 400;
    --sum-headline-2x-large-font-weight-regular: 500;
    --sum-headline-2x-large-font-weight-prominent: 600;
    --sum-headline-2x-large-line-height: 110%;
    --sum-headline-2x-large-font-size: 34px;
    --sum-headline-2x-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Headline XL === */
    --sum-headline-x-large-font-family: Inter, sans-serif;
    --sum-headline-x-large-font-weight-light: 400;
    --sum-headline-x-large-font-weight-regular: 500;
    --sum-headline-x-large-font-weight-prominent: 600;
    --sum-headline-x-large-line-height: 110%;
    --sum-headline-x-large-font-size: 28px;
    --sum-headline-x-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Headline Large === */
    --sum-headline-large-font-family: Inter, sans-serif;
    --sum-headline-large-font-weight-light: 400;
    --sum-headline-large-font-weight-regular: 500;
    --sum-headline-large-font-weight-prominent: 600;
    --sum-headline-large-line-height: 120%;
    --sum-headline-large-font-size: 24px;
    --sum-headline-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Headline Medium === */
    --sum-headline-medium-font-family: Inter, sans-serif;
    --sum-headline-medium-font-weight-light: 400;
    --sum-headline-medium-font-weight-regular: 500;
    --sum-headline-medium-font-weight-prominent: 600;
    --sum-headline-medium-line-height: 120%;
    --sum-headline-medium-font-size: 20px;
    --sum-headline-medium-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Headline Small === */
    --sum-headline-small-font-family: Inter, sans-serif;
    --sum-headline-small-font-weight-light: 400;
    --sum-headline-small-font-weight-regular: 500;
    --sum-headline-small-font-weight-prominent: 600;
    --sum-headline-small-line-height: 120%;
    --sum-headline-small-font-size: 18px;
    --sum-headline-small-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Body XL === */
    --sum-body-x-large-font-family: Inter, sans-serif;
    --sum-body-x-large-font-weight-light: 400;
    --sum-body-x-large-font-weight-regular: 500;
    --sum-body-x-large-font-weight-prominent: 600;
    --sum-body-x-large-line-height: 150%;
    --sum-body-x-large-font-size: 20px;
    --sum-body-x-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Body Large === */
    --sum-body-large-font-family: Inter, sans-serif;
    --sum-body-large-font-weight-light: 400;
    --sum-body-large-font-weight-regular: 500;
    --sum-body-large-font-weight-prominent: 600;
    --sum-body-large-line-height: 150%;
    --sum-body-large-font-size: 16px;
    --sum-body-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Body Medium === */
    --sum-body-medium-font-family: Inter, sans-serif;
    --sum-body-medium-font-weight-light: 400;
    --sum-body-medium-font-weight-regular: 500;
    --sum-body-medium-font-weight-prominent: 600;
    --sum-body-medium-line-height: 150%;
    --sum-body-medium-font-size: 14px;
    --sum-body-medium-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Body Small === */
    --sum-body-small-font-family: Inter, sans-serif;
    --sum-body-small-font-weight-light: 400;
    --sum-body-small-font-weight-regular: 500;
    --sum-body-small-font-weight-prominent: 600;
    --sum-body-small-line-height: 150%;
    --sum-body-small-font-size: 12px;
    --sum-body-small-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Label XL === */
    --sum-label-x-large-font-family: Inter, sans-serif;
    --sum-label-x-large-font-weight-light: 400;
    --sum-label-x-large-font-weight-regular: 500;
    --sum-label-x-large-font-weight-prominent: 600;
    --sum-label-x-large-line-height: 100%;
    --sum-label-x-large-font-size: 18px;
    --sum-label-x-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Label Large === */
    --sum-label-large-font-family: Inter, sans-serif;
    --sum-label-large-font-weight-light: 400;
    --sum-label-large-font-weight-regular: 500;
    --sum-label-large-font-weight-prominent: 600;
    --sum-label-large-line-height: 100%;
    --sum-label-large-font-size: 16px;
    --sum-label-large-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Label Medium === */
    --sum-label-medium-font-family: Inter, sans-serif;
    --sum-label-medium-font-weight-light: 400;
    --sum-label-medium-font-weight-regular: 500;
    --sum-label-medium-font-weight-prominent: 600;
    --sum-label-medium-line-height: 100%;
    --sum-label-medium-font-size: 14px;
    --sum-label-medium-letter-spacing: -2%;

    /* === TYPOGRAPHY COMPOSITES - Label Small === */
    --sum-label-small-font-family: Inter, sans-serif;
    --sum-label-small-font-weight-light: 400;
    --sum-label-small-font-weight-regular: 500;
    --sum-label-small-font-weight-prominent: 600;
    --sum-label-small-line-height: 100%;
    --sum-label-small-font-size: 12px;
    --sum-label-small-letter-spacing: -2%;

    /* === ELEVATION SOLID (0-8) === */
    --sum-elevation-solid-0: #fff;
    --sum-elevation-solid-1: #f5f5f5;
    --sum-elevation-solid-2: #f0f0f0;
    --sum-elevation-solid-3: #e0e0e0;
    --sum-elevation-solid-4: #b8b8b8;
    --sum-elevation-solid-5: #8f8f8f;
    --sum-elevation-solid-6: #666666;
    --sum-elevation-solid-7: #292929;
    --sum-elevation-solid-8: #1a73e8;

    /* === ELEVATION ALPHA (0-8) === */
    --sum-elevation-alpha-0: #00000000;
    --sum-elevation-alpha-1: #0000000a;
    --sum-elevation-alpha-2: #0000000f;
    --sum-elevation-alpha-3: #0000001f;
    --sum-elevation-alpha-4: #00000047;
    --sum-elevation-alpha-5: #00000070;
    --sum-elevation-alpha-6: #00000099;
    --sum-elevation-alpha-7: #000000d6;
    --sum-elevation-alpha-8: #000000;

    /* === ACTIONS - Primary === */
    --sum-action-primary-enabled: #1a73e8;
    --sum-action-primary-hover: #3c88eb;
    --sum-action-primary-active: #6aa4f0;
    --sum-action-primary-disabled: #0000000f;

    /* === ACTIONS - Secondary === */
    --sum-action-secondary-enabled: #f5f5f5;
    --sum-action-secondary-hover: #f0f0f0;
    --sum-action-secondary-active: #e0e0e0;
    --sum-action-secondary-disabled: #0000000f;

    /* === ACTIONS - Tertiary === */
    --sum-action-tertiary-enabled: #e0e0e0;

    /* === ACTIONS - On Dark === */
    --sum-action-on-dark-enabled: #fff;
    --sum-action-on-dark-hover: #f5f5f5;
    --sum-action-on-dark-active: #f0f0f0;
    --sum-action-on-dark-disabled: #b8b8b8;

    /* === ACTIONS - Alpha Secondary === */
    --sum-action-alpha-secondary-enabled: #0000000a;
    --sum-action-alpha-secondary-hover: #0000000f;
    --sum-action-alpha-secondary-active: #0000001f;

    /* === ACTIONS - On Action === */
    --sum-action-on-action-primary: #fff;
    --sum-action-on-action-secondary: #1a73e8;
    --sum-action-on-action-disabled: #00000047;
    --sum-action-on-action-on-dark: #1a73e8;

    /* === ON SURFACE === */
    --sum-on-surface-on-dark: #fff;
    --sum-on-surface-primary: #1a73e8;
    --sum-on-surface-secondary: #666666;
    --sum-on-surface-tertiary: #8f8f8f;

    /* === STATUS === */
    --sum-status-critical: #ea4335;
    --sum-status-success: #34a853;
    --sum-status-warning: #f9ab00;
    --sum-status-info: #4285f4;

    /* === BRAND ACCENT === */
    --sum-brand-accent: #fbbc04;

    /* === COLOR HUES (Complete Palette) === */
    --sum-hue-red: #ea4335;
    --sum-hue-orange: #f9ab00;
    --sum-hue-pink: #ff68b0;
    --sum-hue-purple: #a142f4;
    --sum-hue-green: #34a853;
    --sum-hue-blue: #4285f4;
    --sum-hue-yellow: #fbbc04;

    /* === CHART COLORS (Derived from Hues) === */
    --sum-chart-resolved: #34a853;
    --sum-chart-created: #ea4335;
    --sum-chart-neutral: #1a73e8;
    --sum-chart-secondary: #a142f4;
}

/* === DARK THEME === */
[data-theme="dark"] {
    /* Elevation Solid (Dark) */
    --sum-elevation-solid-0: #1a73e8;
    --sum-elevation-solid-1: #141414;
    --sum-elevation-solid-2: #1f1f1f;
    --sum-elevation-solid-3: #292929;
    --sum-elevation-solid-4: #3d3d3d;
    --sum-elevation-solid-5: #333333;
    --sum-elevation-solid-6: #808080;
    --sum-elevation-solid-7: #b2b2b2;
    --sum-elevation-solid-8: #ffffff;

    /* Elevation Alpha (Dark) */
    --sum-elevation-alpha-0: #ffffff0a;
    --sum-elevation-alpha-1: #ffffff14;
    --sum-elevation-alpha-2: #ffffff1f;
    --sum-elevation-alpha-3: #ffffff29;
    --sum-elevation-alpha-4: #ffffff29;
    --sum-elevation-alpha-5: #ffffff33;
    --sum-elevation-alpha-6: #ffffff80;
    --sum-elevation-alpha-7: #ffffffb3;
    --sum-elevation-alpha-8: #ffffff;

    /* Actions - Primary (Dark) */
    --sum-action-primary-enabled: #ffffff;
    --sum-action-primary-hover: #b2b2b2;
    --sum-action-primary-active: #808080;
    --sum-action-primary-disabled: #ffffff1f;

    /* Actions - Secondary (Dark) */
    --sum-action-secondary-enabled: #1f1f1f;
    --sum-action-secondary-hover: #292929;
    --sum-action-secondary-active: #3d3d3d;
    --sum-action-secondary-disabled: #ffffff1f;

    /* Actions - Tertiary (Dark) */
    --sum-action-tertiary-enabled: #292929;

    /* Actions - Alpha Secondary (Dark) */
    --sum-action-alpha-secondary-enabled: #ffffff1f;
    --sum-action-alpha-secondary-hover: #ffffff29;
    --sum-action-alpha-secondary-active: #ffffff29;

    /* Actions - On Action (Dark) */
    --sum-action-on-action-primary: #141414;
    --sum-action-on-action-secondary: #ffffff;
    --sum-action-on-action-disabled: #ffffff29;

    /* On Surface (Dark) */
    --sum-on-surface-overlay-on-dark: #ffffff;
    --sum-on-surface-primary: #ffffff;
    --sum-on-surface-secondary: #808080;
    --sum-on-surface-tertiary: #333333;
}