/**
 * PennyBot Design Tokens v1.0.0
 * Generated: 2025-10-08
 *
 * Professional + Friendly Fintech Palette
 * Deep Blue (trust) + Sky Blue (friendly) + Mint Green (positive) + Soft Orange (highlights)
 */

:root {
  /* ============================================
     BRAND COLORS
     ============================================ */

  /* Primary Colors */
  --color-brand-primary: #2E5EAA;        /* Deep Blue — trust/professional */
  --color-brand-secondary: #5DA9E9;      /* Sky Blue — friendly/airy accent */
  --color-brand-accent: #7FE1B0;         /* Mint Green — positive/success */
  --color-brand-highlight: #F7A86E;      /* Soft Orange — notices/highlights */
  --color-brand-neutral-light: #F5F6F7;  /* Warm Gray — backgrounds */
  --color-brand-neutral-dark: #33373B;   /* Charcoal — text/contrast */

  /* ============================================
     SEMANTIC COLORS
     ============================================ */

  /* Text Colors */
  --color-text-default: var(--color-brand-neutral-dark);
  --color-text-muted: #5A6268;
  --color-text-inverse: #FFFFFF;

  /* Background Colors */
  --color-bg-base: #FFFFFF;
  --color-bg-subtle: var(--color-brand-neutral-light);
  --color-bg-elevated: #FFFFFF;
  --color-bg-muted: #E5E7EB;              /* Muted gray background */

  /* Border Colors */
  --color-border-default: #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* State Colors */
  --color-positive: var(--color-brand-accent);
  --color-positive-strong: #059669;       /* Dark green for text on light bg */
  --color-negative: #E57373;              /* Coral Red — friendly negative */
  --color-negative-strong: #D64545;       /* Muted Crimson — destructive */
  --color-negative-light: #FECACA;        /* Light red for backgrounds */
  --color-warning: var(--color-brand-highlight);
  --color-warning-strong: #D97706;        /* Dark amber for text */
  --color-brand-highlight-strong: #EA580C; /* Dark orange */
  --color-brand-primary-hover: #21497F;   /* Darker primary for hovers */

  /* Accent Colors */
  --color-ai-accent: #8b5cf6;            /* AI/ML feature badges & buttons */
  --color-ai-accent-strong: #7c3aed;     /* AI accent hover */
  --color-info: #3b82f6;                 /* Info cards & callouts */
  --color-info-strong: #1e40af;          /* Info text on light bg */
  --color-info-bg: #f0f9ff;             /* Info background tint */
  --color-positive-bg: #f0fdf4;         /* Positive/success background tint */
  --color-positive-hover: #047857;      /* Positive hover state */
  --color-warning-bg: #fefce8;          /* Warning background tint */
  --color-negative-bg: #fee2e2;         /* Negative/error background tint */
  --color-negative-hover: #b91c1c;      /* Negative hover state */

  /* Link Colors */
  --color-link-default: var(--color-brand-primary);
  --color-link-hover: #21497F;

  /* ============================================
     TYPOGRAPHY
     ============================================ */

  /* Font Families */
  --font-primary: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  --font-accent: Rubik, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

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

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.7;

  /* ============================================
     SPACING
     ============================================ */

  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ============================================
     BORDER RADIUS
     ============================================ */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --radius-full: 9999px;                  /* Alias for pill */

  /* ============================================
     SHADOWS
     ============================================ */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ============================================
     COMPONENT TOKENS
     ============================================ */

  /* Buttons */
  --button-primary-bg: var(--color-brand-primary);
  --button-primary-text: var(--color-text-inverse);
  --button-primary-hover-bg: var(--color-link-hover);
  --button-primary-radius: var(--radius-md);
  --button-primary-shadow: var(--shadow-sm);

  --button-secondary-bg: var(--color-brand-accent);
  --button-secondary-text: var(--color-brand-neutral-dark);
  --button-secondary-hover-bg: #6FD9A5;

  --button-destructive-bg: var(--color-negative-strong);
  --button-destructive-text: var(--color-text-inverse);
  --button-destructive-hover-bg: #B93C3C;

  /* Cards */
  --card-bg: var(--color-bg-elevated);
  --card-border: var(--color-border-default);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);

  /* Badges */
  --badge-positive-bg: rgba(127, 225, 176, 0.3);  /* Mint green tint */
  --badge-negative-bg: rgba(229, 115, 115, 0.3);  /* Coral red tint */
  --badge-warning-bg: rgba(247, 168, 110, 0.3);   /* Soft orange tint */
  --badge-info-bg: rgba(93, 169, 233, 0.2);       /* Sky blue tint */
  --badge-text: var(--color-text-inverse);

  /* Charts */
  --chart-positive: var(--color-positive);
  --chart-neutral: var(--color-brand-secondary);
  --chart-negative: var(--color-negative);
  --chart-highlight: var(--color-brand-highlight);
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Brand Colors - slightly adjusted for dark mode */
    --color-brand-primary: #5DA9E9;           /* Lighter blue for readability */
    --color-brand-secondary: #7EC4F5;         /* Brighter sky blue */
    --color-brand-accent: #7FE1B0;            /* Keep mint green (works well in dark) */
    --color-brand-highlight: #FFB88C;         /* Brighter orange for visibility */
    --color-brand-neutral-light: #1F2937;     /* Dark gray background */
    --color-brand-neutral-dark: #E5E7EB;      /* Light gray text */

    /* Text Colors */
    --color-text-default: #E5E7EB;            /* Light gray for main text */
    --color-text-muted: #9CA3AF;              /* Medium gray for secondary text */
    --color-text-inverse: #111827;            /* Dark text on light backgrounds */

    /* Background Colors */
    --color-bg-base: #111827;                 /* Dark base */
    --color-bg-subtle: #1F2937;               /* Slightly lighter dark */
    --color-bg-elevated: #374151;             /* Elevated surfaces */

    /* Border Colors */
    --color-border-default: #374151;          /* Dark borders */
    --color-border-strong: #4B5563;           /* Stronger dark borders */

    /* State Colors */
    --color-positive: #10B981;                /* Brighter green for dark mode */
    --color-negative: #EF4444;                /* Brighter red for visibility */
    --color-negative-strong: #DC2626;         /* Strong red */
    --color-warning: #F59E0B;                 /* Amber warning */

    /* Link Colors */
    --color-link-default: #60A5FA;            /* Light blue links */
    --color-link-hover: #93C5FD;              /* Lighter on hover */

    /* Shadows - reduced opacity for dark mode */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5);

    /* Component Tokens */
    --button-primary-bg: #2563EB;             /* Bright blue button */
    --button-primary-hover-bg: #1D4ED8;       /* Darker on hover */

    --button-secondary-bg: #059669;           /* Green secondary */
    --button-secondary-hover-bg: #047857;

    --button-destructive-bg: #DC2626;
    --button-destructive-hover-bg: #B91C1C;

    --card-bg: #1F2937;
    --card-border: #374151;
  }

  /* Dark mode specific adjustments for body */
  body {
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    color: var(--color-text-default);
  }

  /* Ensure inputs have proper contrast */
  input, select, textarea {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-default);
    border-color: var(--color-border-default);
  }

  input::placeholder,
  select::placeholder,
  textarea::placeholder {
    color: var(--color-text-muted);
  }

  /* Tables in dark mode */
  table {
    background-color: var(--color-bg-base);
    border-color: var(--color-border-default);
  }

  th {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-default);
    border-color: var(--color-border-default);
  }

  td {
    border-color: var(--color-border-default);
    color: var(--color-text-default);
  }

  tbody tr:hover {
    background-color: var(--color-bg-subtle);
  }

  /* Modal backgrounds */
  .modal {
    background: rgba(0, 0, 0, 0.8);
  }

  .modal-content {
    background: var(--color-bg-elevated);
    color: var(--color-text-default);
  }

  /* Messages */
  .message.bot {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-default);
    color: var(--color-text-default);
  }

  .message.user {
    background: var(--color-brand-primary);
    color: white;
  }

  /* Cards */
  .card,
  .access-card,
  .subscription-card,
  .integration-card {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-default);
    color: var(--color-text-default);
  }

  /* Empty states */
  .empty-state {
    color: var(--color-text-muted);
  }

  /* App shell */
  .app-shell {
    background: var(--color-bg-base);
  }

  .chat-messages {
    background: var(--color-bg-subtle);
  }

  /* Transactions panel */
  .transactions-panel {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-default);
  }

  /* Code blocks */
  .code-block {
    background: #0D1117;
    border: 1px solid var(--color-border-default);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Colors */
.text-default { color: var(--color-text-default); }
.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }
.text-primary { color: var(--color-brand-primary); }
.text-secondary { color: var(--color-brand-secondary); }
.text-positive { color: var(--color-positive); }
.text-negative { color: var(--color-negative); }
.text-warning { color: var(--color-warning); }

/* Background Colors */
.bg-base { background-color: var(--color-bg-base); }
.bg-subtle { background-color: var(--color-bg-subtle); }
.bg-primary { background-color: var(--color-brand-primary); }
.bg-secondary { background-color: var(--color-brand-secondary); }
.bg-accent { background-color: var(--color-brand-accent); }
.bg-highlight { background-color: var(--color-brand-highlight); }

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

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

/* Font Weights */
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Font Sizes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }