/* =============================================================================
   Rozana Sales Co-Pilot · Design Tokens
   Single source of truth. Every component must reference these vars only.
   Spec: UI_REDESIGN_PLAN.md §3
   ============================================================================= */

:root {
  /* ── Surfaces (Modern SaaS — crisp white canvas, cool greys) ──── */
  --surface-0: #ffffff;   /* cards, raised */
  --surface-1: #f7f8fb;   /* app canvas */
  --surface-2: #eef0f6;   /* subtle fills, hover */
  --surface-3: #e3e6ef;   /* pressed, track */

  /* ── Text (indigo-ink) ────────────────────────────────────────── */
  --text-primary:   #1a1b2e;
  --text-secondary: #4a4d63;
  --text-tertiary:  #71748a;
  --text-inverse:   #ffffff;

  /* ── Borders ──────────────────────────────────────────────────── */
  --border-subtle:  #ebedf3;
  --border-default: #d8dbe6;
  --border-strong:  #b3b8c9;

  /* ── Brand (indigo) ───────────────────────────────────────────── */
  --brand-50:  #eef0ff;
  --brand-100: #e0e3ff;
  --brand-500: #4f46e5;
  --brand-600: #4338ca;
  --brand-700: #3730a3;
  --accent-500: #7c3aed; /* violet — accents, highlights */

  /* ── Semantic ─────────────────────────────────────────────────── */
  --success-50:  #e9f9ef;  --success-500: #16a34a;  --success-700: #15803d;
  --warning-50:  #fef5e7;  --warning-500: #f59e0b;  --warning-700: #b45309;
  --danger-50:   #fdecec;  --danger-500:  #dc2626;  --danger-700:  #b91c1c;
  --info-50:     #e8f1ff;  --info-500:    #2563eb;  --info-700:    #1d4ed8;

  /* ── Priority hues (chevron + label) ──────────────────────────── */
  --pri-high:    #dc2626;
  --pri-medium:  #f59e0b;
  --pri-low:     #16a34a;

  /* ── Typography (Atlassian Charlie / system stack) ────────────── */
  /* Atlassian Jira ships -apple-system / Segoe UI; Inter is a near-perfect
     substitute on all platforms and keeps headings crisp on Linux. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, "JetBrains Mono",
                Menlo, monospace;

  /* Atlassian type scale (sizes match @atlaskit/typography tokens) */
  --text-display-lg: 600 24px/28px var(--font-sans);  /* ui.heading.large  */
  --text-display:    600 20px/24px var(--font-sans);  /* ui.heading.medium */
  --text-heading:    600 16px/20px var(--font-sans);  /* ui.heading.small  */
  --text-body:       400 14px/20px var(--font-sans);  /* ui.font.body      */
  --text-body-strong:600 14px/20px var(--font-sans);  /* body emphasis     */
  --text-small:      400 12px/16px var(--font-sans);  /* ui.font.small     */
  --text-caption:    600 11px/14px var(--font-sans);  /* metadata/eyebrow  */
  --text-mono-sm:    450 12px/16px var(--font-mono);

  /* ── Spacing scale (Atlassian @atlaskit/tokens space.* — multiples of 4) */
  --space-1:  4px;   /* space.050 */
  --space-2:  8px;   /* space.100 */
  --space-3:  12px;  /* space.150 */
  --space-4:  16px;  /* space.200 */
  --space-5:  20px;  /* space.250 */
  --space-6:  24px;  /* space.300 */
  --space-8:  32px;  /* space.400 */
  --space-10: 40px;  /* space.500 */
  --space-12: 48px;  /* space.600 */

  /* ── Radius (modern SaaS — softer, more generous corners) ─────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ── Elevation (soft, diffuse — Linear/Stripe-style) ──────────── */
  --shadow-1:     0 1px 2px rgba(26,27,46,.06);
  --shadow-2:     0 2px 6px rgba(26,27,46,.07), 0 1px 2px rgba(26,27,46,.05);
  --shadow-3:     0 8px 24px -4px rgba(26,27,46,.10), 0 2px 6px rgba(26,27,46,.06);
  --shadow-modal: 0 20px 60px -8px rgba(26,27,46,.22), 0 4px 12px rgba(26,27,46,.10);

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --dur-hover:  120ms;
  --dur-drawer: 200ms;
  --dur-route:  320ms;

  /* ── Layout primitives (Jira-like compact chrome) ─────────────── */
  --topbar-height:        48px;          /* Jira global nav is 48px */
  --sidebar-width:        232px;         /* Jira default sidebar    */
  --sidebar-width-collapsed: 56px;
  --max-content-width:    1600px;
  --gutter:               var(--space-4);

  /* ── Z-index ladder ──────────────────────────────────────────── */
  --z-topbar:   100;
  --z-sidebar:  90;
  --z-drawer:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;
}

/* ── Dark theme override ───────────────────────────────────────── */
[data-theme="dark"] {
  --surface-0: #0c1119;
  --surface-1: #11161f;
  --surface-2: #1a202d;
  --surface-3: #232a3a;

  --text-primary:   #f1f3f8;
  --text-secondary: #b6bcca;
  --text-tertiary:  #828a9b;

  --border-subtle:  #232a3a;
  --border-default: #2f3849;
  --border-strong:  #44506b;

  --brand-50:  #1a2440;
  --brand-100: #1f2d54;

  --success-50: #122a1d;
  --warning-50: #2d2110;
  --danger-50:  #2d1518;
  --info-50:    #122230;

  --shadow-1:     0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.20);
  --shadow-2:     0 4px 12px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow-3:     0 12px 32px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.30);
  --shadow-modal: 0 24px 80px rgba(0,0,0,.60);
}

/* Product decision: LIGHT ONLY for now. The [data-theme="dark"] block above is
   kept so a future top-bar toggle can opt in explicitly, but we intentionally
   do NOT auto-switch to dark on system preference — every page stays light. */

/* =============================================================================
   Base reset + element defaults
   ============================================================================= */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-1);
  color: var(--text-primary);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--brand-600);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-standard);
}
a:hover  { color: var(--brand-700); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); letter-spacing: -0.01em; }
h1 { font: var(--text-display-lg); }
h2 { font: var(--text-display); }
h3 { font: var(--text-heading); }

p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: inherit;
}
button:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:disabled { cursor: not-allowed; opacity: 0.5; }

code, pre { font: var(--text-mono-sm); }

/* Utility: visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Utility: scroll containers get the same scrollbar treatment */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface-1);
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* =============================================================================
   RESPONSIVE — phone base layer (≤768px). ADDITIVE: desktop is untouched.
   Component-level mobile rules live in components.css; this block covers the
   base elements (body bleed, raw <table> scroll, comfortable tap targets).
   Relies on the existing #toggleSidebar hamburger → toggleSidebar() which sets
   .app-shell[data-sidebar="open"|"closed"] for the off-canvas drawer.
   ============================================================================= */
@media (max-width: 768px) {
  /* No accidental horizontal page bleed; let inner regions own their scroll. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Any raw table (incl. inline-styled ones) becomes a horizontal-scroll
     region instead of crushing columns or pushing the layout off-screen. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Comfortable tap targets for field RMs (≥36px) without resizing desktop. */
  button, .btn, a.btn, select, input[type="button"], input[type="submit"] {
    min-height: 36px;
  }
  .btn--sm { min-height: 32px; }
}