/* V2 Design Tokens - CSS Custom Properties
 *
 * This file defines all design tokens as CSS custom properties.
 * NEVER use hard-coded values in components - always reference these variables.
 *
 * See docs/V2_DESIGN_SYSTEM.md for full documentation.
 */

:root {
  /* ============================================
   * COLORS - LIGHT MODE (DEFAULT)
   * ============================================ */

  /* Brand / Primary - consistent across themes */
  --color-primary: #ff7444;
  --color-primary-hover: #e65a30;
  --color-primary-light: rgba(255, 116, 68, 0.08);
  --color-primary-shadow: rgba(255, 116, 68, 0.15);
  --color-primary-shadow-strong: rgba(255, 116, 68, 0.3);

  /* Text - Light Mode */
  --color-text-primary: #0A0A0A;      /* Headings, icons */
  --color-text-secondary: #737373;    /* Sidebar menu items */
  --color-text-muted: #A3A3A3;        /* Section headers */
  --color-text-disabled: #D4D4D4;
  --color-text-inverse: #ffffff;

  /* Backgrounds - Light Mode */
  --color-bg-body: #f5f5f5;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #f8f8f8;
  --color-bg-active: rgba(255, 116, 68, 0.08);
  --color-bg-disabled: #f0f0f0;

  /* Borders - Light Mode */
  --color-border: #e8e8e8;
  --color-border-hover: #ff7444;
  --color-border-light: #f0f0f0;
  --color-border-focus: #ff7444;

  /* Status Colors */
  --color-success: #4CAF50;
  --color-success-bg: #E8F5E9;
  --color-success-text: #2E7D32;

  --color-info: #2196F3;
  --color-info-bg: #E3F2FD;
  --color-info-text: #1976D2;

  --color-warning: #FF9800;
  --color-warning-bg: #FFF3E0;
  --color-warning-text: #E65100;

  --color-error: #ff4444;
  --color-error-bg: #FFEBEE;
  --color-error-text: #C62828;

  --color-danger: #ff4444;
  --color-danger-bg: #FFEBEE;
  --color-danger-text: #C62828;

  /* Overlay */
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* Focus stars (docs/features/focus-stars.md) - the team-category accent
   * trio, deliberately clear of the orange primary and the red/green status
   * hues. Applied to the star glyph fill only, never a background. */
  --focus-star-blue: #3B82F6;
  --focus-star-green: #10B981;
  --focus-star-purple: #8B5CF6;

  /* ============================================
   * TYPOGRAPHY
   * Design uses Geist font family by Vercel
   * ============================================ */

  /* Font Family - Geist Sans from Vercel CDN */
  --font-family-base: 'Geist Sans', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Geist Mono', 'SF Mono', Monaco, 'Andale Mono', monospace;

  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 12px;   /* Section headers */
  --font-size-base: 14px;
  --font-size-md: 16px;   /* Sidebar menu items */
  --font-size-lg: 18px;
  --font-size-xl: 20px;   /* Content section headings */
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-display: 52px;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;   /* Sidebar menu items */
  --font-weight-semibold: 600; /* Headings, section headers */
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-base: 1.5;     /* 150% - used throughout design */
  --line-height-relaxed: 1.6;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;  /* -2% for headings */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;    /* 2% for sidebar items */

  /* ============================================
   * SPACING
   * Base unit: 4px
   * Primary spacing: 24px (6 units)
   * ============================================ */

  --space-unit: 4px;
  --space-0: 0;
  --space-1: 4px;    /* 1 unit */
  --space-2: 8px;    /* 2 units */
  --space-3: 12px;   /* 3 units */
  --space-4: 16px;   /* 4 units */
  --space-5: 20px;   /* 5 units */
  --space-6: 24px;   /* 6 units - PRIMARY */
  --space-7: 28px;   /* 7 units */
  --space-8: 32px;   /* 8 units */
  --space-10: 40px;  /* 10 units */
  --space-12: 48px;  /* 12 units */
  --space-14: 56px;  /* 14 units */
  --space-16: 64px;  /* 16 units */

  /* ============================================
   * BORDERS
   * ============================================ */

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;

  /* Border Width */
  --border-width-0: 0;
  --border-width-default: 1px;
  --border-width-thick: 2px;

  /* ============================================
   * SHADOWS
   * Figma design uses combined border + shadow pattern
   * ============================================ */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.25);
  --shadow-primary: 0 2px 8px var(--color-primary-shadow-strong);
  --shadow-primary-light: 0 2px 8px var(--color-primary-shadow);

  /* Figma design shadows - combined border + drop shadow */
  --shadow-card: 0 0 0 1px #E5E5E5, 0 4px 8px -5px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 0 0 1px var(--color-primary), 0 4px 12px -4px rgba(0, 0, 0, 0.2);
  --shadow-panel: 0 0 0 1px #E5E5E5, 0 4px 8px -5px rgba(0, 0, 0, 0.15);
  --shadow-sidebar: 0 0 0 1px #E5E5E5, 0 4px 8px -5px rgba(0, 0, 0, 0.15);

  /* ============================================
   * TRANSITIONS
   * ============================================ */

  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;

  /* ============================================
   * LAYOUT
   * ============================================ */

  /* Topbar - Figma spec: 88px total height */
  --topbar-height: 88px;

  /* Page Layout - consistent edge spacing */
  --page-margin: 20px;                          /* Consistent margin from viewport edges */
  --layout-gap: var(--space-6);                 /* Gap between major layout elements (sidebar <-> content) */

  /* Sidebar */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 60px;
  --sidebar-left-offset: var(--page-margin);    /* Distance from left edge */
  --sidebar-top-offset: calc(var(--topbar-height) + var(--page-margin));  /* Distance from topbar */
  --sidebar-transition: width var(--transition-base);  /* Smooth collapse/expand */

  /* Content Area */
  --content-left-offset: calc(var(--sidebar-width) + var(--sidebar-left-offset) + var(--layout-gap));
  --content-right-offset: var(--page-margin);   /* Distance from right edge - matches left */
  --content-top-offset: var(--page-margin);     /* Distance from topbar */
  --content-padding: var(--space-6);            /* Internal padding of content area */
  --content-max-width: 1400px;

  /* Modal */
  --modal-max-width: 600px;
  --modal-max-height: 80vh;

  /* ============================================
   * Z-INDEX
   * ============================================ */

  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-sidebar: 999;
  --z-topbar: 1000;
  --z-modal-backdrop: 9999;
  --z-modal: 10000;
  --z-tooltip: 10001;
  --z-notification: 10002;

  /* ============================================
   * COMPONENT-SPECIFIC TOKENS
   * ============================================ */

  /* Panel */
  --panel-padding: var(--space-6);
  --panel-border-radius: var(--border-radius-lg);
  --panel-shadow: var(--shadow-md);
  --panel-gap: var(--space-6);

  /* Card Item */
  --card-padding: var(--space-4);
  --card-border-radius: var(--border-radius-lg);
  --card-gap: var(--space-3);

  /* Button */
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-2);
  --btn-border-radius: var(--border-radius-md);
  --btn-font-size: var(--font-size-sm);
  --btn-font-weight: var(--font-weight-medium);

  /* Icon Button */
  --btn-icon-size: 36px;
  --btn-icon-size-sm: 28px;
  --btn-icon-size-lg: 48px;

  /* Avatar */
  --avatar-size-sm: 28px;
  --avatar-size-md: 40px;
  --avatar-size-lg: 56px;

  /* Progress Bar */
  --progress-height: 8px;
  --progress-border-radius: var(--border-radius-sm);

  /* Input */
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-border-radius: var(--border-radius-md);
  --input-font-size: var(--font-size-base);

  /* Sidebar Item */
  --sidebar-item-padding-x: var(--space-6);
  --sidebar-item-padding-y: var(--space-1);
  --sidebar-item-gap: var(--space-3);

  /* Icons */
  --icon-size-sm: 14px;
  --icon-size-base: 16px;   /* Sidebar icons */
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
}

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

