/* css/base.css — Mat Window */

:root {
  --font-display: 'Archivo', 'Segoe UI', sans-serif;
  --font-body: 'Archivo', 'Segoe UI', sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.14s;
  --t-med: 0.2s;
  --t-slow: 0.32s;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;
  --rule: 1px;
}

[data-theme="midnight"] {
  --bg: #0c1220;
  --bg-1: #141b2d;
  --bg-2: #1c2540;
  --bg-3: #263052;
  --bg-4: #33406a;
  --glass: #141b2d;
  --border: #31406a;
  --border-2: #51649a;
  --text: #e7ecf8;
  --text-2: #a7b3d0;
  --text-3: #7383a8;
  --accent: #7c8cff;
  --accent-2: #6270e6;
  --accent-text: #f7f8ff;
  --accent-soft: rgba(124, 140, 255, 0.16);
  --accent-glow: transparent;
  --grad: #7c8cff;
  --grad-soft: rgba(124, 140, 255, 0.12);
  --danger: #ef6b78;
  --danger-soft: rgba(239, 107, 120, 0.16);
  --success: #63c59a;
  --warn: #e2b15a;
  --shadow: 0 18px 40px rgba(4, 8, 20, 0.42);
  --shadow-sm: 0 8px 18px rgba(4, 8, 20, 0.28);
  --bevel-hi: #31406a;
  --bevel-lo: #070b14;
  --mat-void: #070b14;
  --on-void: #e7ecf8;
}

[data-theme="dark"] {
  --bg: #111111;
  --bg-1: #181818;
  --bg-2: #222222;
  --bg-3: #2c2c2c;
  --bg-4: #383838;
  --glass: #181818;
  --border: #3a3a3a;
  --border-2: #5a5a5a;
  --text: #f2f2f2;
  --text-2: #b5b5b5;
  --text-3: #7d7d7d;
  --accent: #d8d8d8;
  --accent-2: #bdbdbd;
  --accent-text: #141414;
  --accent-soft: rgba(216, 216, 216, 0.12);
  --accent-glow: transparent;
  --grad: #d8d8d8;
  --grad-soft: rgba(216, 216, 216, 0.08);
  --danger: #e06a62;
  --danger-soft: rgba(224, 106, 98, 0.16);
  --success: #73b98a;
  --warn: #d4b15a;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.3);
  --bevel-hi: #3a3a3a;
  --bevel-lo: #050505;
  --mat-void: #050505;
  --on-void: #f2f2f2;
}

[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-1: #ffffff;
  --bg-2: #eef0f3;
  --bg-3: #e3e6eb;
  --bg-4: #d5d9e0;
  --glass: #ffffff;
  --border: #d5d9e0;
  --border-2: #a8b0bc;
  --text: #17191d;
  --text-2: #4d5562;
  --text-3: #7b8492;
  --accent: #2457d6;
  --accent-2: #1b45ad;
  --accent-text: #f7f9ff;
  --accent-soft: rgba(36, 87, 214, 0.1);
  --accent-glow: transparent;
  --grad: #2457d6;
  --grad-soft: rgba(36, 87, 214, 0.08);
  --danger: #c43737;
  --danger-soft: rgba(196, 55, 55, 0.1);
  --success: #1f7a45;
  --warn: #9a6b10;
  --shadow: 0 16px 36px rgba(23, 25, 29, 0.1);
  --shadow-sm: 0 6px 16px rgba(23, 25, 29, 0.08);
  --bevel-hi: #ffffff;
  --bevel-lo: #d5d9e0;
  --mat-void: #17191d;
  --on-void: #f7f8fa;
}

