/* ==========================================================================
   GridMaster - Artistic Flair Design System Variables
   ========================================================================== */

:root {
  /* Color Palette - Artistic Flair Atelier (Warm Stone, White Parchment & Earth Pigments) */
  --bg-app: #F7F6F2;
  --bg-workspace: #EAE8E0;
  --bg-panel: #FFFFFF;
  --bg-panel-elevated: #FAF9F6;
  --bg-panel-hover: #F1F0EA;
  --bg-input: #FFFFFF;
  --bg-input-secondary: #F1F0EA;
  --bg-input-focus: #FFFFFF;
  
  /* Borders & Dividers */
  --border-subtle: #F1F0EA;
  --border-medium: #E5E3DB;
  --border-strong: #DEDCCA;
  --border-focus: #5D5D44;
  
  /* Text & Typography Colors */
  --text-primary: #1A1A1A;
  --text-secondary: #5C5A4F;
  --text-muted: #8E8B7E;
  --text-faint: #A8A594;
  --text-inverse: #FFFFFF;
  
  /* Brand Accent: Earth Olive Pigment & Studio Charcoal */
  --accent-primary: #5D5D44;
  --accent-primary-hover: #4A4A36;
  --accent-primary-active: #383827;
  --accent-subtle: rgba(93, 93, 68, 0.10);
  --accent-focus-ring: rgba(93, 93, 68, 0.25);
  --color-dark: #1A1A1A;
  --color-dark-hover: #333333;
  
  /* Functional Colors */
  --color-success: #4E8A5E;
  --color-warning: #C28B38;
  --color-danger: #C04A46;
  --color-info: #4A7BBF;

  /* Typography */
  --font-brand: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Syne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Geometry & Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 14px rgba(93, 93, 68, 0.08);
  --shadow-lg: 0 12px 30px rgba(93, 93, 68, 0.12);
  --shadow-floating: 0 20px 48px -10px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-canvas: 0 24px 48px -12px rgba(93, 93, 68, 0.22), 0 4px 14px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.22s ease;
  --transition-bounce: 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Workspace Layout Dimensions */
  --header-height: 60px;
  --sidebar-width: 340px;
  --mobile-nav-height: 60px;
}