/**
 * Carbon Design System Tokens
 * Extracted from Figma: 12aeUJVo0n2DTKxTn36Yxz
 *
 * Themes: White, Gray 10, Gray 90
 */

:root {
    /* ============================================
       BACKGROUND TOKENS
       ============================================ */

    /* White Theme (Default) */
    --cds-background: #ffffff;
    --cds-background-hover: rgba(141, 141, 141, 0.12);
    --cds-background-active: rgba(141, 141, 141, 0.50);
    --cds-background-selected: rgba(141, 141, 141, 0.20);
    --cds-background-selected-hover: rgba(141, 141, 141, 0.32);
    --cds-background-inverse: #393939;
    --cds-background-inverse-hover: #4c4c4c;
    --cds-background-brand: #0f62fe;

    /* ============================================
       LAYER TOKENS (Container backgrounds)
       ============================================ */
    --cds-layer-01: #f4f4f4;
    --cds-layer-02: #ffffff;
    --cds-layer-03: #f4f4f4;
    --cds-layer-accent-01: #e0e0e0;
    --cds-layer-accent-02: #c6c6c6;
    --cds-layer-accent-active-01: #a8a8a8;
    --cds-layer-hover-01: #e8e8e8;
    --cds-layer-hover-02: #e8e8e8;
    --cds-layer-active-01: #c6c6c6;
    --cds-layer-active-02: #c6c6c6;
    --cds-layer-selected-01: #e0e0e0;
    --cds-layer-selected-02: #e0e0e0;

    /* ============================================
       TEXT TOKENS
       ============================================ */
    --cds-text-primary: #161616;
    --cds-text-secondary: #525252;
    --cds-text-placeholder: #a8a8a8;
    --cds-text-disabled: rgba(22, 22, 22, 0.25);
    --cds-text-on-color: #ffffff;
    --cds-text-on-color-disabled: #8d8d8d;
    --cds-text-inverse: #ffffff;
    --cds-text-error: #da1e28;
    --cds-text-helper: #6f6f6f;

    /* ============================================
       LINK TOKENS
       ============================================ */
    --cds-link-primary: #0f62fe;
    --cds-link-primary-hover: #0043ce;
    --cds-link-secondary: #0043ce;
    --cds-link-inverse: #78a9ff;
    --cds-link-visited: #8a3ffc;

    /* ============================================
       ICON TOKENS
       ============================================ */
    --cds-icon-primary: #161616;
    --cds-icon-secondary: #525252;
    --cds-icon-disabled: rgba(22, 22, 22, 0.25);
    --cds-icon-on-color: #ffffff;
    --cds-icon-on-color-disabled: #8d8d8d;
    --cds-icon-inverse: #ffffff;

    /* ============================================
       BORDER TOKENS
       ============================================ */
    --cds-border-subtle-00: #e0e0e0;
    --cds-border-subtle-01: #c6c6c6;
    --cds-border-strong-01: #8d8d8d;
    --cds-border-inverse: #161616;
    --cds-border-interactive: #0f62fe;
    --cds-border-disabled: rgba(22, 22, 22, 0.25);

    /* ============================================
       SUPPORT TOKENS (Status colors)
       ============================================ */
    --cds-support-error: #da1e28;
    --cds-support-error-inverse: #fa4d56;
    --cds-support-success: #24a148;
    --cds-support-success-inverse: #42be65;
    --cds-support-warning: #f1c21b;
    --cds-support-warning-inverse: #f1c21b;
    --cds-support-info: #0043ce;
    --cds-support-info-inverse: #4589ff;

    /* ============================================
       BUTTON TOKENS
       ============================================ */
    --cds-button-primary: #0f62fe;
    --cds-button-primary-hover: #0043ce;
    --cds-button-primary-active: #002d9c;
    --cds-button-secondary: #393939;
    --cds-button-secondary-hover: #4c4c4c;
    --cds-button-secondary-active: #6f6f6f;
    --cds-button-tertiary: #0f62fe;
    --cds-button-tertiary-hover: #0043ce;
    --cds-button-tertiary-active: #002d9c;
    --cds-button-danger: #da1e28;
    --cds-button-danger-hover: #b81921;
    --cds-button-danger-active: #750e13;
    --cds-button-disabled: #c6c6c6;

    /* ============================================
       FIELD TOKENS (Input fields)
       ============================================ */
    --cds-field-01: #f9f9f9;
    --cds-field-02: #ffffff;
    --cds-field-hover-01: #e8e8e8;
    --cds-field-hover-02: #e8e8e8;

    /* ============================================
       FOCUS TOKENS
       ============================================ */
    --cds-focus: #0f62fe;
    --cds-focus-inset: #ffffff;
    --cds-focus-inverse: #ffffff;

    /* ============================================
       DATA VISUALIZATION TOKENS (from Figma)
       Use for: Charts, Radar, Assessment dimensions
       ============================================ */
    /* Primary sequence (1-1-1 to 1-1-6) */
    --cds-dataviz-1-1-1: #8a3ffc;  /* Purple */
    --cds-dataviz-1-1-2: #1192e8;  /* Cyan */
    --cds-dataviz-1-1-3: #009d9a;  /* Teal */
    --cds-dataviz-1-1-4: #9f1853;  /* Magenta */
    --cds-dataviz-1-1-5: #fa4d56;  /* Red */
    --cds-dataviz-1-1-6: #002d9c;  /* Blue Dark */

    /* Extended palette for more categories */
    --cds-dataviz-1-2-1: #6929c4;  /* Purple Dark */
    --cds-dataviz-1-2-2: #0072c3;  /* Cyan Dark */
    --cds-dataviz-1-2-3: #005d5d;  /* Teal Dark */
    --cds-dataviz-1-2-4: #740937;  /* Magenta Dark */
    --cds-dataviz-1-2-5: #a2191f;  /* Red Dark */
    --cds-dataviz-1-2-6: #001d6c;  /* Blue Darker */

    /* Semantic dataviz colors */
    --cds-dataviz-success: #24a148;
    --cds-dataviz-warning: #f1c21b;
    --cds-dataviz-error: #da1e28;

    /* ============================================
       TAG TOKENS (from Figma Tag Tokens Spec)
       Pattern: background = color-10, text = color-70
       ============================================ */
    /* Blue Tag */
    --cds-tag-background-blue: var(--cds-blue-40);
    --cds-tag-color-blue: var(--cds-blue-70);
    /* Teal Tag */
    --cds-tag-background-teal: var(--cds-teal-40);
    --cds-tag-color-teal: var(--cds-teal-70);
    /* Green Tag */
    --cds-tag-background-green: var(--cds-green-40);
    --cds-tag-color-green: var(--cds-green-70);
    /* Purple Tag */
    --cds-tag-background-purple: var(--cds-purple-40);
    --cds-tag-color-purple: var(--cds-purple-70);
    /* Red Tag */
    --cds-tag-background-red: var(--cds-red-40);
    --cds-tag-color-red: var(--cds-red-70);
    /* Yellow Tag - CRITICAL: Used by DISC "I" (Influence) */
    --cds-tag-background-yellow: var(--cds-yellow-30);
    --cds-tag-color-yellow: var(--cds-yellow-50);
    /* Gray Tag */
    --cds-tag-background-gray: var(--cds-gray-10);
    --cds-tag-color-gray: var(--cds-gray-70);
    /* High-contrast Tag (dark bg, white text) */
    --cds-tag-background-high-contrast: var(--cds-gray-80);
    --cds-tag-color-high-contrast: #ffffff;
    /* Outline Tag (transparent bg, border) */
    --cds-tag-border-outline: var(--cds-gray-50);
    /* Cyan Tag */
    --cds-tag-background-cyan: var(--cds-cyan-40);
    --cds-tag-color-cyan: var(--cds-cyan-70);
    /* Magenta Tag */
    --cds-tag-background-magenta: var(--cds-magenta-40);
    --cds-tag-color-magenta: var(--cds-magenta-70);
    /* Warm Gray Tag */
    --cds-tag-background-warm-gray: var(--cds-warm-gray-10);
    --cds-tag-color-warm-gray: var(--cds-warm-gray-70);
    /* Cool Gray Tag */
    --cds-tag-background-cool-gray: var(--cds-cool-gray-10);
    --cds-tag-color-cool-gray: var(--cds-cool-gray-70);

    /* ============================================
       SHADOW TOKENS (from Figma Effects Spec)
       ============================================ */
    /* Figma: $shadow-menu - Dropdowns, Modals, Tooltips */
    --cds-shadow-menu: 0 2px 6px 0 rgba(0, 0, 0, 0.3);

    /* Card shadows - lighter for hover states */
    --cds-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.1);
    --cds-shadow-card-active: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Subtle shadows for inputs/small elements */
    --cds-shadow-subtle: 0 0 4px rgba(0, 0, 0, 0.25);
    --cds-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3);

    /* ============================================
       INTERACTIVE TOKENS
       ============================================ */
    --cds-interactive: #0f62fe;
    --cds-highlight: #d0e2ff;
    --cds-toggle-off: #8d8d8d;

    /* ============================================
       SKELETON/LOADING
       ============================================ */
    --cds-skeleton-background: #e8e8e8;
    --cds-skeleton-element: #c6c6c6;

    /* ============================================
       CARBON GRAY SCALE
       ============================================ */
    --cds-gray-05: #f9f9f9;  /* Figma Gray 5 - lighter than Gray 10 */
    --cds-gray-10: #f4f4f4;
    --cds-gray-20: #e0e0e0;
    --cds-gray-30: #c6c6c6;
    --cds-gray-40: #a8a8a8;
    --cds-gray-50: #8d8d8d;
    --cds-gray-60: #6f6f6f;
    --cds-gray-70: #525252;
    --cds-gray-80: #393939;
    --cds-gray-90: #262626;
    --cds-gray-100: #161616;

    /* ============================================
       CARBON BLUE SCALE (Primary)
       ============================================ */
    --cds-blue-10: #edf5ff;
    --cds-blue-20: #d0e2ff;
    --cds-blue-30: #a6c8ff;
    --cds-blue-40: #78a9ff;
    --cds-blue-50: #4589ff;
    --cds-blue-60: #0f62fe;
    --cds-blue-70: #0043ce;
    --cds-blue-80: #002d9c;
    --cds-blue-90: #001d6c;
    --cds-blue-100: #001141;

    /* ============================================
       CARBON GREEN SCALE (Success)
       ============================================ */
    --cds-green-10: #defbe6;
    --cds-green-20: #a7f0ba;
    --cds-green-30: #6fdc8c;
    --cds-green-40: #42be65;
    --cds-green-50: #24a148;
    --cds-green-60: #198038;
    --cds-green-70: #0e6027;
    --cds-green-80: #044317;
    --cds-green-90: #022d0d;
    --cds-green-100: #071908;

    /* ============================================
       CARBON RED SCALE (Error/Danger)
       ============================================ */
    --cds-red-10: #fff1f1;
    --cds-red-20: #ffd7d9;
    --cds-red-30: #ffb3b8;
    --cds-red-40: #ff8389;
    --cds-red-50: #fa4d56;
    --cds-red-60: #da1e28;
    --cds-red-70: #a2191f;
    --cds-red-80: #750e13;
    --cds-red-90: #520408;
    --cds-red-100: #2d0709;

    /* ============================================
       CARBON PURPLE SCALE (Accent)
       ============================================ */
    --cds-purple-10: #f6f2ff;
    --cds-purple-20: #e8daff;
    --cds-purple-30: #d4bbff;
    --cds-purple-40: #be95ff;
    --cds-purple-50: #a56eff;
    --cds-purple-60: #8a3ffc;
    --cds-purple-70: #6929c4;
    --cds-purple-80: #491d8b;
    --cds-purple-90: #31135e;
    --cds-purple-100: #1c0f30;

    /* ============================================
       CARBON YELLOW SCALE
       ============================================ */
    --cds-yellow-10: #fcf4d6;
    --cds-yellow-20: #fddc69;
    --cds-yellow-30: #f1c21b;
    --cds-yellow-40: #d2a106;
    --cds-yellow-50: #b28600;
    --cds-yellow-60: #8e6a00;
    --cds-yellow-70: #684e00;
    --cds-yellow-80: #483700;
    --cds-yellow-90: #302400;
    --cds-yellow-100: #1c1500;

    /* ============================================
       CARBON TEAL SCALE
       ============================================ */
    --cds-teal-10: #d9fbfb;
    --cds-teal-20: #9ef0f0;
    --cds-teal-30: #3ddbd9;
    --cds-teal-40: #08bdba;
    --cds-teal-50: #009d9a;
    --cds-teal-60: #007d79;
    --cds-teal-70: #005d5d;
    --cds-teal-80: #004144;
    --cds-teal-90: #022b30;
    --cds-teal-100: #081a1c;

    /* ============================================
       CARBON CYAN SCALE
       ============================================ */
    --cds-cyan-10: #e5f6ff;
    --cds-cyan-20: #bae6ff;
    --cds-cyan-30: #82cfff;
    --cds-cyan-40: #33b1ff;
    --cds-cyan-50: #1192e8;
    --cds-cyan-60: #0072c3;
    --cds-cyan-70: #00539a;
    --cds-cyan-80: #003a6d;
    --cds-cyan-90: #012749;
    --cds-cyan-100: #061727;

    /* ============================================
       CARBON MAGENTA SCALE
       ============================================ */
    --cds-magenta-10: #fff0f7;
    --cds-magenta-20: #ffd6e8;
    --cds-magenta-30: #ffafd2;
    --cds-magenta-40: #ff7eb6;
    --cds-magenta-50: #ee5396;
    --cds-magenta-60: #d02670;
    --cds-magenta-70: #9f1853;
    --cds-magenta-80: #740937;
    --cds-magenta-90: #510224;
    --cds-magenta-100: #2a0a18;

    /* ============================================
       CARBON WARM GRAY SCALE
       ============================================ */
    --cds-warm-gray-10: #f7f3f2;
    --cds-warm-gray-20: #e5e0df;
    --cds-warm-gray-30: #cac5c4;
    --cds-warm-gray-40: #ada8a8;
    --cds-warm-gray-50: #8f8b8b;
    --cds-warm-gray-60: #726e6e;
    --cds-warm-gray-70: #565151;
    --cds-warm-gray-80: #3c3838;
    --cds-warm-gray-90: #272525;
    --cds-warm-gray-100: #171414;

    /* ============================================
       CARBON COOL GRAY SCALE
       ============================================ */
    --cds-cool-gray-10: #f2f4f8;
    --cds-cool-gray-20: #dde1e6;
    --cds-cool-gray-30: #c1c7cd;
    --cds-cool-gray-40: #a2a9b0;
    --cds-cool-gray-50: #878d96;
    --cds-cool-gray-55: #6F6F6F;
    --cds-cool-gray-60: #697077;
    --cds-cool-gray-70: #4d5358;
    --cds-cool-gray-80: #343a3f;
    --cds-cool-gray-90: #21272a;
    --cds-cool-gray-100: #121619;

    /* ============================================
       ELYSIUM CUSTOM: Menu/Navigation
       (from Dash-App)
       ============================================ */
    --menu-bg: #002129;
    --menu-active-bg: #be95ff;
    --profile-bg: #8a3ffc;
    --menu-text: #ffffff;
    --menu-text-muted: #a8a8a8;
    --menu-border-color: #8d8d8d;

    /* ============================================
       SPACING (Carbon 2x Grid)
       ============================================ */
    --cds-spacing-01: 0.125rem;  /* 2px */
    --cds-spacing-02: 0.25rem;   /* 4px */
    --cds-spacing-03: 0.5rem;    /* 8px */
    --cds-spacing-04: 0.75rem;   /* 12px */
    --cds-spacing-05: 1rem;      /* 16px */
    --cds-spacing-06: 1.5rem;    /* 24px */
    --cds-spacing-07: 2rem;      /* 32px */
    --cds-spacing-08: 2.5rem;    /* 40px */
    --cds-spacing-09: 3rem;      /* 48px */
    --cds-spacing-10: 4rem;      /* 64px */
    --cds-spacing-11: 5rem;      /* 80px */
    --cds-spacing-12: 6rem;      /* 96px */
    --cds-spacing-13: 10rem;     /* 160px */

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --cds-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cds-font-family-mono: 'IBM Plex Mono', monospace;

    /* Font sizes */
    --cds-label-01: 0.75rem;     /* 12px */
    --cds-helper-text-01: 0.75rem;
    --cds-body-short-01: 0.875rem; /* 14px */
    --cds-body-long-01: 0.875rem;
    --cds-body-short-02: 1rem;    /* 16px */
    --cds-body-long-02: 1rem;

    /* Line heights (from elysium-gui) */
    --cds-line-height-body: 18px;
    --cds-line-height-heading: 64px;

    /* Letter spacing */
    --cds-letter-spacing: 0.16px;
    --cds-heading-01: 0.875rem;
    --cds-heading-02: 1rem;
    --cds-heading-03: 1.25rem;   /* 20px */
    --cds-heading-04: 1.75rem;   /* 28px */
    --cds-heading-05: 2rem;      /* 32px */
    --cds-heading-06: 2.625rem;  /* 42px */
    --cds-heading-07: 3.375rem;  /* 54px */

    /* ============================================
       EXTENDED COLOR TOKENS
       ============================================ */
    --cds-nav-bg: #163a43;              /* Course Side-Nav background (lighter teal, same family as --menu-bg #002129) */
    --cds-orange-40: #ff832b;            /* Carbon orange-40 for caution indicators */

    /* ============================================
       LAYOUT
       ============================================ */
    --sidebar-width: 300px;
    --sidebar-collapsed: 105px;
    --header-height: 48px;
}

