﻿/* =============================================================
   INNOVANDO ORDER SUMMARY - Theme & Design Tokens
   ============================================================= */

:root {
  /* Brand palette */
  --in-primary: #1a3a5c;          /* Deep navy - corporate, professional */
  --in-primary-hover: #122a44;
  --in-primary-soft: #e8eef5;
  --in-accent: #00a3a3;            /* Teal - tech accent */
  --in-accent-hover: #008a8a;
  --in-accent-soft: #e0f5f5;

  /* Status colors */
  --status-development: #6c757d;
  --status-development-bg: #f0f1f3;
  --status-under-approval: #d97706;
  --status-under-approval-bg: #fef3e2;
  --status-pre-approved: #6f42c1;
  --status-pre-approved-bg: #ece5f7;
  --status-converted: #15803d;
  --status-converted-bg: #e6f5ec;
  --status-aborted: #991b1b;
  --status-aborted-bg: #fce8e8;

  /* Neutral palette */
  --in-bg: #f5f6f8;
  --in-surface: #ffffff;
  --in-surface-alt: #fafbfc;
  --in-border: #e4e7ec;
  --in-border-strong: #d0d5dd;
  --in-text: #1a1f2e;
  --in-text-muted: #6b7280;
  --in-text-subtle: #9ca3af;

  /* Semantic */
  --in-success: #15803d;
  --in-warning: #d97706;
  --in-danger: #b91c1c;
  --in-info: #0369a1;

  /* Layout */
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 68px;
  --topbar-height: 64px;
  --content-max-width: 1400px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(16, 24, 40, 0.10), 0 4px 8px rgba(16, 24, 40, 0.06);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

/* Override Bootstrap primary to match brand */
.btn-primary {
  --bs-btn-bg: var(--in-primary);
  --bs-btn-border-color: var(--in-primary);
  --bs-btn-hover-bg: var(--in-primary-hover);
  --bs-btn-hover-border-color: var(--in-primary-hover);
  --bs-btn-active-bg: var(--in-primary-hover);
  --bs-btn-active-border-color: var(--in-primary-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--in-primary);
  --bs-btn-border-color: var(--in-primary);
  --bs-btn-hover-bg: var(--in-primary);
  --bs-btn-hover-border-color: var(--in-primary);
  --bs-btn-active-bg: var(--in-primary);
}

.btn-accent {
  background-color: var(--in-accent);
  border-color: var(--in-accent);
  color: white;
}
.btn-accent:hover {
  background-color: var(--in-accent-hover);
  border-color: var(--in-accent-hover);
  color: white;
}

.text-primary { color: var(--in-primary) !important; }
.bg-primary { background-color: var(--in-primary) !important; }
.text-accent { color: var(--in-accent) !important; }

a { color: var(--in-primary); }
a:hover { color: var(--in-primary-hover); }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  background-color: var(--in-bg);
  color: var(--in-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-weight: 600;
}

.fs-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.text-muted-2 { color: var(--in-text-muted); }
.text-subtle { color: var(--in-text-subtle); }

.font-mono { font-family: var(--font-mono); }
