/* ===================================================================
   Stripe Design Tokens

   CSS Custom Properties for the 221Buddy Stripe-inspired design system.
   These tokens define all colors, typography, spacing, and visual
   properties used throughout the application.

   Usage: Apply to any container, tokens cascade to all children.
   Dark mode: Add data-theme="dark" attribute to container.
   =================================================================== */

:root,
.stripe-theme {
    /* ===== Light Mode (Default) ===== */

    /* --- Primary Colors --- */
    --stripe-primary: #635BFF;
    --stripe-primary-hover: #5349E6;
    --stripe-primary-active: #4338CA;
    --stripe-primary-light: #F6F6FF;

    /* --- Background Colors --- */
    --stripe-bg-primary: #FFFFFF;
    --stripe-bg-secondary: #F7F9FC;
    --stripe-bg-tertiary: #FAFBFC;
    --stripe-bg-elevated: #FFFFFF;

    /* --- Text Colors --- */
    --stripe-text-primary: #1A1F36;
    --stripe-text-secondary: #6B7C93;
    --stripe-text-tertiary: #8898AA;
    --stripe-text-disabled: #A3ACB9;
    --stripe-text-inverse: #FFFFFF;

    /* --- Border Colors --- */
    --stripe-border-light: #E3E8EE;
    --stripe-border-medium: #D8DEE6;
    --stripe-border-dark: #C1C9D2;
    --stripe-border-focus: #635BFF;

    /* --- Status Colors --- */
    /* Success */
    --stripe-success: #00D924;
    --stripe-success-bg: #D4F5E0;
    --stripe-success-text: #00843D;
    --stripe-success-border: #00D924;

    /* Info */
    --stripe-info: #0066FF;
    --stripe-info-bg: #E0F0FF;
    --stripe-info-text: #0066CC;
    --stripe-info-border: #0066FF;

    /* Warning */
    --stripe-warning: #F59E0B;
    --stripe-warning-bg: #FEF3C7;
    --stripe-warning-text: #92400E;
    --stripe-warning-border: #F59E0B;

    /* Error/Danger */
    --stripe-error: #DC2626;
    --stripe-error-bg: #FEE2E2;
    --stripe-error-text: #991B1B;
    --stripe-error-border: #DC2626;

    /* --- Gradient Colors --- */
    --stripe-gradient-start: #7FE6DE;
    --stripe-gradient-end: #8B8BF6;
    --stripe-gradient-balance: linear-gradient(135deg, var(--stripe-gradient-start) 0%, var(--stripe-gradient-end) 100%);

    /* ===== Typography ===== */

    /* Font Family */
    --stripe-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                          "Helvetica Neue", Ubuntu, sans-serif;
    --stripe-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
                        Consolas, "Liberation Mono", "Courier New", monospace;

    /* Font Sizes */
    --stripe-fs-3xl: 36px;
    --stripe-fs-2xl: 28px;
    --stripe-fs-xl: 20px;
    --stripe-fs-lg: 16px;
    --stripe-fs-base: 14px;
    --stripe-fs-sm: 12px;
    --stripe-fs-xs: 11px;

    /* Font Weights */
    --stripe-fw-normal: 400;
    --stripe-fw-medium: 500;
    --stripe-fw-semibold: 600;
    --stripe-fw-bold: 700;

    /* Line Heights */
    --stripe-lh-tight: 1.2;
    --stripe-lh-snug: 1.3;
    --stripe-lh-normal: 1.5;
    --stripe-lh-relaxed: 1.6;

    /* Letter Spacing */
    --stripe-ls-tight: -0.01em;
    --stripe-ls-normal: 0;
    --stripe-ls-wide: 0.05em;

    /* ===== Spacing (8px Grid) ===== */
    --stripe-space-0: 0;
    --stripe-space-1: 4px;
    --stripe-space-2: 8px;
    --stripe-space-3: 12px;
    --stripe-space-4: 16px;
    --stripe-space-5: 20px;
    --stripe-space-6: 24px;
    --stripe-space-8: 32px;
    --stripe-space-10: 40px;
    --stripe-space-12: 48px;
    --stripe-space-16: 64px;

    /* ===== Border Radius ===== */
    --stripe-radius-none: 0;
    --stripe-radius-sm: 6px;
    --stripe-radius-md: 8px;
    --stripe-radius-lg: 12px;
    --stripe-radius-xl: 16px;
    --stripe-radius-full: 9999px;

    /* ===== Shadows ===== */
    --stripe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --stripe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --stripe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --stripe-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.1);
    --stripe-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);

    /* Focus Ring */
    --stripe-shadow-focus: 0 0 0 3px rgba(99, 91, 255, 0.15);
    --stripe-shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);

    /* ===== Transitions ===== */
    --stripe-transition-fast: 150ms ease;
    --stripe-transition-normal: 200ms ease;
    --stripe-transition-slow: 300ms ease;

    /* Easing Functions */
    --stripe-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --stripe-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --stripe-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Z-Index Scale ===== */
    --stripe-z-dropdown: 1000;
    --stripe-z-sticky: 1020;
    --stripe-z-fixed: 1030;
    --stripe-z-modal-backdrop: 1040;
    --stripe-z-modal: 1050;
    --stripe-z-popover: 1060;
    --stripe-z-tooltip: 1070;

    /* ===== Component-Specific ===== */

    /* Sidebar */
    --stripe-sidebar-width: 220px;
    --stripe-sidebar-bg: var(--stripe-bg-primary);
    --stripe-sidebar-border: var(--stripe-border-light);

    /* Top Bar */
    --stripe-topbar-height: 64px;
    --stripe-topbar-bg: var(--stripe-bg-primary);
    --stripe-topbar-border: var(--stripe-border-light);

    /* Cards */
    --stripe-card-bg: var(--stripe-bg-primary);
    --stripe-card-border: var(--stripe-border-light);
    --stripe-card-shadow: var(--stripe-shadow-sm);
    --stripe-card-padding: var(--stripe-space-6);

    /* Inputs */
    --stripe-input-height: 40px;
    --stripe-input-bg: var(--stripe-bg-primary);
    --stripe-input-border: var(--stripe-border-light);
    --stripe-input-focus-border: var(--stripe-border-focus);

    /* Buttons */
    --stripe-btn-padding-x: 18px;
    --stripe-btn-padding-y: 10px;
    --stripe-btn-font-size: var(--stripe-fs-base);
    --stripe-btn-font-weight: var(--stripe-fw-medium);

    /* Tables */
    --stripe-table-header-bg: var(--stripe-bg-tertiary);
    --stripe-table-row-hover: var(--stripe-bg-tertiary);
    --stripe-table-border: var(--stripe-border-light);
}