[data-theme="dark"] {
  /* Text - Dark Mode */
  --color-text-primary: #f5f5f5;      /* Headings, icons - light gray */
  --color-text-secondary: #a3a3a3;    /* Sidebar menu items - medium gray */
  --color-text-muted: #737373;        /* Section headers - darker gray */
  --color-text-disabled: #525252;     /* Disabled text */
  --color-text-inverse: #0a0a0a;      /* Dark text on light backgrounds */

  /* Backgrounds - Dark Mode */
  --color-bg-body: #0a0a0a;           /* Very dark background */
  --color-bg-surface: #1a1a1a;        /* Slightly lighter surface */
  --color-bg-elevated: #262626;       /* Elevated surfaces (modals, etc) */
  --color-bg-hover: #2a2a2a;          /* Hover state */
  --color-bg-active: rgba(255, 116, 68, 0.15);  /* Slightly more visible in dark */
  --color-bg-disabled: #1f1f1f;

  /* Borders - Dark Mode */
  --color-border: #333333;            /* Subtle border */
  --color-border-hover: #ff7444;      /* Keep primary color */
  --color-border-light: #2a2a2a;      /* Very subtle border */
  --color-border-focus: #ff7444;      /* Keep primary color */

  /* Shadows - Dark Mode (lighter/subtler) */
  --shadow-card: 0 0 0 1px #333333, 0 4px 8px -5px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 0 0 1px var(--color-primary), 0 4px 12px -4px rgba(0, 0, 0, 0.6);
  --shadow-panel: 0 0 0 1px #333333, 0 4px 8px -5px rgba(0, 0, 0, 0.5);
  --shadow-sidebar: 0 0 0 1px #333333, 0 4px 8px -5px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.7);

  /* Status colors - adjusted for dark mode */
  --color-success-bg: #1a3a1f;
  --color-info-bg: #1a2d3f;
  --color-warning-bg: #3f2d1a;
  --color-error-bg: #3f1a1a;
  --color-danger-bg: #3f1a1a;

  /* Focus stars - lifted a shade for contrast on the near-black body; purple
   * in particular goes muddy at the light-mode value on dark. */
  --focus-star-blue: #60A5FA;
  --focus-star-green: #34D399;
  --focus-star-purple: #A78BFA;
}

/* ============================================
 * BRANDED THEME
 * Full theme palette generated server-side from org brand colors
 * and injected via base.html inline <style> block.
 *
 * This section provides a fallback for when the inline palette
 * hasn't loaded yet. The server-generated palette overrides these
 * values with colors derived from the org's brand colors.
 *
 * Three palette styles: light, dark (default), vibrant
 * Light/dark modes are NOT affected by org branding.
 * ============================================ */

[data-theme="branded"] {
  /* Fallback — dark neutral palette (overridden by server-generated inline styles) */
  --color-primary: #ff7444;
  --color-primary-hover: #e65a30;
  --color-primary-light: rgba(255, 116, 68, 0.12);
  --color-primary-shadow: rgba(255, 116, 68, 0.20);
  --color-primary-shadow-strong: rgba(255, 116, 68, 0.35);

  --color-text-primary: #f0ece8;
  --color-text-secondary: #b8b0a6;
  --color-text-muted: #8a8078;
  --color-text-disabled: #5a524a;
  --color-text-inverse: #1a1612;

  --color-bg-body: #141210;
  --color-bg-surface: #1e1c18;
  --color-bg-elevated: #2a2722;
  --color-bg-hover: #332f2a;
  --color-bg-active: rgba(255, 116, 68, 0.15);
  --color-bg-disabled: #1a1816;

  --color-border: #3a3530;
  --color-border-hover: var(--color-primary);
  --color-border-light: #2a2520;
  --color-border-focus: var(--color-primary);

  --shadow-card: 0 0 0 1px #3a3530, 0 4px 8px -5px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 0 0 1px var(--color-primary), 0 4px 12px -4px rgba(0, 0, 0, 0.7);
  --shadow-panel: 0 0 0 1px #3a3530, 0 4px 8px -5px rgba(0, 0, 0, 0.6);
  --shadow-sidebar: 0 0 0 1px #3a3530, 0 4px 8px -5px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.8);

  --color-success: #7BC282;
  --color-warning: #D49A5A;
  --color-error: #D47A8A;
  --color-info: #6B8FC2;
  --color-success-bg: #1a2a1f;
  --color-info-bg: #1a2535;
  --color-warning-bg: #352a1a;
  --color-error-bg: #351a1a;
  --color-danger-bg: #351a1a;
}

/* ============================================
 * RESPONSIVE OVERRIDES
 * ============================================ */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  :root {
    --page-margin: 16px;
    --layout-gap: var(--space-5);
    --panel-gap: var(--space-5);
    --content-padding: var(--space-5);
  }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
  :root {
    --page-margin: var(--space-4);
    --layout-gap: var(--space-4);
    --panel-gap: var(--space-4);
    --content-padding: var(--space-4);
    --panel-padding: var(--space-5);
    --sidebar-top-offset: var(--topbar-height);
    /* On mobile, sidebar overlays so no left offset needed */
    --content-left-offset: 0;
    --content-right-offset: var(--page-margin);
  }
}

/* Small Mobile (<480px) */
@media (max-width: 479px) {
  :root {
    --page-margin: var(--space-3);
    --layout-gap: var(--space-3);
    --panel-gap: var(--space-3);
    --content-padding: var(--space-3);
    --panel-padding: var(--space-4);
    --content-right-offset: var(--page-margin);
  }
}