/* ==========================================
   APP.BRANCH - DESIGN TOKENS v2
   ==========================================

   The design system. All visual values defined here.

   RULES:
   - Never hardcode colors, spacing, or radii in component CSS
   - Always use var(--token-name)
   - Both light and dark theme values must be defined
   - This file is the single source of truth

   PROTOTYPE REFERENCE:
   static/prototype/sidebar-layout.html

   MIGRATION NOTES:
   - Replaces tokens.css for the redesigned platform
   - All production tokens preserved, prototype values take priority where they differ
   - New sections: Shadows, Layout, Scrollbar, Glass Effect, Animations

   ========================================== */

:root {

  /* ===================
     BASE COLORS
     ===================
     Pure values and gray scale. Prefer semantic names below. */

  /* Pure values - rarely used directly */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Gray scale - use semantic names below instead when possible */
  --color-gray-50: #FAFAFA;   /* Lightest - subtle backgrounds */
  --color-gray-100: #F5F5F5;  /* Light backgrounds */
  --color-gray-200: #F0F0F0;  /* Borders, dividers */
  --color-gray-300: #E8E8E8;  /* Stronger borders */
  --color-gray-400: #999999;  /* Muted text, disabled */
  --color-gray-500: #666666;  /* Secondary text */
  --color-gray-600: #333333;  /* Strong text */

  /* ===================
     SEMANTIC COLORS
     ===================
     Use these instead of base colors for clarity.
     Values updated to match prototype where different. */

  /* Backgrounds */
  --bg-primary: #FFFFFF;      /* Main background */
  --bg-secondary: #F6F6F6;    /* Subtle contrast (v2: was #FAFAFA) */
  --bg-tertiary: #EFEFEF;     /* Cards, panels (v2: was #F5F5F5) */

  /* Text */
  --text-primary: #1A1A1A;    /* Main text (v2: was #000000) */
  --text-secondary: #666666;  /* Less important text */
  --text-muted: #999999;      /* Hints, placeholders */

  /* Borders */
  --border-color: #E0E0E0;        /* Default borders (v2: was #E8E8E8) */
  --border-color-light: #EEEEEE;  /* Subtle dividers (v2: was #F0F0F0) */
  --border-color-strong: #E0E0E0; /* Emphasized borders */

  /* ===================
     ACCENT COLORS
     ===================
     Brand and UI accent colors */

  --color-accent-blue: #47b0dc;     /* Links, info, ready state */
  --color-accent-green: #7ee4ad;    /* Success, approved, complete */
  --color-accent-purple: #7C3AED;   /* Special actions, AI/generators */
  --color-accent-orange: #F57C00;   /* Warnings, in-progress, partial */
  --color-accent-red: #E53935;      /* Errors, rejected, danger */

  /* Primary action color (buttons, interactive elements) */
  --color-primary: #1E88E5;         /* Blue - primary actions */
  --color-primary-dark: #1a56db;    /* Darker blue - hover states */

  /* ===================
     STATUS COLORS
     ===================
     Use for node and item states.
     Merged from production + prototype. */

  /* Execution status (nodes) */
  --color-status-running: #FFA000;    /* Orange - async operation in progress */
  --color-status-complete: #4CAF50;   /* Green - success */
  --color-status-error: #E53935;      /* Red - failure */
  --color-status-ready: #1E88E5;      /* Blue - ready to run */
  --color-status-pending: #999999;    /* Gray - waiting */

  /* Approval status (QA, flows) */
  --color-status-approved: #4CAF50;   /* Green */
  --color-status-rejected: #E53935;   /* Red */
  --color-status-waiting: #D0D0D0;    /* Gray */
  --color-status-waiting-hover: #C0C0C0;

  /* Status backgrounds (subtle versions for row/card backgrounds) */
  --bg-status-approved: #e8f9ef;      /* Pale green (v2: was #d6f8df) */
  --bg-status-rejected: #fceaea;      /* Pale red */
  --bg-status-ready: #d6edf8;         /* Pale blue */
  --bg-status-running: #fff3e0;       /* Pale orange */
  --bg-status-review: #e3f2fd;        /* v2: pale blue for review state */

  /* v2: Status text colors (for badge/label text) */
  --text-status-approved: #2e7d4f;
  --text-status-review: #1565C0;
  --text-status-rejected: #c62828;

  /* v2: Progress bar fills */
  --progress-approved: #7ee4ad;
  --progress-review: #7ec8e4;
  --progress-rejected: #e4a07e;

  /* ===================
     BUTTON COLORS
     =================== */

  --btn-minimal-text: #999999;
  --btn-minimal-hover-bg: #F0F0F0;
  --btn-minimal-hover-text: #666666;
  --btn-minimal-active-bg: #E8E8E8;
  --btn-minimal-active-text: #333333;

  /* Generator button (AI nodes) */
  --btn-generator-bg: #9C27B0;
  --btn-generator-hover: #7B1FA2;

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

  --font-family: 'neue-haas-grotesk-text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide: 0.12em;

  /* ===================
     SPACING
     ===================
     Consistent spacing scale */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ===================
     BORDER RADIUS
     ===================
     v2: updated from 0 to rounded values */

  --radius-none: 0;
  --radius-sm: 6px;     /* v2: was 0 */
  --radius-md: 10px;    /* v2: was 0 */
  --radius-lg: 14px;    /* v2: new */

  /* ===================
     SHADOWS
     ===================
     v2: new section */

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-glass: 0 0 20px rgba(0, 0, 0, 0.06);

  /* ===================
     LAYOUT
     ===================
     v2: new section - app-level layout values */

  --app-padding: 12px;
  --app-radius: 12px;

  /* ===================
     SIDEBAR
     ===================
     v2: new section */

  --sidebar-width: 260px;

  /* ===================
     SCROLLBAR
     ===================
     v2: new section */

  --scrollbar-thumb: #D0D0D0;
  --scrollbar-track: transparent;

  /* ===================
     ANIMATIONS
     ===================
     v2: new section - easing curves as custom properties */

  --ease-out-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-snappy: cubic-bezier(0.7, 0, 0.84, 0);

  /* Keyframes reference (defined in component CSS, documented here):

     popupGrow:
       0%   { opacity: 0; transform: scaleY(0.3); }
       100% { opacity: 1; transform: scaleY(1); }
       Duration: 0.2s var(--ease-out-snappy)
       transform-origin: top center

     popupShrink:
       0%   { opacity: 1; transform: scaleY(1); }
       100% { opacity: 0; transform: scaleY(0.3); }
       Duration: 0.15s var(--ease-in-snappy) forwards
       transform-origin: top center

     pulse-status:
       0%, 100% { opacity: 1; }
       50%      { opacity: 0.4; }
       Duration: 1.5s ease-in-out infinite
  */
}

