/* TyapTerm — themes: CSS variables for fonts, sizing, animations, and color themes */

:root {
  /* Fonts */
  --font-mono: 'Consolas', monospace;
  --font-ui: 'Segoe UI', 'Tahoma', 'Geneva', sans-serif;
  --font-terminal: 'Consolas', monospace;

  /* Sizing */
  --titlebar-h: 40px;
  --sidebar-w: 300px;
  --footer-h: 28px;
  --tab-h: 40px;
  --tab-max-w: 210px;
  --border-r: 3px;
  --modal-w: 440px;

  /* Animations */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slide: 300ms;
}

/* ===============================================
   DARK THEME
   =============================================== */
[data-theme="dark"] {
  --bg: #141416;
  --bg-warm: #18181b;
  --surface: #1e1f23;
  --surface-2: #26272c;
  --surface-3: #2e2f35;
  --surface-raised: #32333a;

  --text-1: #e8e6e3;
  --text-2: #a09e9a;
  --text-3: #6b6966;
  --text-disabled: #4a4845;

  --border-1: #2a2b30;
  --border-2: #383940;
  --border-3: #44454d;

  --accent: #3d8fd1;
  --accent-glow: rgba(61, 143, 209, 0.15);
  --accent-hover: #4da0e3;

  --green: #3fb950;
  --green-dim: #2ea043;
  --green-glow: rgba(63, 185, 80, 0.12);
  --red: #f85149;
  --red-dim: #d32f2f;
  --red-glow: rgba(248, 81, 73, 0.12);
  --orange: #f0883e;
  --orange-dim: #d07020;
  --orange-glow: rgba(240, 136, 62, 0.12);
  --codex-mint: #35d6a6;
  --codex-mint-glow: rgba(53, 214, 166, 0.12);
  --cyan: #56d4dd;
  --cyan-dim: #39b8c0;
  --purple: #bc8cff;
  --purple-dim: #9d6fe0;
  --blue: #58a6ff;
  --yellow: #e3b341;

  --ssh-color: #69ffb4;
  --telnet-color: #ff8a80;
  --ftp-color: #4dd0e1;
  --remote-color: #bc8cff;
  --rdp-color: #ff9e64;
  --local-color: #ffb74d;
  --powershell-color: #58a6ff;

  --titlebar-bg: #0e0e10;
  --sidebar-bg: #1a1b1f;
  --sidebar-hover: #2a2b30;
  --input-bg: #26272c;
  --input-border: #383940;
  --input-focus: #3d8fd1;

  --scrollbar-bg: #141416;
  --scrollbar-thumb: #383940;
  --scrollbar-thumb-hover: #4a4b52;

  --terminal-bg: #0d0d0f;
  --terminal-fg: #c8c8c8;
  --terminal-cursor: #c8c8c8;
  --terminal-selection: #264f78;

  --scrim: rgba(0, 0, 0, 0.72);
  --shadow-1: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.6);

  --grain-opacity: 0.03;
  --glow-strength: 0.06;
}

/* ===============================================
   LIGHT THEME
   =============================================== */
[data-theme="light"] {
  --bg: #f0eeeb;
  --bg-warm: #f5f3f0;
  --surface: #ffffff;
  --surface-2: #f7f6f4;
  --surface-3: #eeedea;
  --surface-raised: #ffffff;

  --text-1: #1a1a1a;
  --text-2: #555555;
  --text-3: #888888;
  --text-disabled: #b0b0b0;

  --border-1: #e0dedb;
  --border-2: #cccac6;
  --border-3: #b8b6b2;

  --accent: #0969da;
  --accent-glow: rgba(9, 105, 218, 0.08);
  --accent-hover: #0860ca;

  --green: #1a7f37;
  --green-dim: #2da44e;
  --green-glow: rgba(45, 164, 78, 0.08);
  --red: #cf222e;
  --red-dim: #d32f2f;
  --red-glow: rgba(207, 34, 46, 0.08);
  --orange: #bf5a12;
  --orange-dim: #d07020;
  --orange-glow: rgba(191, 90, 18, 0.08);
  --codex-mint: #168a66;
  --codex-mint-glow: rgba(22, 138, 102, 0.10);
  --cyan: #0284a8;
  --cyan-dim: #0997b3;
  --purple: #7c3aed;
  --purple-dim: #6d28d9;
  --blue: #0969da;
  --yellow: #9a6700;

  --ssh-color: #1a7f37;
  --telnet-color: #cf222e;
  --ftp-color: #0284a8;
  --remote-color: #7c3aed;
  --rdp-color: #c2590a;
  --local-color: #bf5a12;
  --powershell-color: #0969da;

  --titlebar-bg: #e8e6e3;
  --sidebar-bg: #f5f3f0;
  --sidebar-hover: #e8e6e3;
  --input-bg: #ffffff;
  --input-border: #cccac6;
  --input-focus: #0969da;

  --scrollbar-bg: #f0eeeb;
  --scrollbar-thumb: #cccac6;
  --scrollbar-thumb-hover: #b0aea9;

  --terminal-bg: #fafaf8;
  --terminal-fg: #1a1a1a;
  --terminal-cursor: #1a1a1a;
  --terminal-selection: #add6ff;

  --scrim: rgba(0, 0, 0, 0.36);
  --shadow-1: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.16);

  --grain-opacity: 0.015;
  --glow-strength: 0.03;
}