[data-theme="ocean"] {
  --bg: #07161c;
  --bg-1: #0d212a;
  --bg-2: #14303c;
  --bg-3: #1c3e4d;
  --bg-4: #275266;
  --glass: #0d212a;
  --border: #24566a;
  --border-2: #3d7d96;
  --text: #e5f4f8;
  --text-2: #a4c6d2;
  --text-3: #6f97a6;
  --accent: #2cb5c9;
  --accent-2: #1d93a4;
  --accent-text: #042126;
  --accent-soft: rgba(44, 181, 201, 0.16);
  --accent-glow: transparent;
  --grad: #2cb5c9;
  --grad-soft: rgba(44, 181, 201, 0.12);
  --danger: #ef6d78;
  --danger-soft: rgba(239, 109, 120, 0.16);
  --success: #49c49a;
  --warn: #e2b15a;
  --shadow: 0 18px 40px rgba(2, 12, 16, 0.42);
  --shadow-sm: 0 8px 18px rgba(2, 12, 16, 0.28);
  --bevel-hi: #24566a;
  --bevel-lo: #041014;
  --mat-void: #041014;
  --on-void: #e5f4f8;
}

[data-theme="forest"] {
  --bg: #101610;
  --bg-1: #172117;
  --bg-2: #203020;
  --bg-3: #2a3d2a;
  --bg-4: #365036;
  --glass: #172117;
  --border: #355335;
  --border-2: #567856;
  --text: #e8f3e6;
  --text-2: #adc2aa;
  --text-3: #769476;
  --accent: #7dbe62;
  --accent-2: #62964a;
  --accent-text: #10200c;
  --accent-soft: rgba(125, 190, 98, 0.16);
  --accent-glow: transparent;
  --grad: #7dbe62;
  --grad-soft: rgba(125, 190, 98, 0.12);
  --danger: #e2746a;
  --danger-soft: rgba(226, 116, 106, 0.16);
  --success: #8ed07a;
  --warn: #d6b35a;
  --shadow: 0 18px 40px rgba(6, 12, 6, 0.4);
  --shadow-sm: 0 8px 18px rgba(6, 12, 6, 0.26);
  --bevel-hi: #355335;
  --bevel-lo: #070c07;
  --mat-void: #070c07;
  --on-void: #e8f3e6;
}

[data-theme="amber"] {
  --bg: #16120c;
  --bg-1: #211a12;
  --bg-2: #2d2418;
  --bg-3: #3b2f1e;
  --bg-4: #4d3d26;
  --glass: #211a12;
  --border: #5a4630;
  --border-2: #8a6c48;
  --text: #f6eedf;
  --text-2: #cbb89a;
  --text-3: #9a8464;
  --accent: #e0a04a;
  --accent-2: #c48432;
  --accent-text: #24180a;
  --accent-soft: rgba(224, 160, 74, 0.16);
  --accent-glow: transparent;
  --grad: #e0a04a;
  --grad-soft: rgba(224, 160, 74, 0.12);
  --danger: #e06a58;
  --danger-soft: rgba(224, 106, 88, 0.16);
  --success: #7db87a;
  --warn: #f0c56a;
  --shadow: 0 18px 40px rgba(12, 8, 4, 0.42);
  --shadow-sm: 0 8px 18px rgba(12, 8, 4, 0.28);
  --bevel-hi: #5a4630;
  --bevel-lo: #0c0906;
  --mat-void: #0c0906;
  --on-void: #f6eedf;
}

[data-theme="aurora"] {
  --bg: #10141c;
  --bg-1: #171d28;
  --bg-2: #212838;
  --bg-3: #2b3448;
  --bg-4: #38445e;
  --glass: #171d28;
  --border: #3a4660;
  --border-2: #62708f;
  --text: #eef3fb;
  --text-2: #b7c3d8;
  --text-3: #8494b0;
  --accent: #5ec8b8;
  --accent-2: #3eaa9a;
  --accent-text: #06211c;
  --accent-soft: rgba(94, 200, 184, 0.16);
  --accent-glow: transparent;
  --grad: #5ec8b8;
  --grad-soft: rgba(94, 200, 184, 0.12);
  --danger: #ef7384;
  --danger-soft: rgba(239, 115, 132, 0.16);
  --success: #73c99a;
  --warn: #e2b15a;
  --shadow: 0 18px 40px rgba(6, 10, 18, 0.42);
  --shadow-sm: 0 8px 18px rgba(6, 10, 18, 0.28);
  --bevel-hi: #3a4660;
  --bevel-lo: #080c14;
  --mat-void: #080c14;
  --on-void: #eef3fb;
}