/* ===================================================================
   Dark Mode

   Applied when data-theme="dark" is set on an ancestor element.
   All color tokens are overridden for dark backgrounds.
   =================================================================== */

[data-theme="dark"],
[data-theme="dark"] .stripe-theme {
    /* --- Background Colors --- */
    --stripe-bg-primary: #0A0F1E;
    --stripe-bg-secondary: #121929;
    --stripe-bg-tertiary: #1A2332;
    --stripe-bg-elevated: #1E2738;

    /* --- Text Colors --- */
    --stripe-text-primary: #F6F9FC;
    --stripe-text-secondary: #A3ACBA;
    --stripe-text-tertiary: #6B7C93;
    --stripe-text-disabled: #4F5B69;
    --stripe-text-inverse: #1A1F36;

    /* --- Border Colors --- */
    --stripe-border-light: #2E3A4D;
    --stripe-border-medium: #3D4A5C;
    --stripe-border-dark: #4D5A6C;
    --stripe-border-focus: #7B73FF;

    /* --- Primary Colors (Adjusted for Dark) --- */
    --stripe-primary: #7B73FF;
    --stripe-primary-hover: #8B83FF;
    --stripe-primary-active: #9B93FF;
    --stripe-primary-light: #1E1B4D;

    /* --- Status Colors (Adjusted for Dark Contrast) --- */
    /* Success */
    --stripe-success-bg: #0D3320;
    --stripe-success-text: #4ADE80;
    --stripe-success-border: #22C55E;

    /* Info */
    --stripe-info-bg: #0D2847;
    --stripe-info-text: #60A5FA;
    --stripe-info-border: #3B82F6;

    /* Warning */
    --stripe-warning-bg: #3D2607;
    --stripe-warning-text: #FBBF24;
    --stripe-warning-border: #F59E0B;

    /* Error */
    --stripe-error-bg: #3D0D0D;
    --stripe-error-text: #F87171;
    --stripe-error-border: #EF4444;

    /* --- Gradient Colors (Adjusted) --- */
    --stripe-gradient-start: #4FD1C5;
    --stripe-gradient-end: #7C73E6;

    /* --- Shadows (Stronger for Dark Mode) --- */
    --stripe-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --stripe-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --stripe-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
    --stripe-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.4);
    --stripe-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);

    /* Focus Ring (More Visible) */
    --stripe-shadow-focus: 0 0 0 3px rgba(123, 115, 255, 0.25);
    --stripe-shadow-focus-error: 0 0 0 3px rgba(248, 113, 113, 0.25);

    /* --- Component-Specific (Dark) --- */
    --stripe-sidebar-bg: var(--stripe-bg-primary);
    --stripe-topbar-bg: var(--stripe-bg-primary);
    --stripe-card-bg: var(--stripe-bg-secondary);
    --stripe-input-bg: var(--stripe-bg-tertiary);
    --stripe-table-header-bg: var(--stripe-bg-tertiary);
    --stripe-table-row-hover: var(--stripe-bg-elevated);
}

/* ===================================================================
   Utility Classes for Direct Token Access

   These classes allow direct application of design tokens.
   =================================================================== */

/* Background Colors */
.stripe-bg-primary { background-color: var(--stripe-bg-primary); }
.stripe-bg-secondary { background-color: var(--stripe-bg-secondary); }
.stripe-bg-tertiary { background-color: var(--stripe-bg-tertiary); }

/* Text Colors */
.stripe-text-primary { color: var(--stripe-text-primary); }
.stripe-text-secondary { color: var(--stripe-text-secondary); }
.stripe-text-tertiary { color: var(--stripe-text-tertiary); }

/* Border Colors */
.stripe-border-light { border-color: var(--stripe-border-light); }
.stripe-border-medium { border-color: var(--stripe-border-medium); }

/* Spacing Utilities */
.stripe-p-0 { padding: var(--stripe-space-0); }
.stripe-p-1 { padding: var(--stripe-space-1); }
.stripe-p-2 { padding: var(--stripe-space-2); }
.stripe-p-3 { padding: var(--stripe-space-3); }
.stripe-p-4 { padding: var(--stripe-space-4); }
.stripe-p-6 { padding: var(--stripe-space-6); }
.stripe-p-8 { padding: var(--stripe-space-8); }

.stripe-m-0 { margin: var(--stripe-space-0); }
.stripe-m-1 { margin: var(--stripe-space-1); }
.stripe-m-2 { margin: var(--stripe-space-2); }
.stripe-m-3 { margin: var(--stripe-space-3); }
.stripe-m-4 { margin: var(--stripe-space-4); }
.stripe-m-6 { margin: var(--stripe-space-6); }
.stripe-m-8 { margin: var(--stripe-space-8); }

/* Gap Utilities */
.stripe-gap-1 { gap: var(--stripe-space-1); }
.stripe-gap-2 { gap: var(--stripe-space-2); }
.stripe-gap-3 { gap: var(--stripe-space-3); }
.stripe-gap-4 { gap: var(--stripe-space-4); }
.stripe-gap-6 { gap: var(--stripe-space-6); }

/* Border Radius */
.stripe-rounded-sm { border-radius: var(--stripe-radius-sm); }
.stripe-rounded-md { border-radius: var(--stripe-radius-md); }
.stripe-rounded-lg { border-radius: var(--stripe-radius-lg); }
.stripe-rounded-full { border-radius: var(--stripe-radius-full); }

/* Shadows */
.stripe-shadow-sm { box-shadow: var(--stripe-shadow-sm); }
.stripe-shadow-md { box-shadow: var(--stripe-shadow-md); }
.stripe-shadow-lg { box-shadow: var(--stripe-shadow-lg); }