/* ===================
   GLASS EFFECT
   ===================
   Apply to dropdowns, popups, floating panels.
   Not expressed as single variables because backdrop-filter
   requires multiple properties working together.

   Light theme:
     background: rgba(255, 255, 255, 0.45);
     backdrop-filter: blur(12px) saturate(120%);
     -webkit-backdrop-filter: blur(12px) saturate(120%);
     border: 1px solid rgba(255, 255, 255, 0.4);
     box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.3);

   Dark theme:
     background: rgba(0, 0, 0, 0.35);
     backdrop-filter: blur(12px) saturate(120%);
     -webkit-backdrop-filter: blur(12px) saturate(120%);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.05);
*/


/* ===========================================
   DARK THEME OVERRIDES
   ===========================================
   All tokens that change in dark mode. */

[data-theme="dark"] {

  /* Base colors inverted */
  --color-black: #FFFFFF;
  --color-white: #1A1A1A;

  /* Gray scale inverted */
  --color-gray-50: #1A1A1A;
  --color-gray-100: #222222;
  --color-gray-200: #2A2A2A;
  --color-gray-300: #383838;
  --color-gray-400: #757575;
  --color-gray-500: #909090;
  --color-gray-600: #B0B0B0;

  /* Semantic backgrounds (v2: updated to prototype values) */
  --bg-primary: #1A1A1A;     /* v2: was #121212 */
  --bg-secondary: #242424;   /* v2: was #1A1A1A */
  --bg-tertiary: #2E2E2E;    /* v2: was #222222 */

  /* Semantic text (v2: updated to prototype values) */
  --text-primary: #E8E8E8;   /* v2: was #FFFFFF */
  --text-secondary: #999999; /* v2: was #B0B0B0 */
  --text-muted: #666666;     /* v2: was #757575 */

  /* Borders (v2: updated to prototype values) */
  --border-color: #3A3A3A;        /* v2: was #383838 */
  --border-color-light: #2E2E2E;  /* v2: was #2A2A2A */
  --border-color-strong: #484848;

  /* Status backgrounds (dark versions) */
  --bg-status-approved: #253a25;
  --bg-status-rejected: #3a2525;
  --bg-status-ready: #1a2d3a;
  --bg-status-running: #3a2f1a;
  --bg-status-review: #1a2d3a;    /* v2: dark review background */

  /* v2: Status text colors (dark versions) */
  --text-status-approved: #7ee4ad;
  --text-status-review: #64b5f6;
  --text-status-rejected: #ef9a9a;

  /* v2: Progress bar fills (dark versions) */
  --progress-approved: #5cc48d;
  --progress-review: #5ca8c4;
  --progress-rejected: #c4885c;

  /* Button colors */
  --btn-minimal-text: #757575;
  --btn-minimal-hover-bg: #2A2A2A;
  --btn-minimal-hover-text: #B0B0B0;
  --btn-minimal-active-bg: #383838;
  --btn-minimal-active-text: #FFFFFF;

  /* Shadows */
  --shadow-sm: none;
  --shadow-md: none;

  /* Scrollbar */
  --scrollbar-thumb: #4A4A4A;
}