/* ===============================================
   TYAP-DARK THEME (from TyapTerm dark.json)
   =============================================== */
[data-theme="tyap-dark"] {
  --bg: #1e1e1e;
  --bg-warm: #1e1e1e;
  --surface: #252526;
  --surface-2: #2d2d2d;
  --surface-3: #2d2d2d;
  --surface-raised: #353839;

  --text-1: #e0e0e0;
  --text-2: #969696;
  --text-3: #888888;
  --text-disabled: #5a5a5a;

  --border-1: #3c3c3c;
  --border-2: #454545;
  --border-3: #454545;

  --accent: #0e639c;
  --accent-glow: rgba(14, 99, 156, 0.15);
  --accent-hover: #1177bb;

  --green: #2ea043;
  --green-dim: #2ea043;
  --green-glow: rgba(46, 160, 67, 0.12);
  --red: #d32f2f;
  --red-dim: #d32f2f;
  --red-glow: rgba(211, 47, 47, 0.12);
  --orange: #ffb74d;
  --orange-dim: #f0883e;
  --orange-glow: rgba(255, 183, 77, 0.12);
  --codex-mint: #48ddb4;
  --codex-mint-glow: rgba(72, 221, 180, 0.12);
  --cyan: #4dd0e1;
  --cyan-dim: #39b8c0;
  --purple: #ba68c8;
  --purple-dim: #9c27b0;
  --blue: #2196f3;
  --yellow: #ffeb3b;

  --ssh-color: #69ffb4;
  --telnet-color: #ff8a80;
  --ftp-color: #4dd0e1;
  --remote-color: #ba68c8;
  --rdp-color: #ff9e64;
  --local-color: #ffb74d;
  --powershell-color: #42a5f5;

  --titlebar-bg: #121212;
  --sidebar-bg: #252526;
  --sidebar-hover: #3e3e42;
  --input-bg: #3c3c3c;
  --input-border: #444444;
  --input-focus: #0e639c;

  --scrollbar-bg: #151515;
  --scrollbar-thumb: #444444;
  --scrollbar-thumb-hover: #555555;

  --terminal-bg: #1a1a1a;
  --terminal-fg: #e0e0e0;
  --terminal-cursor: #ffffff;
  --terminal-selection: #264f78;

  --scrim: rgba(0, 0, 0, 0.70);
  --shadow-1: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.55);

  --grain-opacity: 0.02;
  --glow-strength: 0.05;
}

/* ===============================================
   TYAP-LIGHT THEME (from TyapTerm light.json)
   =============================================== */
[data-theme="tyap-light"] {
  --bg: #f3f3f3;
  --bg-warm: #f3f3f3;
  --surface: #ffffff;
  --surface-2: #e5e5e5;
  --surface-3: #e5e5e5;
  --surface-raised: #e0e0e0;

  --text-1: #202020;
  --text-2: #505050;
  --text-3: #666666;
  --text-disabled: #a0a0a0;

  --border-1: #c0c0c0;
  --border-2: #d0d0d0;
  --border-3: #d0d0d0;

  --accent: #007acc;
  --accent-glow: rgba(0, 122, 204, 0.08);
  --accent-hover: #0062a3;

  --green: #2da44e;
  --green-dim: #2da44e;
  --green-glow: rgba(45, 164, 78, 0.08);
  --red: #d32f2f;
  --red-dim: #d32f2f;
  --red-glow: rgba(211, 47, 47, 0.08);
  --orange: #f9a825;
  --orange-dim: #e65100;
  --orange-glow: rgba(249, 168, 37, 0.08);
  --codex-mint: #00866d;
  --codex-mint-glow: rgba(0, 134, 109, 0.10);
  --cyan: #0184bc;
  --cyan-dim: #0997b3;
  --purple: #a626a4;
  --purple-dim: #a626a4;
  --blue: #0451a5;
  --yellow: #7a5c00;

  --ssh-color: #2e7d32;
  --telnet-color: #c62828;
  --ftp-color: #00838f;
  --remote-color: #a626a4;
  --rdp-color: #c2590a;
  --local-color: #e65100;
  --powershell-color: #1565c0;

  --titlebar-bg: #f3f3f3;
  --sidebar-bg: #f3f3f3;
  --sidebar-hover: #e0e0e0;
  --input-bg: #ffffff;
  --input-border: #c0c0c0;
  --input-focus: #007acc;

  --scrollbar-bg: #f3f3f3;
  --scrollbar-thumb: #c0c0c0;
  --scrollbar-thumb-hover: #999999;

  --terminal-bg: #f5f5f5;
  --terminal-fg: #1a1a1a;
  --terminal-cursor: #000000;
  --terminal-selection: #add6ff;

  --scrim: rgba(0, 0, 0, 0.30);
  --shadow-1: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.14);

  --grain-opacity: 0.01;
  --glow-strength: 0.02;
}
