/*
 * TOP1 UI tokens — final values after the legacy app.css layer.
 * This file is deliberately small and stable: design decisions live here,
 * component polishing lives in polish.css, emergency guards live in safety.css.
 */
:root {
  color-scheme: light;

  /* Brand and surfaces */
  --top1-bg: #eef3f8;
  --top1-bg-elevated: #f7f9fc;
  --top1-surface: #ffffff;
  --top1-surface-alt: #f8fafc;
  --top1-surface-muted: #f1f5f9;
  --top1-panel-tint: #f3f7fb;
  --top1-text: #111827;
  --top1-text-strong: #0f172a;
  --top1-muted: #5b6677;
  --top1-muted-strong: #475569;
  --top1-border: #e2e8f0;
  --top1-border-strong: #cbd5e1;
  --top1-border-soft: rgba(148, 163, 184, 0.28);
  --top1-accent: #e30613;
  --top1-accent-hover: #c8000d;
  --top1-accent-soft: #fff1f2;
  --top1-accent-softer: #fff7f7;

  /* Unified TOP-1 reference system: shared by CRM login, TOP1 Client and TOP1 Staff. */
  --top1-ref-black: #05080b;
  --top1-ref-void: #000000;
  --top1-ref-carbon: #090d10;
  --top1-ref-panel: #0c1114;
  --top1-ref-panel-raised: #171b1f;
  --top1-ref-glass: rgba(12, 17, 20, 0.82);
  --top1-ref-line: rgba(216, 218, 220, 0.20);
  --top1-ref-line-soft: rgba(216, 218, 220, 0.10);
  --top1-ref-red: #e30613;
  --top1-ref-red-hot: #ff3038;
  --top1-ref-red-deep: #531718;
  --top1-ref-chrome: #e8ebf2;
  --top1-ref-silver: #b8bec8;
  --top1-ref-muted: #858a92;
  --top1-ref-green: #2dd36f;
  --top1-ref-radius-card: 28px;
  --top1-ref-radius-control: 13px;
  --top1-ref-shadow-card: 0 36px 90px rgba(0, 0, 0, 0.50);
  --top1-ref-red-glow: 0 0 28px rgba(227, 6, 19, 0.36);

  /* State colors */
  --top1-success: #12814a;
  --top1-success-soft: #ecfdf3;
  --top1-success-border: #b8e6c7;
  --top1-warning: #b45309;
  --top1-warning-soft: #fff7e8;
  --top1-warning-border: #f4d19a;
  --top1-danger: #c92a2a;
  --top1-danger-soft: #fff1f2;
  --top1-danger-border: #efb8b8;
  --top1-info: #2563eb;
  --top1-info-soft: #eff6ff;
  --top1-info-border: #bfdbfe;

  /* Sidebar */
  --top1-sidebar: #0d1828;
  --top1-sidebar-strong: #08111f;
  --top1-sidebar-border: rgba(255, 255, 255, 0.08);
  --top1-sidebar-text: rgba(248, 250, 252, 0.94);
  --top1-sidebar-text-muted: rgba(203, 213, 225, 0.72);

  /* Spacing. Keep legacy --top1-space-N compatible with app.css. */
  --top1-space-2xs: 4px;
  --top1-space-xs: 8px;
  --top1-space-sm: 12px;
  --top1-space-md: 16px;
  --top1-space-lg: 20px;
  --top1-space-xl: 24px;
  --top1-space-2xl: 32px;
  --top1-space-3xl: 40px;
  --top1-space-1: 8px;
  --top1-space-2: 12px;
  --top1-space-3: 16px;
  --top1-space-4: 20px;
  --top1-space-5: 24px;
  --top1-space-6: 28px;
  --top1-space-8: 36px;

  /* Shape */
  --top1-radius-xs: 6px;
  --top1-radius-sm: 8px;
  --top1-radius-md: 12px;
  --top1-radius-lg: 16px;
  --top1-radius-xl: 22px;
  --top1-radius-2xl: 28px;
  --top1-radius-pill: 999px;

  /* Layout */
  --top1-content-max: 1290px;
  --top1-container-max: 1280px;
  --top1-modal-max: 760px;
  --top1-touch-target: 44px;
  --top1-control-min-height: 42px;
  --top1-control-gap: var(--top1-space-xs);
  --top1-card-padding-sm: var(--top1-space-sm);
  --top1-card-padding-md: var(--top1-space-md);
  --top1-card-padding-lg: var(--top1-space-lg);
  --top1-safe-inline-padding: max(var(--top1-space-sm), env(safe-area-inset-left));

  /* Layers */
  --top1-z-base: 0;
  --top1-z-sticky: 30;
  --top1-z-dropdown: 180;
  --top1-z-popover: 260;
  --top1-z-dialog: 640;
  --top1-z-overlay: 900;
  --top1-z-toast: 1200;

  /* Shadows and rings */
  --top1-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --top1-shadow-card: 0 12px 30px rgba(15, 23, 42, 0.08);
  --top1-shadow-raised: 0 18px 48px rgba(15, 23, 42, 0.12);
  --top1-shadow-floating: 0 24px 70px rgba(15, 23, 42, 0.18);
  --top1-focus-ring: 0 0 0 3px rgb(227 6 19 / 0.18);

  /* Overlay bounds */
  --top1-dialog-max-height: min(86dvh, 760px);
  --top1-popover-max-height: min(72dvh, 520px);

  /* Typography */
  --top1-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --top1-font-size-xs: 11px;
  --top1-font-size-sm: 12px;
  --top1-font-size-md: 13px;
  --top1-font-size-lg: 15px;
  --top1-font-size-xl: 18px;
  --top1-line-height-tight: 1.18;
  --top1-line-height-body: 1.5;
}

