/* =========================================================
   Banana Signal OS — Modern Aurora Edition
   Semantic dual-theme foundation with legacy aliases.
========================================================= */

:root {
  color-scheme: dark;

  /* Typography */
  --font-ui: "Noto Sans Thai", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Noto Sans Thai", "Sarabun", system-ui, sans-serif;

  /* Spacing */
  --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;

  /* Modern Aurora signals */
  --signal-banana: #FFD43B;
  --signal-cyan: #36D9FF;
  --signal-violet: #8A6CFF;
  --signal-magenta: #FF5CCB;
  --signal-banana-soft: rgba(255, 212, 59, 0.13);
  --signal-cyan-soft: rgba(54, 217, 255, 0.12);
  --signal-violet-soft: rgba(138, 108, 255, 0.13);
  --signal-magenta-soft: rgba(255, 92, 203, 0.10);
  --signal-cyan-foreground: #36D9FF;
  --signal-violet-foreground: #B6A7FF;
  --signal-magenta-foreground: #FF8ADA;
  --action-fill: #FFD43B;
  --action-fill-strong: #E5B800;
  --text-on-action: #111827;
  --text-on-dark-fill: #FFFFFF;
  --text-on-danger: #111827;

  /* Dark foundation */
  --canvas: #080B14;
  --canvas-secondary: #0E1322;
  --panel: #131A2B;
  --panel-elevated: #182136;
  --panel-hover: #1D2840;
  --input-surface: #101728;
  --border-color: #27324A;
  --border-color-strong: #394765;
  --field-border: #5F6C88;
  --text-primary: #F7F9FC;
  --text-secondary: #A7B0C3;
  --text-muted: #8E99AE;
  --text-faint: #6F7A90;
  --text-on-accent: #111827;
  --text-on-brand: #111827;

  /* Status */
  --success: #42E6A4;
  --warning: #FFB84D;
  --danger: #FF647C;
  --info: var(--signal-cyan-foreground);
  --online: var(--success);
  --offline: #6F7A90;

  /* Surfaces and ambience */
  --app-background: var(--canvas);
  --ambient-grid:
    linear-gradient(rgba(54, 217, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138, 108, 255, 0.03) 1px, transparent 1px);
  --ambient-grid-size: 64px 64px, 64px 64px;
  --ambient-opacity: 0.66;
  --ambient-sheen:
    radial-gradient(circle at 12% 6%, rgba(54, 217, 255, 0.11), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(138, 108, 255, 0.13), transparent 32%),
    radial-gradient(circle at 54% 92%, rgba(255, 92, 203, 0.07), transparent 35%),
    radial-gradient(circle at 28% 64%, rgba(255, 212, 59, 0.045), transparent 28%);

  /* Selective glass */
  --glass-blur: 20px;
  --glass-saturate: 135%;
  --glass-surface: rgba(14, 19, 34, 0.82);
  --glass-card: rgba(19, 26, 43, 0.96);
  --glass-card-strong: rgba(24, 33, 54, 0.98);
  --surface-highlight: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));

  /* Elevation and focus */
  --focus-ring: #36D9FF;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.38);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 36px rgba(0, 0, 0, 0.24);
  --shadow-glass-hover: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 20px 48px rgba(0, 0, 0, 0.32);
  --chart-grid: rgba(167, 176, 195, 0.14);
  --chart-tooltip: rgba(24, 33, 54, 0.98);
  --chart-banana: var(--signal-banana);
  --chart-cyan: var(--signal-cyan);
  --chart-violet: var(--signal-violet);
  --chart-magenta: var(--signal-magenta);
  --chart-warning: var(--warning);
  --chart-success: var(--success);
  --chart-neutral: var(--text-secondary);

  /* Shape and shell */
  --radius-control: 10px;
  --radius-field: 12px;
  --radius-card: 16px;
  --radius-hero: 24px;
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-card);
  --radius-lg: 20px;
  --radius-xl: var(--radius-hero);
  --touch-target: 44px;
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --mobile-bottom-nav-height: 68px;
  --mobile-bottom-nav-offset: 10px;
  --mobile-bottom-nav-space: calc(92px + env(safe-area-inset-bottom, 0px));
  --mobile-drawer-bg: #0E1322;
  --mobile-drawer-scrim: rgba(2, 6, 15, 0.72);
  --mobile-drawer-shadow: 18px 0 54px rgba(0, 0, 0, 0.46), 1px 0 0 var(--border-color);
  --transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Backward-compatible semantic aliases */
  --accent: var(--signal-banana);
  --accent-secondary: var(--signal-cyan);
  --accent-soft: var(--signal-banana-soft);
  --accent-dim: var(--signal-banana-soft);
  --accent-glow: rgba(255, 212, 59, 0.20);
  --brand-green: var(--signal-banana);
  --brand-green-500: #FFE36B;
  --brand-green-700: #D29E00;
  --brand-mint: var(--signal-cyan);
  --brand-sage: rgba(54, 217, 255, 0.12);
  --brand-cream: var(--canvas);
  --brand-paper: var(--panel);
  --brand-ink: var(--text-primary);
  --brand-muted: var(--text-secondary);
  --brand-white: #FFFFFF;
  --brand-dim: var(--signal-banana-soft);
  --bg-base: var(--canvas);
  --bg-surface: var(--panel);
  --bg-card: var(--panel);
  --bg-hover: var(--panel-hover);
  --bg-soft: var(--canvas-secondary);
  --bg-sidebar: var(--canvas-secondary);
  --input-bg: var(--input-surface);
  --border: var(--border-color);
  --border-soft: var(--border-color);
  --border-strong: var(--border-color-strong);
}
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #F4F6FA;
  --canvas-secondary: #EBEFF6;
  --panel: #FFFFFF;
  --panel-elevated: #F9FAFD;
  --panel-hover: #EEF2F8;
  --input-surface: #FFFFFF;
  --border-color: #DCE2EC;
  --border-color-strong: #C6CFDD;
  --text-primary: #172033;
  --text-secondary: #5E687A;
  --text-muted: #687386;
  --text-faint: #7B8597;
  --signal-cyan-foreground: #00677A;
  --signal-violet-foreground: #5B3CC4;
  --signal-magenta-foreground: #9D176F;
  --action-fill: #E8B900;
  --action-fill-strong: #C99D00;
  --text-on-action: #111827;
  --text-on-danger: #FFFFFF;
  --accent: #825800;
  --text-on-accent: #FFFFFF;
  --brand-green: #825800;
  --brand-green-500: #E8B900;
  --brand-green-700: #684500;
  --field-border: #687386;
  --success: #087A52;
  --warning: #945500;
  --danger: #C92C4A;
  --offline: #667085;
  --glass-surface: rgba(255, 255, 255, 0.82);
  --glass-card: rgba(255, 255, 255, 0.97);
  --glass-card-strong: #FFFFFF;
  --surface-highlight: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 242, 248, 0.58));
  --ambient-grid:
    linear-gradient(rgba(23, 32, 51, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 32, 51, 0.03) 1px, transparent 1px);
  --ambient-sheen:
    radial-gradient(circle at 12% 6%, rgba(54, 217, 255, 0.10), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(138, 108, 255, 0.09), transparent 30%),
    radial-gradient(circle at 54% 92%, rgba(255, 92, 203, 0.05), transparent 32%),
    radial-gradient(circle at 28% 64%, rgba(255, 212, 59, 0.11), transparent 26%);
  --focus-ring: #6246D9;
  --shadow-sm: 0 2px 8px rgba(23, 32, 51, 0.07);
  --shadow-md: 0 12px 30px rgba(23, 32, 51, 0.10);
  --shadow-lg: 0 28px 72px rgba(23, 32, 51, 0.15);
  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 36px rgba(23, 32, 51, 0.09);
  --shadow-glass-hover: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 20px 48px rgba(23, 32, 51, 0.13);
  --chart-grid: rgba(23, 32, 51, 0.12);
  --chart-tooltip: rgba(255, 255, 255, 0.98);
  --chart-banana: #825800;
  --chart-cyan: #00677A;
  --chart-violet: #5B3CC4;
  --chart-magenta: #9D176F;
  --chart-warning: #945500;
  --chart-success: #087A52;
  --chart-neutral: #687386;
  --mobile-drawer-bg: #FFFFFF;
  --mobile-drawer-scrim: rgba(23, 32, 51, 0.42);
  --mobile-drawer-shadow: 18px 0 54px rgba(23, 32, 51, 0.18), 1px 0 0 var(--border-color);
}

@media (max-width: 768px) {
  :root {
    --glass-blur: 14px;
    --ambient-opacity: 0.48;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-theme="light"] {
    --glass-blur: 0px;
    --glass-surface: var(--canvas-secondary);
    --glass-card: var(--panel);
    --glass-card-strong: var(--panel-elevated);
  }
}