/* Modern Simple Design System - Single source of truth. See DESIGN_SYSTEM.md */

/* App root (body) - use background-color only so workspace background-image is not reset by shorthand */
.app-root {
  background-color: var(--bg-primary);
  min-height: 100vh;
  margin: 0;
}

/* ============================================
   MODERN SIMPLE DESIGN SYSTEM - Single source of truth
   Use these CSS variables in all widgets and UI.
   New widgets: reference --bg-*, --text-*, --radius-*,
   --font-*, --icon-*, --btn-*, --space-* only.
   ============================================ */
:root {
  /* Modern Simple - Light Backgrounds */
  --bg-primary: #FAFAFA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F3F4;
  --bg-hover: #EEF1F4;
  --bg-active: #E2E8F0;
  --bg-grouped: #FAFAFA;
  --bg-elevated: rgba(255, 255, 255, 0.95);
  
  /* Text - Modern semantic */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-quaternary: #6B7280; /* #3: was #CBD5E1 (~1.4:1 on light bg, fails AA); #6B7280 ~4.6:1 */
  --text-on-accent: #FFFFFF;
  
  /* Modern Accent - Refined blue */
  --bg-accent: #2563EB;
  --bg-accent-hover: #1D4ED8;
  --bg-accent-active: #1E40AF;
  
  /* Semantic Colors */
  --color-danger: #DC2626;
  --color-danger-hover: #B91C1C;
  --color-success: #16A34A;
  --color-success-hover: #15803D;
  --color-warning: #EA580C;
  --color-warning-hover: #C2410C;
  --color-info: #2563EB;
  --color-info-hover: #1D4ED8;
  --color-info-soft: #DBEAFE;
  --color-info-dark: #1D4ED8;
  --color-success-text: #16A34A;
  --color-danger-bright: #DC2626;
  
  /* Semantic soft backgrounds (for badges, status pills, highlights) */
  --bg-success-soft: rgba(22, 163, 74, 0.12);
  --bg-danger-soft: rgba(220, 38, 38, 0.1);
  --bg-warning-soft: rgba(234, 88, 12, 0.08);
  --bg-info-soft: rgba(37, 99, 235, 0.12);
  --bg-accent-soft: rgba(37, 99, 235, 0.12);
  --bg-on-accent-soft: rgba(255, 255, 255, 0.25);
  --border-on-accent: rgba(255, 255, 255, 0.8);
  --input-focus-ring: rgba(37, 99, 235, 0.15);
  --modal-backdrop: rgba(15, 23, 42, 0.45);
  --status-share-incoming: var(--chart-purple);
  
  /* Chart/data visualization */
  --chart-blue: #3b82f6;
  --chart-green: #10b981;
  --chart-amber: #f59e0b;
  --chart-red: #ef4444;
  --chart-purple: #8b5cf6;
  --chart-cyan: #06b6d4;
  --chart-pink: #ec4899;
  --chart-lime: #84cc16;

  /* Branded weather shells (dark cards; text uses --weather-on-shell) */
  --weather-shell-bg: #1e3a5f;
  --weather-shell-bg-end: #0b2545;
  --weather-shell-panel: #2a4a6e;
  --weather-shell-panel-alt: #163a5f;
  --weather-on-shell: #ffffff;
  --weather-on-shell-muted: rgba(255, 255, 255, 0.86);
  --weather-on-shell-soft: rgba(255, 255, 255, 0.72);
  --weather-shell-high: var(--chart-amber);
  --weather-shell-low: var(--chart-cyan);
  --weather-shell-error: #ffb4b4;
  
  /* Workspace background - set by applyWorkspaceBackground */
  --workspace-bg-image: none;

  /* Borders - Modern subtle */
  --border-light: #E2E8F0;
  --border-color: #E2E8F0;
  --border-hover: #CBD5E1;

  /* Unified edges for windows/menus/widgets */
  --edge-border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
  --edge-border: 1px solid var(--edge-border-color);
  --edge-radius: var(--radius-xl);
  --edge-shadow: var(--shadow-lg);
  
  /* Shadows - Light, soft depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
  --focus-ring: rgba(37, 99, 235, 0.2);
  
  /* Spacing - 8px base */
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-card: var(--space-5);
  
  /* Border Radius - Modern, slightly larger */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-card: var(--radius-xl);
  
  /* Font - Inter for modern look, system fallback */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Typography - Slightly larger body for readability */
  --font-2xs: 11px;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-13: 13px;
  --font-14: 14px;
  --font-base: 16px;
  --font-15: 15px;
  --font-md: 17px;
  --font-lg: 20px;
  --font-xl: 22px;
  --font-2xl: 28px;
  --font-3xl: 34px;
  --font-4xl: 48px;

  /* UI control type aliases - use these for buttons, inputs, menus, and dense chrome */
  --font-ui-xs: var(--font-xs);
  --font-ui-sm: var(--font-sm);
  --font-ui: var(--font-14);
  --font-ui-lg: var(--font-base);
  
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Icon sizes - consistent tap targets */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 26px;
  --icon-xl: 32px;
  --icon-size: var(--icon-md);
  
  /* Button heights - iOS 44pt minimum */
  --btn-xs: 28px;
  --btn-sm: 34px;
  --btn-md: 44px;
  --btn-lg: 50px;

  /* Shared control geometry */
  --control-height-xs: var(--btn-xs);
  --control-height-sm: var(--btn-sm);
  --control-height-md: var(--btn-md);
  --control-height-lg: var(--btn-lg);
  --control-padding-x: var(--space-3);
  --control-padding-y: var(--space-2);
  --control-radius: var(--radius-md);
  
  --toolbar-height: 44px;
  
  /* Widget edges - single source for all widget content padding (TradingView, embeds, tables) */
  --widget-content-padding: var(--space-2);
  
  --transition-fast: 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-normal: 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow: 320ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Dark theme: system preference or data-theme="dark" (for future theme switcher) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --bg-hover: #475569;
    --bg-active: #64748B;
    --bg-grouped: #0F172A;
    --bg-elevated: rgba(30, 41, 59, 0.95);
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-tertiary: #94A3B8;
    --text-quaternary: #64748B;
    --border-color: #334155;
    --border-light: #334155;
    --border-hover: #475569;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.25);
    --focus-ring: rgba(59, 130, 246, 0.35);
    --modal-backdrop: rgba(2, 6, 23, 0.68);
  }
}

