/* =========================================================
   UTP Visual Foundation V1
   Canonical Design Tokens
   ---------------------------------------------------------
   Single source of truth for shared visual values.
   No component, layout, workspace or product rules here.
   ========================================================= */

:root {
    /* Brand / surfaces */
    --utp-color-bg: #f5f7fb;
    --utp-color-surface: #ffffff;
    --utp-color-surface-muted: #f8fafc;
    --utp-color-surface-dark: #07111f;

    --utp-color-primary: #ff5a3d;
    --utp-color-primary-dark: #e94a30;

    --utp-color-text: #0f172a;
    --utp-color-muted: #64748b;
    --utp-color-border: #e5e7eb;

    --utp-color-hotels: #2563eb;
    --utp-color-documents: #f59e0b;
    --utp-color-finance: #10b981;
    --utp-color-operations: #8b5cf6;

    --utp-color-danger: #ef4444;
    --utp-color-warning: #f59e0b;
    --utp-color-success: #10b981;

    /* Typography family */
    --utp-font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /*
     * Canonical semantic typography scale.
     * Dense operational UI deliberately uses 12–14px for labels/body.
     */
    --utp-type-micro: 11px;
    --utp-type-label: 12px;
    --utp-type-secondary: 13px;
    --utp-type-body: 14px;
    --utp-type-component-title: 16px;
    --utp-type-section-title: 20px;
    --utp-type-page-title: 24px;
    --utp-type-display: 30px;

    --utp-line-tight: 1.2;
    --utp-line-normal: 1.5;
    --utp-line-relaxed: 1.65;

    --utp-weight-regular: 400;
    --utp-weight-medium: 500;
    --utp-weight-semibold: 600;
    --utp-weight-bold: 700;
    --utp-weight-strong: 800;

    /*
     * Compatibility aliases.
     * Existing screens can migrate gradually without a visual break.
     */
    --utp-font-xs: 12px;
    --utp-font-sm: 14px;
    --utp-font-md: 16px;
    --utp-font-lg: 18px;
    --utp-font-xl: 24px;

    --utp-font-size-xs: var(--utp-type-label);
    --utp-font-size-sm: var(--utp-type-secondary);
    --utp-font-size-md: var(--utp-type-body);
    --utp-font-size-lg: var(--utp-type-component-title);
    --utp-font-size-xl: var(--utp-type-section-title);
    --utp-font-size-2xl: 28px;

    /* Radius */
    --utp-radius-sm: 8px;
    --utp-radius-md: 12px;
    --utp-radius-lg: 16px;
    --utp-radius-xl: 22px;
    --utp-radius-pill: 999px;

    /* Spacing */
    --utp-space-1: 4px;
    --utp-space-2: 8px;
    --utp-space-3: 12px;
    --utp-space-4: 16px;
    --utp-space-5: 20px;
    --utp-space-6: 24px;
    --utp-space-8: 32px;
    --utp-space-10: 40px;

    /* Shared control geometry */
    --utp-control-height-sm: 34px;
    --utp-control-height: 38px;
    --utp-control-height-lg: 44px;

    /* Borders */
    --utp-border-width: 1px;

    /* Elevation */
    --utp-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --utp-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --utp-shadow-shell: 0 24px 80px rgba(0, 0, 0, 0.28);

    /* Z-index */
    --utp-z-dropdown: 1000;
    --utp-z-sticky: 1020;
    --utp-z-modal: 1050;
    --utp-z-mobile-gate: 99999;

    /* Motion */
    --utp-transition: all .18s ease;
}


/* =========================================================
   UTP V2 Workspace UI Foundation
   Semantic aliases for all business workspaces.
   ---------------------------------------------------------
   Platform owns these shared visual values.
   Workspace CSS may compose and extend them for business-
   specific interfaces, but should consume these tokens
   instead of repeating literal shared values.
   ========================================================= */