[data-theme="rose"] {
  --bg: #160f14;
  --bg-1: #22161d;
  --bg-2: #301f2a;
  --bg-3: #402836;
  --bg-4: #543446;
  --glass: #22161d;
  --border: #5d3a4c;
  --border-2: #8d5d74;
  --text: #f8eef3;
  --text-2: #d2b4c2;
  --text-3: #a48494;
  --accent: #e16d9a;
  --accent-2: #c45280;
  --accent-text: #2a0d18;
  --accent-soft: rgba(225, 109, 154, 0.16);
  --accent-glow: transparent;
  --grad: #e16d9a;
  --grad-soft: rgba(225, 109, 154, 0.12);
  --danger: #ef6a62;
  --danger-soft: rgba(239, 106, 98, 0.16);
  --success: #79c392;
  --warn: #e2b15a;
  --shadow: 0 18px 40px rgba(16, 6, 12, 0.42);
  --shadow-sm: 0 8px 18px rgba(16, 6, 12, 0.28);
  --bevel-hi: #5d3a4c;
  --bevel-lo: #0c070a;
  --mat-void: #0c070a;
  --on-void: #f8eef3;
}

/* D50 — viewing white, print check (the light board) */
[data-theme="daylight"] {
  --bg: #eceae4;
  --bg-1: #f7f5ef;
  --bg-2: #eeece6;
  --bg-3: #e2e0d8;
  --bg-4: #d4d2c8;
  --glass: #f7f5ef;
  --border: #1c1914;
  --border-2: #7a766c;
  --text: #1c1914;
  --text-2: #4a463e;
  --text-3: #7a766c;
  --accent: #c43c1a;
  --accent-2: #a32e12;
  --accent-text: #f7f5ef;
  --accent-soft: rgba(196, 60, 26, 0.08);
  --accent-glow: transparent;
  --grad: #c43c1a;
  --grad-soft: rgba(196, 60, 26, 0.06);
  --danger: #9b1c12;
  --danger-soft: rgba(155, 28, 18, 0.1);
  --success: #2f5a38;
  --warn: #8a6a12;
  --shadow: 0 16px 36px rgba(28, 25, 20, 0.12);
  --shadow-sm: 0 6px 16px rgba(28, 25, 20, 0.08);
  --bevel-hi: #ffffff;
  --bevel-lo: #c8c4b8;
  --mat-void: #1c1914;
  --on-void: #f7f5ef;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--accent); color: var(--accent-text); }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  caret-color: var(--accent);
  transition: background var(--t-med) var(--ease-smooth), color var(--t-med) var(--ease-smooth);
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button:focus, input:focus, select:focus, textarea:focus { outline: none; }
button:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible,
.icon-btn:focus-visible,
.dropdown-trigger:focus-visible,
.aspect-cell:focus-visible,
.gen-btn:focus-visible,
.model-row:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
a { color: var(--accent); text-decoration: none; }

.icon    { width: 16px; height: 16px; stroke-width: 1.75; flex-shrink: 0; }
.icon-sm { width: 13px; height: 13px; }
.icon-lg { width: 20px; height: 20px; }
.flag { width: 18px; height: 13px; border-radius: var(--r-xs); flex-shrink: 0; }

.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--text); }

.reveal { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .auth-pulse, .stage-glow-pulse { animation: none; opacity: 0.2; }
  .model-row::before, .nav-item.active::before { animation: none; transition: none; }
  .btn, .icon-btn, .gen-btn, .chip, .model-row, .model-row .mr-icon, .seg-toggle button {
    transition: none;
  }
  .btn:active, .icon-btn:active, .gen-btn:active { transform: none; }
}

.model-badge {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
  background: transparent; color: var(--text-3);
  flex-shrink: 0;
}
.model-badge.latest { color: var(--accent); border-color: var(--accent); }
.model-badge.i2i    { color: var(--warn); border-color: var(--warn); }