html[data-theme="dark"] {
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-hover: #475569;
  --bg-active: #64748B;
  --bg-grouped: #0F172A;
  --bg-elevated: rgba(30, 41, 59, 0.95);
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-quaternary: #64748B;
  --border-color: #334155;
  --border-light: #334155;
  --border-hover: #475569;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.25);
  --focus-ring: rgba(59, 130, 246, 0.35);
  --modal-backdrop: rgba(2, 6, 23, 0.68);
}

/* Respect prefers-reduced-motion for accessibility (#1: also neutralize delays + smooth scroll) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* #2: Global keyboard-focus baseline. Mouse clicks don't trigger :focus-visible,
   so this gives a consistent, visible ring for keyboard/AT users without the
   "focus box on click" that bare :focus would cause. Components may layer their
   own :focus-visible styles on top. */
:focus-visible {
  outline: 2px solid var(--bg-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bg-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-base);
  font-weight: var(--font-normal);
  line-height: 1.47;
  letter-spacing: -0.022em;
  background-color: var(--bg-primary);
  background-image: var(--workspace-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography hierarchy - iOS style */
h1, .h1 { font-size: var(--font-3xl); font-weight: var(--font-bold); line-height: 1.22; letter-spacing: -0.028em; }
h2, .h2 { font-size: var(--font-2xl); font-weight: var(--font-bold); line-height: 1.26; letter-spacing: -0.022em; }
h3, .h3 { font-size: var(--font-lg); font-weight: var(--font-semibold); line-height: 1.29; letter-spacing: -0.022em; }
h4, .h4 { font-size: var(--font-md); font-weight: var(--font-semibold); line-height: 1.29; letter-spacing: -0.022em; }
h5, .h5 { font-size: var(--font-base); font-weight: var(--font-semibold); line-height: 1.4; }
h6, .h6 { font-size: var(--font-sm); font-weight: var(--font-semibold); line-height: 1.38; }

#root {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
}

/* #8: Loading skeletons. Shimmer is auto-neutralized by the reduced-motion block above. */
.wd-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}
.wd-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: wd-shimmer 1.4s ease-in-out infinite;
}
html[data-theme="dark"] .wd-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
@keyframes wd-shimmer { 100% { transform: translateX(100%); } }
.wd-skeleton-line { height: 12px; margin: 10px 0; }
.wd-skeleton-line.sm { width: 40%; }
.wd-skeleton-line.md { width: 70%; }
.wd-skeleton-block { width: 100%; min-height: 64px; height: 100%; }
.wd-skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-3);
  width: 100%;
  height: 100%;
}