html {
  overflow-x: clip;
  text-size-adjust: 100%;
}

@supports not (overflow-x: clip) {
  html {
    overflow-x: hidden;
  }
}

body {
  min-width: 0;
  background: var(--top1-bg);
  color: var(--top1-text);
  font-family: var(--top1-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
a,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

.top1-overlay-root,
.top1-popover-layer,
.top1-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: var(--top1-z-overlay);
  pointer-events: none;
  isolation: isolate;
}

.top1-overlay-root > *,
.top1-popover-layer > *,
.top1-dialog-layer > * {
  pointer-events: auto;
}

.top1-modal,
[role="dialog"] {
  max-width: min(100%, var(--top1-modal-max));
  max-height: var(--top1-dialog-max-height);
}

.top1-app,
.top1-client-app,
.top1-service-app,
.top1-portal-app,
.top1-app-shell,
.top1-app-main,
.top1-app-content,
.top1-workspace {
  min-width: 0;
}

.top1-app *,
.top1-client-app *,
.top1-service-app *,
.top1-portal-app * {
  min-width: 0;
}

.top1-modal,
.top1-dialog,
.top1-sheet,
.top1-popover {
  max-width: min(100%, var(--top1-modal-max-width, 960px));
  max-height: var(--top1-dialog-max-height);
}

.top1-popover,
.top1-dropdown,
.top1-menu {
  max-height: var(--top1-popover-max-height);
  overflow: auto;
  overscroll-behavior: contain;
}

.top1-button,
.top1-btn,
.top1-control,
.top1-input,
.top1-select,
.top1-app-button,
.top1-secondary-button,
.top1-primary-button {
  min-height: var(--top1-control-min-height);
}

.top1-button:focus-visible,
.top1-btn:focus-visible,
.top1-control:focus-visible,
.top1-input:focus-visible,
.top1-select:focus-visible,
.top1-app-button:focus-visible,
.top1-secondary-button:focus-visible,
.top1-primary-button:focus-visible,
.top1-app-nav-link:focus-visible,
.top1-link-button:focus-visible,
.top1-chip-button:focus-visible {
  outline: none;
  box-shadow: var(--top1-focus-ring);
}

@media (max-width: 767px) {
  :root {
    --top1-space-4: 18px;
    --top1-space-5: 20px;
    --top1-space-6: 24px;
    --top1-space-8: 28px;
    --top1-card-padding-md: var(--top1-space-sm);
    --top1-card-padding-lg: var(--top1-space-md);
  }

  .top1-modal,
  [role="dialog"] {
    max-width: calc(100dvw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top1-app *,
  .top1-client-app *,
  .top1-service-app *,
  .top1-portal-app *,
  .top1-app-shell * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* Iteration 06: semantic style-system tokens used by the refinement layer. */
:root {
  --top1-brand-red: #e30613;
  --top1-brand-red-strong: #b90410;
  --top1-brand-red-soft: #fff1f2;
  --top1-brand-blue: #2458d3;
  --top1-brand-blue-soft: #eef5ff;
  --top1-ink-950: #101827;
  --top1-ink-700: #334155;
  --top1-ink-600: #475569;
  --top1-ink-500: #64748b;
  --top1-ink-200: #e2e8f0;
  --top1-ink-50: #f8fafc;
  --top1-transition-fast: 150ms ease;
  --top1-transition-normal: 220ms ease;
  --top1-state-success-bg: #eefaf2;
  --top1-state-success-fg: #0f6b3d;
  --top1-state-warning-bg: #fff7eb;
  --top1-state-warning-fg: #9a4d00;
  --top1-state-danger-bg: #fff1f2;
  --top1-state-danger-fg: #b90410;
  --top1-state-info-bg: #eef5ff;
  --top1-state-info-fg: #174ea6;
}

/* TOP1 Unified Style System V1 — shared dark native/auth reference tokens.
 * These tokens are additive and safe: they do not alter planner/order behavior.
 */
:root {
  --top1-ref-void-black: #050608;
  --top1-ref-carbon: #0c0d10;
  --top1-ref-panel: #151619;
  --top1-ref-panel-raised: #242628;
  --top1-ref-line: #343538;
  --top1-ref-line-bright: #56585b;
  --top1-ref-warm-red-glass: #271c1e;
  --top1-ref-deep-red: #5b0d0f;
  --top1-ref-red: #d0171a;
  --top1-ref-red-dark: #a2090d;
  --top1-ref-chrome: #d2d3d7;
  --top1-ref-silver: #96989c;
  --top1-ref-radius-card: 28px;
  --top1-ref-radius-control: 14px;
  --top1-ref-control-height: 52px;
  --top1-ref-card-border: rgba(86, 88, 91, 0.72);
  --top1-ref-card-shadow: 0 30px 90px rgba(0, 0, 0, 0.48), 0 0 55px rgba(208, 23, 26, 0.12);
  --top1-ref-red-glow: 0 0 34px rgba(208, 23, 26, 0.28);
  --top1-ref-primary-gradient: linear-gradient(180deg, #ff2d31 0%, #d0171a 52%, #a2090d 100%);
  --top1-ref-panel-gradient: linear-gradient(135deg, rgba(36, 38, 40, 0.92) 0%, rgba(12, 13, 16, 0.98) 58%, rgba(5, 6, 8, 0.98) 100%);
  --top1-ref-screen-gradient: radial-gradient(circle at 72% 10%, rgba(208, 23, 26, 0.13), transparent 31%), radial-gradient(circle at 24% 58%, rgba(91, 13, 15, 0.20), transparent 34%), linear-gradient(180deg, #050608 0%, #0c0d10 56%, #050608 100%);
}