/* ================================================================
   Untitled UI Design Tokens
   Shared design system for all pipelet-apps
   Source: Untitled UI PRO Variables (Figma)
   ================================================================ */

:root {
    /* ============================================================
       TYPOGRAPHY
       ============================================================ */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-family-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;

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

    /* Font Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --display-xs: 24px;
    --display-sm: 30px;
    --display-md: 36px;
    --display-lg: 48px;
    --display-xl: 60px;
    --display-2xl: 72px;

    /* Line Heights */
    --leading-xs: 18px;
    --leading-sm: 20px;
    --leading-md: 24px;
    --leading-lg: 28px;
    --leading-xl: 30px;
    --leading-display-xs: 32px;
    --leading-display-sm: 38px;
    --leading-display-md: 44px;
    --leading-display-lg: 60px;
    --leading-display-xl: 72px;
    --leading-display-2xl: 90px;

    /* ============================================================
       SPACING
       ============================================================ */
    --spacing-none: 0px;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    --spacing-9xl: 96px;
    --spacing-10xl: 128px;
    --spacing-11xl: 160px;

    /* ============================================================
       BORDER RADIUS
       ============================================================ */
    --radius-none: 0px;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-full: 9999px;

    /* ============================================================
       SHADOWS
       ============================================================ */
    --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.10);
    --shadow-md: 0px 2px 4px rgba(16, 24, 40, 0.06), 0px 4px 8px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0px 4px 6px rgba(16, 24, 40, 0.03), 0px 12px 16px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0px 8px 8px rgba(16, 24, 40, 0.03), 0px 20px 24px rgba(16, 24, 40, 0.08);
    --shadow-2xl: 0px 24px 48px rgba(16, 24, 40, 0.18);
    --shadow-3xl: 0px 32px 64px rgba(16, 24, 40, 0.24);

    /* Ring / Focus */
    --ring-brand: 0px 0px 0px 4px rgba(158, 119, 237, 0.24);
    --ring-gray: 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
    --ring-error: 0px 0px 0px 4px rgba(240, 68, 56, 0.24);

    /* ============================================================
       COLOR PRIMITIVES - Gray (Light Mode)
       ============================================================ */
    --gray-25: #FDFDFD;
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #E9EAEB;
    --gray-300: #D5D7DA;
    --gray-400: #A4A7AE;
    --gray-500: #717680;
    --gray-600: #535862;
    --gray-700: #414651;
    --gray-800: #252B37;
    --gray-900: #181D27;
    --gray-950: #0A0D12;

    /* Gray (Dark Mode) */
    --gray-dark-25: #FAFAFA;
    --gray-dark-50: #F5F5F6;
    --gray-dark-100: #F0F1F1;
    --gray-dark-200: #ECECED;
    --gray-dark-300: #CECFD2;
    --gray-dark-400: #94969C;
    --gray-dark-500: #85888E;
    --gray-dark-600: #61646C;
    --gray-dark-700: #333741;
    --gray-dark-800: #1F242F;
    --gray-dark-900: #161B26;
    --gray-dark-950: #0C0E12;

    /* ============================================================
       COLOR PRIMITIVES - Brand (Purple)
       ============================================================ */
    --brand-25: #FCFAFF;
    --brand-50: #F9F5FF;
    --brand-100: #F4EBFF;
    --brand-200: #E9D7FE;
    --brand-300: #D6BBFB;
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9;
    --brand-700: #6941C6;
    --brand-800: #53389E;
    --brand-900: #42307D;
    --brand-950: #2C1C5F;

    /* ============================================================
       COLOR PRIMITIVES - Error (Red)
       ============================================================ */
    --error-25: #FFFBFA;
    --error-50: #FEF3F2;
    --error-100: #FEE4E2;
    --error-200: #FECDCA;
    --error-300: #FDA29B;
    --error-400: #F97066;
    --error-500: #F04438;
    --error-600: #D92D20;
    --error-700: #B42318;
    --error-800: #912018;
    --error-900: #7A271A;
    --error-950: #55160C;

    /* ============================================================
       COLOR PRIMITIVES - Warning (Orange)
       ============================================================ */
    --warning-25: #FFFCF5;
    --warning-50: #FFFAEB;
    --warning-100: #FEF0C7;
    --warning-200: #FEDF89;
    --warning-300: #FEC84B;
    --warning-400: #FDB022;
    --warning-500: #F79009;
    --warning-600: #DC6803;
    --warning-700: #B54708;
    --warning-800: #93370D;
    --warning-900: #7A2E0E;
    --warning-950: #4E1D09;

    /* ============================================================
       COLOR PRIMITIVES - Success (Green)
       ============================================================ */
    --success-25: #F6FEF9;
    --success-50: #ECFDF3;
    --success-100: #D1FADF;
    --success-200: #A6F4C5;
    --success-300: #6CE9A6;
    --success-400: #32D583;
    --success-500: #12B76A;
    --success-600: #039855;
    --success-700: #027A48;
    --success-800: #05603A;
    --success-900: #054F31;
    --success-950: #053321;

    /* ============================================================
       SEMANTIC COLOR TOKENS (Light Mode)
       Maps primitives to functional roles
       ============================================================ */

    /* Text */
    --color-text-primary: var(--gray-900);
    --color-text-secondary: var(--gray-600);
    --color-text-tertiary: var(--gray-500);
    --color-text-quaternary: var(--gray-400);
    --color-text-white: #FFFFFF;
    --color-text-disabled: var(--gray-400);
    --color-text-placeholder: var(--gray-400);
    --color-text-brand-primary: var(--brand-600);
    --color-text-brand-secondary: var(--brand-700);
    --color-text-error: var(--error-600);
    --color-text-warning: var(--warning-600);
    --color-text-success: var(--success-600);

    /* Backgrounds */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: var(--gray-50);
    --color-bg-tertiary: var(--gray-100);
    --color-bg-quaternary: var(--gray-200);
    --color-bg-active: var(--gray-50);
    --color-bg-disabled: var(--gray-100);
    --color-bg-overlay: rgba(16, 24, 40, 0.70);
    --color-bg-brand-primary: var(--brand-600);
    --color-bg-brand-secondary: var(--brand-500);
    --color-bg-brand-subtle: var(--brand-25);
    --color-bg-error-primary: var(--error-600);
    --color-bg-error-secondary: var(--error-500);
    --color-bg-error-subtle: var(--error-25);
    --color-bg-warning-primary: var(--warning-600);
    --color-bg-warning-secondary: var(--warning-500);
    --color-bg-warning-subtle: var(--warning-25);
    --color-bg-success-primary: var(--success-600);
    --color-bg-success-secondary: var(--success-500);
    --color-bg-success-subtle: var(--success-25);

    /* Borders */
    --color-border-primary: var(--gray-300);
    --color-border-secondary: var(--gray-200);
    --color-border-tertiary: var(--gray-100);
    --color-border-disabled: var(--gray-300);
    --color-border-brand: var(--brand-300);
    --color-border-brand-solid: var(--brand-600);
    --color-border-error: var(--error-300);
    --color-border-error-solid: var(--error-600);

    /* Foreground (Icons) */
    --color-fg-primary: var(--gray-900);
    --color-fg-secondary: var(--gray-700);
    --color-fg-tertiary: var(--gray-600);
    --color-fg-quaternary: var(--gray-500);
    --color-fg-quinary: var(--gray-400);
    --color-fg-white: #FFFFFF;
    --color-fg-disabled: var(--gray-400);
    --color-fg-brand-primary: var(--brand-600);
    --color-fg-brand-secondary: var(--brand-500);
    --color-fg-error-primary: var(--error-600);
    --color-fg-error-secondary: var(--error-500);
    --color-fg-warning-primary: var(--warning-600);
    --color-fg-warning-secondary: var(--warning-500);
    --color-fg-success-primary: var(--success-600);
    --color-fg-success-secondary: var(--success-500);

    /* ============================================================
       COMPONENT TOKENS
       Frequently used component-level aliases
       ============================================================ */

    /* Buttons - Primary */
    --button-primary-bg: var(--brand-600);
    --button-primary-bg-hover: var(--brand-700);
    --button-primary-fg: #FFFFFF;
    --button-primary-border: var(--brand-600);

    /* Buttons - Secondary Gray */
    --button-secondary-bg: #FFFFFF;
    --button-secondary-bg-hover: var(--gray-50);
    --button-secondary-fg: var(--gray-700);
    --button-secondary-border: var(--gray-300);

    /* Buttons - Secondary Color */
    --button-secondary-color-bg: #FFFFFF;
    --button-secondary-color-bg-hover: var(--brand-50);
    --button-secondary-color-fg: var(--brand-700);
    --button-secondary-color-border: var(--brand-300);

    /* Buttons - Tertiary */
    --button-tertiary-bg: transparent;
    --button-tertiary-bg-hover: var(--gray-50);
    --button-tertiary-fg: var(--gray-600);

    /* Buttons - Destructive */
    --button-error-bg: var(--error-600);
    --button-error-bg-hover: var(--error-700);
    --button-error-fg: #FFFFFF;
    --button-error-border: var(--error-600);

    /* Input */
    --input-bg: #FFFFFF;
    --input-border: var(--gray-300);
    --input-border-hover: var(--gray-400);
    --input-border-focus: var(--brand-300);
    --input-ring-focus: var(--ring-brand);
    --input-text: var(--gray-900);
    --input-placeholder: var(--gray-500);
    --input-disabled-bg: var(--gray-50);
    --input-disabled-border: var(--gray-300);

    /* Badge / Tag */
    --badge-brand-bg: var(--brand-50);
    --badge-brand-fg: var(--brand-700);
    --badge-brand-border: var(--brand-200);
    --badge-gray-bg: var(--gray-50);
    --badge-gray-fg: var(--gray-700);
    --badge-gray-border: var(--gray-200);
    --badge-error-bg: var(--error-50);
    --badge-error-fg: var(--error-700);
    --badge-error-border: var(--error-200);
    --badge-warning-bg: var(--warning-50);
    --badge-warning-fg: var(--warning-700);
    --badge-warning-border: var(--warning-200);
    --badge-success-bg: var(--success-50);
    --badge-success-fg: var(--success-700);
    --badge-success-border: var(--success-200);

    /* Toggle */
    --toggle-bg-off: var(--gray-100);
    --toggle-bg-on: var(--brand-600);
    --toggle-knob: #FFFFFF;

    /* Avatar / Indicator */
    --indicator-online: var(--success-500);
    --indicator-offline: var(--gray-300);
}