/* #10: touch-friendly tap targets on small / coarse-pointer screens.
   On phones (<640px) grid drag/resize is disabled in JS to prevent accidental
   rearranges and clobbering the saved desktop layout. */
@media (max-width: 640px) {
  .icon-btn,
  .widget-btn,
  .widget-control-btn,
  .item-action-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .main-header { gap: 8px; }
}
@media (pointer: coarse) {
  .icon-btn,
  .widget-btn,
  .widget-control-btn {
    min-width: 38px;
    min-height: 38px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Direction A — "Glass & depth" skin (preview).
   Activate with <html data-skin="glass">. Composes with light/dark themes.
   Frosts surfaces over the workspace background image and deepens elevation.
   Explicit translucent colors are used (not tokens) so per-workspace scheme
   vars applied inline to :root can't override the glass effect.
   ───────────────────────────────────────────────────────────────────────── */
html[data-skin="glass"] {
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.08);
  --shadow-md: 0 6px 18px rgba(2, 6, 23, 0.10);
  --shadow-lg: 0 18px 50px rgba(2, 6, 23, 0.16);
  --shadow-card: 0 8px 30px rgba(2, 6, 23, 0.12);
  --shadow-card-hover: 0 16px 44px rgba(2, 6, 23, 0.20);
  --edge-shadow: var(--shadow-lg);
  /* springy, alive motion — the reduced-motion guard above still neutralizes it */
  --transition-fast: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-normal: 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Frosted fill for board widgets — blurs the workspace photo behind each card */
html[data-skin="glass"] .widget::before {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
}
html[data-skin="glass"] .widget {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
html[data-skin="glass"] .widget:hover {
  box-shadow: var(--shadow-card-hover), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Frost the chrome surfaces (modals, menus, sidebar, header) */
html[data-skin="glass"] .modal-content,
html[data-skin="glass"] .confirm-dialog,
html[data-skin="glass"] .widget-control-menu,
html[data-skin="glass"] .sidebar,
html[data-skin="glass"] .main-header {
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Dark-theme glass variants */
html[data-skin="glass"][data-theme="dark"] {
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 16px 44px rgba(0, 0, 0, 0.55);
  --edge-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
html[data-skin="glass"][data-theme="dark"] .widget::before {
  background: rgba(17, 24, 39, 0.55);
}
html[data-skin="glass"][data-theme="dark"] .widget {
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-skin="glass"][data-theme="dark"] .modal-content,
html[data-skin="glass"][data-theme="dark"] .confirm-dialog,
html[data-skin="glass"][data-theme="dark"] .widget-control-menu,
html[data-skin="glass"][data-theme="dark"] .sidebar,
html[data-skin="glass"][data-theme="dark"] .main-header {
  background: rgba(17, 24, 39, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.10);
}