:root {
    /* Core surfaces */
    --utp-ui-canvas: #f7f8fa;
    --utp-ui-surface: #ffffff;
    --utp-ui-surface-soft: #f6f8fb;
    --utp-ui-surface-subtle: #fbfcfd;
    --utp-ui-surface-dark: #1c2736;

    /* Core text */
    --utp-ui-text: #172235;
    --utp-ui-text-secondary: #526176;
    --utp-ui-text-muted: #8794a7;
    --utp-ui-text-on-dark: #ffffff;

    /* Borders */
    --utp-ui-border: #dfe4eb;
    --utp-ui-border-strong: #cfd6df;
    --utp-ui-border-accent: #ff6a47;

    /* Brand / states */
    --utp-ui-accent: #ff6a47;
    --utp-ui-accent-hover: #f45d39;
    --utp-ui-accent-soft: #fff3ee;
    --utp-ui-primary-action: #111b2d;
    --utp-ui-primary-action-hover: #1a2840;
    --utp-ui-success: #1f8f64;
    --utp-ui-warning: #b97817;
    --utp-ui-danger: #c7483d;

    /* Typography */
    --utp-ui-font-family: var(--utp-font-family);

    --utp-ui-font-display: 46px;
    --utp-ui-font-page-title: 30px;
    --utp-ui-font-section-title: 20px;
    --utp-ui-font-card-title: 16px;
    --utp-ui-font-body: 14px;
    --utp-ui-font-label: 13px;
    --utp-ui-font-helper: 12px;
    --utp-ui-font-meta: 12px;
    --utp-ui-font-eyebrow: 11px;

    --utp-ui-line-tight: 1.2;
    --utp-ui-line-body: 1.5;

    --utp-ui-weight-regular: 400;
    --utp-ui-weight-medium: 500;
    --utp-ui-weight-semibold: 600;
    --utp-ui-weight-bold: 700;
    --utp-ui-weight-strong: 800;

    /* Geometry */
    --utp-ui-radius-control: 12px;
    --utp-ui-radius-card: 14px;
    --utp-ui-radius-panel: 18px;
    --utp-ui-radius-workspace: 26px;
    --utp-ui-radius-pill: 999px;

    --utp-ui-border-width: 1px;

    /* Control sizes */
    --utp-ui-control-height-sm: 38px;
    --utp-ui-control-height: 44px;
    --utp-ui-control-height-lg: 52px;

    /* Spacing */
    --utp-ui-space-1: 4px;
    --utp-ui-space-2: 8px;
    --utp-ui-space-3: 12px;
    --utp-ui-space-4: 16px;
    --utp-ui-space-5: 20px;
    --utp-ui-space-6: 24px;
    --utp-ui-space-7: 28px;
    --utp-ui-space-8: 32px;
    --utp-ui-space-10: 40px;

    /* Canonical page rhythm */
    --utp-ui-page-gap: 20px;
    --utp-ui-panel-padding: 20px;
    --utp-ui-panel-padding-lg: 24px;
    --utp-ui-workspace-padding: 22px;

    /* Elevation */
    --utp-ui-shadow-none: none;
    --utp-ui-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.05);
    --utp-ui-shadow-control: 0 12px 28px rgba(255, 106, 71, 0.18);

    /* Navigation */
    --utp-ui-nav-height: 76px;
    --utp-ui-nav-radius: 22px;
    --utp-ui-nav-bg:
        linear-gradient(
            105deg,
            rgba(77, 66, 68, 0.98) 0%,
            rgba(47, 55, 68, 0.98) 100%
        );

    /* Dark instrument surface — search boards, operational rails, focused tools. */
    --utp-ui-instrument-bg:
        radial-gradient(circle at 16% -30%, rgba(245,121,59,.12), transparent 42%),
        linear-gradient(145deg, #151b29 0%, #0c1421 58%, #101725 100%);

    /* Dossier / secondary navigation */
    --utp-ui-tabs-height: 44px;
}


/* =========================================================
   UTP V2 Canonical Workspace Scale — Visual Lock Pass 1
   ---------------------------------------------------------
   Shared values validated against Commerce Hotels and the
   Hotel / Contract dossier screens.
   ========================================================= */

:root {
    --utp-ui-workspace-max-width: 1440px;
    --utp-ui-workspace-title-size: 40px;

    --utp-ui-font-page-title: 30px;
    --utp-ui-font-section-title: 21px;
    --utp-ui-font-card-title: 16px;
    --utp-ui-font-body: 14px;
    --utp-ui-font-label: 13px;
    --utp-ui-font-helper: 13px;
    --utp-ui-font-meta: 12px;
    --utp-ui-font-eyebrow: 12px;

    --utp-ui-control-height-sm: 38px;
    --utp-ui-control-height: 44px;
    --utp-ui-control-height-lg: 52px;
}