/* ============================================
   DARK THEME (Gray 90)
   ============================================ */
[data-theme="dark"],
.cds--g90 {
    --cds-background: #262626;
    --cds-background-hover: rgba(141, 141, 141, 0.16);
    --cds-background-active: rgba(141, 141, 141, 0.40);
    --cds-background-selected: rgba(141, 141, 141, 0.24);
    --cds-background-inverse: #f4f4f4;

    --cds-layer-01: #393939;
    --cds-layer-02: #525252;
    --cds-layer-03: #6f6f6f;

    --cds-text-primary: #f4f4f4;
    --cds-text-secondary: #c6c6c6;
    --cds-text-inverse: #161616;

    --cds-icon-primary: #f4f4f4;
    --cds-icon-secondary: #c6c6c6;
    --cds-icon-inverse: #161616;

    --cds-border-subtle-00: #525252;
    --cds-border-subtle-01: #6f6f6f;
    --cds-border-strong-01: #8d8d8d;
    --cds-border-inverse: #f4f4f4;

    --cds-link-primary: #78a9ff;
    --cds-link-primary-hover: #a6c8ff;

    --cds-field-01: #393939;
    --cds-field-02: #525252;
}

/* ============================================
   GRAY 10 THEME
   ============================================ */
.cds--g10 {
    --cds-background: #f4f4f4;
    --cds-layer-01: #ffffff;
    --cds-layer-02: #f4f4f4;
    --cds-field-01: #ffffff;
    --cds-field-02: #f4f4f4;
}