/* ==========================================================================
   Goodt 2026 Canonical Design System Tokens (APP_DESIGN_STANDARD.md)
   Brand: GOOD.T — И точка!
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: var(--font-sans);
  background-color: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* Typography */
  --font-sans: 'Golos Text', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Geometry & Strict Rectangular Radius (Goodt 2026 Standard: 2px) */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 3px;
  --radius-pill: 2px; /* Strictly no oval pills */
  --radius: 2px;

  /* Spacings */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme (Default Warm Clean Canvas) */
[data-theme="light"], :root:not([data-theme="dark"]) {
  /* Canvas & Surfaces */
  --paper: #F3F6F4;
  --paper-raised: #FFFFFF;
  --color-canvas: #F3F6F4;
  --color-surface-soft: #E8F0E9;
  --color-surface-card: #FFFFFF;
  --color-surface-card-hover: #F8FAF9;
  --color-surface-cream-strong: #FAF1E5;
  --color-surface-dark: #1B2430;
  --color-surface-dark-elevated: #242F3E;
  --color-surface-dark-soft: #2D3A4B;

  /* Ink & Typography */
  --ink: #1B2430;
  --ink-soft: #3C4A59;
  --ink-muted: #6C7F93;
  --color-ink: #1B2430;
  --color-body-strong: #1B2430;
  --color-body: #3C4A59;
  --color-muted: #6C7F93;
  --color-muted-soft: #8CA3B5;

  /* Brand Colors: Teal (#2E7A6E), Steel (#46607A), Amber (#C96A22) */
  --teal: #2E7A6E;
  --teal-hover: #246359;
  --teal-soft: #DCEBE7;
  --color-primary: #2E7A6E;
  --color-primary-active: #246359;
  --color-primary-disabled: #DCE3E6;
  --color-on-primary: #FFFFFF;

  --steel: #46607A;
  --steel-soft: #DCE3E6;

  --amber: #C96A22;
  --amber-soft: #FAF1E5;
  --color-warning: #C96A22;

  --red: #B3261E;
  --red-soft: #F5DCD9;
  --color-error: #B3261E;
  --color-success: #2E7A6E;

  /* Borders & Shadows */
  --line: #DCE3E6;
  --line-strong: rgba(27, 36, 48, 0.24);
  --color-hairline: #DCE3E6;
  --color-hairline-soft: #E5ECE9;

  --shadow: 0 1px 2px rgba(20, 26, 33, 0.05), 0 8px 24px -12px rgba(20, 26, 33, 0.12);
  --shadow-subtle: 0 1px 2px rgba(20, 26, 33, 0.04);
  --shadow-card: 0 1px 3px rgba(27, 36, 48, 0.06), 0 8px 20px -12px rgba(27, 36, 48, 0.12);
  --shadow-modal: 0 16px 40px -10px rgba(20, 26, 33, 0.22);

  --statusbar-bg: #FFFFFF;
  --input-bg: #FFFFFF;
  --input-border: #DCE3E6;
  --input-focus: #2E7A6E;
}

/* Dark Theme (Graphite Navy Surfaces) */
[data-theme="dark"] {
  /* Canvas & Surfaces */
  --paper: #141A20;
  --paper-raised: #1B232B;
  --color-canvas: #141A20;
  --color-surface-soft: #1E2730;
  --color-surface-card: #1B232B;
  --color-surface-card-hover: #222C36;
  --color-surface-cream-strong: #2D3A4B;
  --color-surface-dark: #10151A;
  --color-surface-dark-elevated: #182028;
  --color-surface-dark-soft: #1E2730;

  /* Ink & Typography */
  --ink: #E7EAE6;
  --ink-soft: #B7C0C6;
  --ink-muted: #8CA3B5;
  --color-ink: #E7EAE6;
  --color-body-strong: #E7EAE6;
  --color-body: #B7C0C6;
  --color-muted: #8CA3B5;
  --color-muted-soft: #6C7F93;

  /* Brand Colors */
  --teal: #59B0A0;
  --teal-hover: #489B8C;
  --teal-soft: #173430;
  --color-primary: #59B0A0;
  --color-primary-active: #489B8C;
  --color-primary-disabled: #2A3642;
  --color-on-primary: #FFFFFF;

  --steel: #8CA3B5;
  --steel-soft: #26323C;

  --amber: #E58A45;
  --amber-soft: #3A2A1A;
  --color-warning: #E58A45;

  --red: #E5675C;
  --red-soft: #3A211E;
  --color-error: #E5675C;
  --color-success: #59B0A0;

  /* Borders & Shadows */
  --line: rgba(231, 234, 230, 0.14);
  --line-strong: rgba(231, 234, 230, 0.26);
  --color-hairline: rgba(231, 234, 230, 0.14);
  --color-hairline-soft: rgba(231, 234, 230, 0.08);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px -12px rgba(0, 0, 0, 0.55);
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 20px 48px -10px rgba(0, 0, 0, 0.65);

  --statusbar-bg: #1B232B;
  --input-bg: #141A20;
  --input-border: rgba(231, 234, 230, 0.2);
  --input-focus: #59B0A0;
}

/* Theme-adaptive Brand Logos */
.logo-light {
  display: inline-block;
}

.logo-dark {
  display: none;
}

[data-theme="dark"] .logo-light {
  display: none !important;
}

[data-theme="dark"] .logo-dark {
  display: inline-block !important;
}

/* Universal Button Styles */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  background-color: var(--teal);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 2px rgba(27, 36, 48, 0.08);
}

.btn-primary:hover {
  background-color: var(--teal-hover);
  box-shadow: 0 2px 6px rgba(46, 122, 110, 0.25);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-primary:disabled {
  background-color: var(--color-primary-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background-color: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--teal);
  color: var(--teal);
  background-color: var(--paper);
}

/* Universal Form Controls */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.form-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background-color: var(--input-bg, var(--paper-raised));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}