/**
 * OTIS Repair Lead Driver - Design Tokens
 * Single Source of Truth for all design values
 * v7.1.0 - OTIS Brand Font + Light Theme Only
 *
 * Single light theme using OTIS Brand colors.
 */

/* =========================================================
   OTIS BRAND FONT — @font-face declarations
   ========================================================= */
@font-face {
  font-family: 'OtisFont';
  src: url('/assets/font/OtisFont-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OtisFont';
  src: url('/assets/font/OtisFont-RegularItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'OtisFont';
  src: url('/assets/font/OtisFont-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OtisFont';
  src: url('/assets/font/OtisFont-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'OtisFont';
  src: url('/assets/font/OtisFont-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OtisFont';
  src: url('/assets/font/OtisFont-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   FONTS
   ========================================================= */
:root {
  --default-font: "OtisFont", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "OtisFont", sans-serif;
  --nav-font: "OtisFont", sans-serif;
  --mono-font: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code",
    "Roboto Mono", Consolas, "Courier New", monospace;
}

/* =========================================================
   SPACING SCALE
   ========================================================= */
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

/* =========================================================
   BORDER RADIUS
   ========================================================= */
:root {
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
}

/* =========================================================
   SHADOWS (light mode defaults)
   ========================================================= */
:root {
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 8px 20px -10px rgb(2 12 27 / 0.18),
    0 6px 12px -8px rgb(2 12 27 / 0.12);
  --shadow-lg: 0 16px 36px -16px rgb(2 12 27 / 0.26),
    0 10px 20px -10px rgb(2 12 27 / 0.14);
  --shadow-xl: 0 28px 60px -22px rgb(2 12 27 / 0.34),
    0 18px 28px -12px rgb(2 12 27 / 0.16);
}

/* =========================================================
   TRANSITIONS
   ========================================================= */
:root {
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* =========================================================
   LAYOUT DIMENSIONS
   ========================================================= */
:root {
  --header-height: 77px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 70px;
  --footer-height: 64px;
}

/* =========================================================
   LIGHT MODE PALETTE (default)
   OTIS Brand Colors — professional light theme
   ========================================================= */
:root {
  /* Core palette */
  --background-color: #F2F2F2;       /* Black at 5% */
  --default-color: #1c2635;
  --heading-color: #041E42;
  --accent-color: #001B3C;           /* OTIS Navy - matches header */
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  /* Extended text */
  --muted-color: #5f6e83;
  --light-color: #8ea0b8;

  /* Borders */
  --border-color: #dde5f1;
  --border-color-light: #eef3fa;
  --border-color-dark: #c4d2e6;

  /* Status — OTIS Priority Standard: Low=#28A745, Medium=#D27A00, High=#D32F2F */
  --success-color: #28A745;
  --success-color-light: #d4edda;
  --warning-color: #D27A00;
  --warning-color-light: #fff3cd;
  --danger-color: #D32F2F;
  --danger-color-light: #f8d7da;
  --info-color: #0284c7;
  --info-color-light: #e0f2fe;

  /* Navigation */
  --nav-color: var(--default-color);
  --nav-hover-color: var(--accent-color);
  --nav-mobile-background-color: var(--surface-color);
  --nav-dropdown-background-color: var(--surface-color);
  --nav-dropdown-color: var(--default-color);
  --nav-dropdown-hover-color: var(--accent-color);

  /* Header — OTIS Navy (consistent across themes) */
  --header-bg: #001B3C;              /* OTIS Navy */
  --header-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
  --header-border: #1A3A5C;          /* Slightly lighter navy border */
  --header-color: #ffffff;           /* Light text on dark header */
  --header-muted-color: #CCD2DA;     /* Navy 20% tint */
  --header-accent-color: #F65275;    /* Sunrise - always for dark header */

  /* Sidebar — OTIS Navy (consistent across themes) */
  --sidebar-bg: #001B3C;             /* OTIS Navy */
  --sidebar-border: #1A3A5C;         /* Slightly lighter navy border */
  --sidebar-color: #ffffff;          /* Bright white text */
  --sidebar-muted-color: #E0E6ED;    /* Off-white for high contrast */
  --sidebar-hover-bg: rgba(246, 82, 117, 0.15); /* Sunrise tint on hover */
  --sidebar-hover-color: #F65275;    /* Sunrise text on hover */
  --sidebar-active-bg: #F65275;      /* Sunrise accent */
  --sidebar-active-color: #ffffff;

  /* Footer — Matches header for consistent framing */
  --footer-bg: #001B3C;              /* OTIS Navy - matches header */
  --footer-border: #1A3A5C;          /* Slightly lighter navy border */
  --footer-color: #CCD2DA;           /* Navy 20% tint */

  /* Cards */
  --card-bg: #FFFFFF;                /* Solid white for clarity */
  --card-header-bg: #F5F7FA;         /* Light gray card header */
  --card-shadow: var(--shadow-md);
  --card-border: var(--border-color);

  /* Tables — OTIS Branded */
  --table-header-bg: #001B3C;
  --table-header-color: #FFFFFF;
  --table-header-border: #112749;
  --table-row-bg: #FFFFFF;
  --table-stripe-bg: #F7F9FC;
  --table-hover-bg: #E6F0FF;
  --table-cell-border: #E5E7EB;
  --table-selected-bg: #DCEAFE;
  --table-selected-accent: #FF6F3C;
  --table-container-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  /* Badge severity — OTIS Priority Standard */
  --badge-high-bg: #D32F2F;
  --badge-high-color: #FFFFFF;
  --badge-medium-bg: #D27A00;
  --badge-medium-color: #FFFFFF;
  --badge-low-bg: #28A745;
  --badge-low-color: #FFFFFF;
  /* Product tags */
  --product-tag-bg: #E3E9F2;
  --product-tag-color: #001B3C;

  /* Dropdown / Autocomplete — OTIS Branded */
  --dropdown-bg: #FFFFFF;
  --dropdown-border: #D1D5DB;
  --dropdown-separator: #E5E7EB;
  --dropdown-hover-bg: rgba(0, 27, 60, 0.08);
  --dropdown-hover-accent: #FF6F3C;
  --dropdown-text: #001B3C;
  --dropdown-text-secondary: #6B7280;
  --dropdown-icon-color: #001B3C;
  --dropdown-badge-bg: #001B3C;
  --dropdown-badge-color: #FFFFFF;
  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* Map — OTIS Branded */
  --map-bg: #FFFFFF;
  --map-border: #E5E7EB;
  --map-radius: 12px;
  --map-min-height: 240px;
  --map-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --map-popup-border: #D1D5DB;
  --map-popup-radius: 8px;
  --map-popup-text: #001B3C;
  --map-control-bg: #FFFFFF;
  --map-control-border: #D1D5DB;
  --map-control-icon: #001B3C;

  /* Forms */
  --input-bg: #ffffff;
  --input-border: var(--border-color);
  --input-color: var(--default-color);
  --input-focus-border: var(--accent-color);
  --input-focus-ring: rgb(0 51 160 / 0.25);

  /* Bootstrap overrides */
  --bs-body-color: var(--default-color);
  --bs-body-bg: transparent;
  --bs-primary: var(--accent-color);
  --bs-primary-rgb: 0, 51, 160;
}

/* =========================================================
   DESIGN TOKENS (semantic variables)
   ========================================================= */
:root {
  --token-font-sans: var(--default-font);
  --token-font-mono: var(--mono-font);

  --token-text-xs: 0.6875rem;
  --token-text-sm: 0.8125rem;
  --token-text-base: 0.875rem;
  --token-text-md: 1rem;
  --token-text-lg: 1.125rem;
  --token-text-xl: 1.25rem;
  --token-text-2xl: 1.5rem;
  --token-text-3xl: 1.875rem;

  --token-weight-normal: 400;
  --token-weight-medium: 500;
  --token-weight-semibold: 600;
  --token-weight-bold: 700;

  --token-leading-tight: 1.25;
  --token-leading-normal: 1.5;
  --token-leading-relaxed: 1.625;

  --token-tracking-tight: -0.025em;
  --token-tracking-normal: 0;
  --token-tracking-wide: 0.025em;
  --token-tracking-wider: 0.05em;

  --token-space-0: 0;
  --token-space-1: 0.25rem;
  --token-space-2: 0.5rem;
  --token-space-3: 0.75rem;
  --token-space-4: 1rem;
  --token-space-5: 1.25rem;
  --token-space-6: 1.5rem;
  --token-space-8: 2rem;
  --token-space-10: 2.5rem;
  --token-space-12: 3rem;
  --token-space-16: 4rem;

  --token-radius-none: 0;
  --token-radius-sm: var(--radius-sm);
  --token-radius-md: var(--radius-md);
  --token-radius-lg: var(--radius-lg);
  --token-radius-xl: var(--radius-xl);
  --token-radius-full: var(--radius-full);

  --token-border-thin: 1px;
  --token-border-medium: 2px;
  --token-border-thick: 4px;

  --token-z-base: 0;
  --token-z-dropdown: 100;
  --token-z-sticky: 200;
  --token-z-modal: 300;
  --token-z-popover: 400;
  --token-z-tooltip: 500;

  --token-duration-instant: 50ms;
  --token-duration-fast: 150ms;
  --token-duration-normal: 250ms;
  --token-duration-slow: 400ms;
  --token-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --token-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --token-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --token-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --token-neutral-900: var(--heading-color);
  --token-neutral-800: var(--default-color);
  --token-neutral-700: var(--default-color);
  --token-neutral-600: var(--muted-color);
  --token-neutral-500: var(--light-color);
  --token-neutral-300: var(--border-color);
  --token-neutral-200: var(--border-color-light);
  --token-neutral-100: var(--background-color);
  --token-neutral-0: var(--surface-color);

  --token-brand-primary: var(--accent-color);
  --token-brand-accent: var(--accent-color);

  --token-card-bg: var(--card-bg);
  --token-card-border: var(--card-border);
  --token-card-radius: var(--radius-lg);
  --token-card-shadow: var(--card-shadow);
  --token-card-padding: var(--token-space-5);

  --token-table-header-bg: var(--table-header-bg);
  --token-table-header-text: var(--table-header-color);
  --token-table-row-hover: var(--table-hover-bg);
  --token-table-border: var(--table-cell-border);
  --token-table-cell-padding: var(--token-space-3) var(--token-space-4);

  --token-btn-primary-bg: var(--accent-color);
  --token-btn-primary-text: var(--contrast-color);
  --token-btn-radius: var(--radius-md);
  --token-btn-padding: 0.6rem var(--token-space-4);

  --token-focus-ring: 0 0 0 3px var(--input-focus-ring);

  --token-chart-1: var(--accent-color);
  --token-chart-2: var(--danger-color);
  --token-chart-3: var(--info-color);
  --token-chart-4: var(--warning-color);
  --token-chart-5: #7c3aed;
  --token-chart-6: var(--success-color);
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --token-duration-instant: 0ms;
    --token-duration-fast: 0ms;
    --token-duration-normal: 0ms;
    --token-duration-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}