/**
 * Tajmad 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 === */
    --tj-border-radius-xs: 8px;
    --tj-border-radius-sm: 12px;
    --tj-border-radius-md: 16px;
    --tj-border-radius-lg: 20px;
    --tj-border-radius-xl: 28px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* === ACTIONS - Primary === */
    --tj-action-primary-enabled: #2C5BAA;
    --tj-action-primary-hover: #4b73b6;
    --tj-action-primary-active: #7594c7;
    --tj-action-primary-disabled: #0000000f;

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

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

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

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

    /* === ACTIONS - On Action === */
    --tj-action-on-action-primary: #fff;
    --tj-action-on-action-secondary: #2C5BAA;
    --tj-action-on-action-disabled: #00000047;
    --tj-action-on-action-on-dark: #2C5BAA;

    /* === ON SURFACE === */
    --tj-on-surface-on-dark: #fff;
    --tj-on-surface-primary: #2C5BAA;
    --tj-on-surface-secondary: #666666;
    --tj-on-surface-tertiary: #8f8f8f;

    /* === STATUS === */
    --tj-status-critical: #DC3545;
    --tj-status-success: #198754;
    --tj-status-warning: #FFC107;
    --tj-status-info: #0DCAF0;

    /* === BRAND ACCENT === */
    --tj-brand-accent: #ffef62;

    /* === COLOR HUES (Complete Palette) === */
    --tj-hue-red: #ff0000;
    --tj-hue-orange: #ff9e9e;
    --tj-hue-pink: #ff68b0;
    --tj-hue-purple: #aaa1f1;
    --tj-hue-green: #7ad085;
    --tj-hue-blue: #638eff;
    --tj-hue-yellow: #ffef62;

    /* === CHART COLORS (Distinct Professional Palette) === */
    /* Each color is clearly distinguishable for accessibility */

    /* 1: Brand Blue - primary data */
    --tj-chart-1: #2C5BAA;
    --tj-chart-1-light: rgba(44, 91, 170, 0.2);

    /* 2: Teal - secondary data */
    --tj-chart-2: #0d9488;
    --tj-chart-2-light: rgba(13, 148, 136, 0.2);

    /* 3: Orange - accent/highlight */
    --tj-chart-3: #ea580c;
    --tj-chart-3-light: rgba(234, 88, 12, 0.2);

    /* 4: Purple - additional series */
    --tj-chart-4: #7c3aed;
    --tj-chart-4-light: rgba(124, 58, 237, 0.2);

    /* 5: Rose - additional series */
    --tj-chart-5: #e11d48;
    --tj-chart-5-light: rgba(225, 29, 72, 0.2);

    /* 6: Amber - additional series */
    --tj-chart-6: #d97706;
    --tj-chart-6-light: rgba(217, 119, 6, 0.2);

    /* 7: Emerald - additional series */
    --tj-chart-7: #059669;
    --tj-chart-7-light: rgba(5, 150, 105, 0.2);

    /* 8: Slate - neutral/baseline */
    --tj-chart-8: #64748b;
    --tj-chart-8-light: rgba(100, 116, 139, 0.2);

    /* Accent for special highlights */
    --tj-chart-accent: #f59e0b;
    --tj-chart-accent-light: rgba(245, 158, 11, 0.2);
}

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

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

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

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

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

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

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

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