/* ================================================================
   DARK MODE OVERRIDES
   Activated via [data-theme="dark"] on <html>
   Uses gray-dark primitives + adjusted semantic tokens
   ================================================================ */
[data-theme="dark"] {
    /* Shadows — darker, more opaque for dark backgrounds */
    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.16);
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.20), 0px 1px 3px rgba(0, 0, 0, 0.24);
    --shadow-md: 0px 2px 4px rgba(0, 0, 0, 0.20), 0px 4px 8px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0px 4px 6px rgba(0, 0, 0, 0.10), 0px 12px 16px rgba(0, 0, 0, 0.20);
    --shadow-xl: 0px 8px 8px rgba(0, 0, 0, 0.10), 0px 20px 24px rgba(0, 0, 0, 0.20);
    --shadow-2xl: 0px 24px 48px rgba(0, 0, 0, 0.36);
    --shadow-3xl: 0px 32px 64px rgba(0, 0, 0, 0.48);

    /* Ring / Focus — slightly brighter in dark */
    --ring-brand: 0px 0px 0px 4px rgba(158, 119, 237, 0.30);
    --ring-gray: 0px 0px 0px 4px rgba(152, 162, 179, 0.20);
    --ring-error: 0px 0px 0px 4px rgba(240, 68, 56, 0.30);

    /* Semantic: Text */
    --color-text-primary: var(--gray-dark-50);
    --color-text-secondary: var(--gray-dark-300);
    --color-text-tertiary: var(--gray-dark-400);
    --color-text-quaternary: var(--gray-dark-500);
    --color-text-disabled: var(--gray-dark-600);
    --color-text-placeholder: var(--gray-dark-500);
    --color-text-brand-primary: var(--brand-400);
    --color-text-brand-secondary: var(--brand-300);
    --color-text-error: var(--error-400);
    --color-text-warning: var(--warning-400);
    --color-text-success: var(--success-400);

    /* Semantic: Backgrounds */
    --color-bg-primary: var(--gray-dark-950);
    --color-bg-secondary: var(--gray-dark-900);
    --color-bg-tertiary: var(--gray-dark-800);
    --color-bg-quaternary: var(--gray-dark-700);
    --color-bg-active: var(--gray-dark-800);
    --color-bg-disabled: var(--gray-dark-800);
    --color-bg-overlay: rgba(0, 0, 0, 0.70);
    --color-bg-brand-primary: var(--brand-600);
    --color-bg-brand-secondary: var(--brand-500);
    --color-bg-brand-subtle: rgba(127, 86, 217, 0.12);
    --color-bg-error-primary: var(--error-600);
    --color-bg-error-secondary: var(--error-500);
    --color-bg-error-subtle: rgba(217, 45, 32, 0.12);
    --color-bg-warning-primary: var(--warning-600);
    --color-bg-warning-secondary: var(--warning-500);
    --color-bg-warning-subtle: rgba(220, 104, 3, 0.12);
    --color-bg-success-primary: var(--success-600);
    --color-bg-success-secondary: var(--success-500);
    --color-bg-success-subtle: rgba(3, 152, 85, 0.12);

    /* Semantic: Borders */
    --color-border-primary: var(--gray-dark-700);
    --color-border-secondary: var(--gray-dark-700);
    --color-border-tertiary: var(--gray-dark-800);
    --color-border-disabled: var(--gray-dark-700);
    --color-border-brand: rgba(127, 86, 217, 0.40);
    --color-border-brand-solid: var(--brand-500);
    --color-border-error: rgba(217, 45, 32, 0.40);
    --color-border-error-solid: var(--error-500);

    /* Semantic: Foreground (Icons) */
    --color-fg-primary: var(--gray-dark-25);
    --color-fg-secondary: var(--gray-dark-200);
    --color-fg-tertiary: var(--gray-dark-300);
    --color-fg-quaternary: var(--gray-dark-400);
    --color-fg-quinary: var(--gray-dark-500);
    --color-fg-disabled: var(--gray-dark-600);
    --color-fg-brand-primary: var(--brand-400);
    --color-fg-brand-secondary: var(--brand-300);
    --color-fg-error-primary: var(--error-400);
    --color-fg-error-secondary: var(--error-300);
    --color-fg-warning-primary: var(--warning-400);
    --color-fg-warning-secondary: var(--warning-300);
    --color-fg-success-primary: var(--success-400);
    --color-fg-success-secondary: var(--success-300);

    /* Component: Buttons - Primary */
    --button-primary-bg: var(--brand-600);
    --button-primary-bg-hover: var(--brand-500);
    --button-primary-fg: #FFFFFF;
    --button-primary-border: var(--brand-600);

    /* Component: Buttons - Secondary Gray */
    --button-secondary-bg: var(--gray-dark-800);
    --button-secondary-bg-hover: var(--gray-dark-700);
    --button-secondary-fg: var(--gray-dark-200);
    --button-secondary-border: var(--gray-dark-700);

    /* Component: Buttons - Secondary Color */
    --button-secondary-color-bg: var(--gray-dark-800);
    --button-secondary-color-bg-hover: rgba(127, 86, 217, 0.15);
    --button-secondary-color-fg: var(--brand-300);
    --button-secondary-color-border: rgba(127, 86, 217, 0.40);

    /* Component: Buttons - Tertiary */
    --button-tertiary-bg: transparent;
    --button-tertiary-bg-hover: var(--gray-dark-800);
    --button-tertiary-fg: var(--gray-dark-300);

    /* Component: Input */
    --input-bg: var(--gray-dark-900);
    --input-border: var(--gray-dark-700);
    --input-border-hover: var(--gray-dark-600);
    --input-border-focus: var(--brand-400);
    --input-text: var(--gray-dark-50);
    --input-placeholder: var(--gray-dark-500);
    --input-disabled-bg: var(--gray-dark-800);
    --input-disabled-border: var(--gray-dark-700);

    /* Component: Badge */
    --badge-brand-bg: rgba(127, 86, 217, 0.15);
    --badge-brand-fg: var(--brand-300);
    --badge-brand-border: rgba(127, 86, 217, 0.30);
    --badge-gray-bg: var(--gray-dark-800);
    --badge-gray-fg: var(--gray-dark-300);
    --badge-gray-border: var(--gray-dark-700);
    --badge-error-bg: rgba(217, 45, 32, 0.15);
    --badge-error-fg: var(--error-300);
    --badge-error-border: rgba(217, 45, 32, 0.30);
    --badge-warning-bg: rgba(220, 104, 3, 0.15);
    --badge-warning-fg: var(--warning-300);
    --badge-warning-border: rgba(220, 104, 3, 0.30);
    --badge-success-bg: rgba(3, 152, 85, 0.15);
    --badge-success-fg: var(--success-300);
    --badge-success-border: rgba(3, 152, 85, 0.30);

    /* Component: Toggle */
    --toggle-bg-off: var(--gray-dark-700);
    --toggle-bg-on: var(--brand-600);
    --toggle-knob: #FFFFFF;

    /* Component: Indicator */
    --indicator-online: var(--success-400);
    --indicator-offline: var(--gray-dark-600);
}