/**
 * Trivx PMS — design tokens (Apple-style system)
 *
 * Canonical source: docs/design-system/DESIGN_SYSTEM.md
 * Brand: orange #F35B25 (accent), ink #26262D (text + solid actions), white #FFFFFF (surfaces).
 *
 * UI FLEXIBILITY CONTRACT:
 * - ALL colors, radii, type, spacing, motion live HERE (or shared component CSS).
 * - Pages emit structure + semantic classes only — no hex / one-off looks.
 * - One shell for admin/employee/client chrome.
 * - Redesign = edit tokens / shell / app.css — not every page.
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

/* Urdu / Arabic only — Latin stays Plus Jakarta Sans via unicode-range */
@font-face {
  font-family: 'Mehr Nastaliq Web';
  src: url('../fonts/MehrNastaliqWeb.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 112%;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  color-scheme: light;

  /* —— Brand orange family —— */
  --primary: #F35B25;
  --primary-rgb: 243, 91, 37;
  --primary-50: #FFF5F0;
  --primary-100: #FFE8DE;
  --primary-200: #FFD0BD;
  --primary-300: #FFB094;
  --primary-400: #F98458;
  --primary-500: #F35B25;
  --primary-600: #DC4A17;
  --primary-700: #B93C12;
  --primary-800: #933012;
  --primary-900: #782A12;

  --accent: #F35B25;
  --accent-rgb: 243, 91, 37;
  --accent-soft: rgba(243, 91, 37, 0.12);
  --accent-contrast: #FFFFFF;
  /* Orange dark enough for body-size text on white (links) */
  --accent-text: #C2410C;

  /* —— Brand ink family (#26262D) —— */
  --ink-rgb: 38, 38, 45;
  --canvas: #F5F5F7;
  --surface: #FFFFFF;
  --surface-soft: #F0F0F3;
  --surface-sunken: #EAEAEE;
  --surface-hover: rgba(38, 38, 45, 0.05);
  /* Legacy names: neutral chip / soft-button fills */
  --sand: #ECECF0;
  --sand-strong: #DFDFE5;

  --ink-strong: #26262D;
  --ink: #33333B;
  --ink-soft: #55555F;
  --ink-muted: #73737F;
  --ink-inverse: #FFFFFF;
  --ink-on-solid: #FFFFFF;

  --border-hairline: rgba(38, 38, 45, 0.08);
  --border-strong: rgba(38, 38, 45, 0.14);
  --border-ink: rgba(38, 38, 45, 0.5);

  /* Solid action (primary buttons = brand ink) */
  --solid: #26262D;
  --solid-hover: #3A3A44;
  --solid-soft: rgba(38, 38, 45, 0.06);

  --secondary: #26262D;
  --sidebar-bg: rgba(250, 250, 252, 0.78);
  --sidebar-ink: var(--ink);
  --sidebar-muted: var(--ink-muted);
  --sidebar-active-bg: rgba(38, 38, 45, 0.07);
  --sidebar-active-ink: var(--ink-strong);
  --topbar-bg: rgba(255, 255, 255, 0.72);

  /* —— Materials (translucent chrome) —— */
  --material-bar: rgba(255, 255, 255, 0.72);
  --material-thick: rgba(255, 255, 255, 0.86);
  --material-filter: saturate(180%) blur(20px);
  --material-edge: rgba(255, 255, 255, 0.6);
  --scrim: rgba(23, 23, 28, 0.32);

  /* —— Type —— */
  /* Mehr covers Urdu glyphs only (unicode-range); Plus Jakarta Sans for Latin */
  --font-urdu: 'Mehr Nastaliq Web';
  --font: 'Mehr Nastaliq Web', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font);
  --font-family-primary: var(--font);
  --font-family-secondary: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tracking is size-specific: tighten as text grows, body near 0 */
  --tracking-display: -0.025em;
  --tracking-title: -0.018em;
  --tracking-body: -0.006em;
  --leading-display: 1.1;
  --leading-title: 1.25;
  --leading-body: 1.5;

  /* —— Status —— */
  --positive: #16A34A;
  --positive-soft: rgba(22, 163, 74, 0.12);
  --negative: #E5484D;
  --negative-soft: rgba(229, 72, 77, 0.12);
  --caution: #D98A00;
  --caution-soft: rgba(245, 158, 11, 0.14);
  --info: #2F7BF5;
  --info-soft: rgba(47, 123, 245, 0.12);

  /* Charts: brand first, then distinct hues; grey is always "other" */
  --chart-ink: #26262D;
  --chart-1: #F35B25;
  --chart-2: #2F7BF5;
  --chart-3: #16A34A;
  --chart-4: #8B5CF6;
  --chart-5: #0EA5A4;
  --chart-6: #A3A3AE;

  --success: var(--positive);
  --ok: var(--positive);
  --good: var(--positive);
  --warn: var(--caution);
  --warning: var(--caution);
  --danger: var(--negative);

  /*
   * Radii:
   * --r-pill    = capsule — buttons, tags, segmented controls (fixed-height chrome)
   * --r-control = text inputs, select/date triggers
   * --r-field   = growable boxes (textarea, notes) — never 999px
   * --r-card / --r-inner = surfaces that grow with content
   */
  --r-card: 18px;
  --r-inner: 12px;
  --r-field: 12px;
  --r-control: 12px;
  --r-pill: 999px;
  --r-chip: 999px;
  --r-check: 6px;

  /* Bigger surfaces read as thicker: deeper, softer shadow */
  --shadow-soft: 0 1px 2px rgba(38, 38, 45, 0.05);
  --shadow-card: 0 1px 2px rgba(38, 38, 45, 0.05);
  --shadow-raised: 0 2px 6px rgba(38, 38, 45, 0.06), 0 14px 36px rgba(38, 38, 45, 0.12);
  --shadow-xl: 0 4px 12px rgba(38, 38, 45, 0.08), 0 28px 64px rgba(38, 38, 45, 0.2);
  --focus-ring: 0 0 0 3.5px rgba(243, 91, 37, 0.22);

  --control-h: 42px;
  --control-h-sm: 32px;
  --topbar-h: 3.5rem;

  /* —— Motion —— */
  /* Critically damped "spring" for UI that just appears (no overshoot) */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  /* Slight overshoot — only for momentum / confirmation moments */
  --ease-bounce: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --dur-press: 100ms;
  --dur-fast: 160ms;
  --dur-enter: 380ms;
  --dur-exit: 220ms;

  /* Scrollbars — floating rounded thumb on a clear track, no arrows */
  --sb-thumb: color-mix(in srgb, var(--ink-strong) 22%, transparent);
  --sb-thumb-hover: color-mix(in srgb, var(--ink-strong) 40%, transparent);
  --scroll-size: 12px;
  --scroll-thumb: var(--sb-thumb);
  --scroll-thumb-hover: var(--sb-thumb-hover);

  /* Legacy aliases */
  --bg-primary: var(--canvas);
  --bg-secondary: var(--surface);
  --text-primary: var(--ink-strong);
  --text-secondary: var(--ink-soft);
  --text-muted: var(--ink-muted);
  --border-primary: var(--border-strong);
  --border-secondary: var(--border-hairline);
  --border-focus: var(--accent);
  --input-bg: var(--surface-soft);
  --card-bg: var(--surface);
  --placeholder-color: var(--ink-muted);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Pale orange tints glow on dark surfaces — use translucent ones instead */
  --primary-50: rgba(243, 91, 37, 0.1);
  --primary-100: rgba(243, 91, 37, 0.2);
  --primary-200: rgba(243, 91, 37, 0.32);

  --canvas: #17171B;
  --surface: #212127;
  --surface-soft: #2C2C34;
  --surface-sunken: #1C1C21;
  --surface-hover: rgba(255, 255, 255, 0.06);
  --sand: #2F2F38;
  --sand-strong: #3C3C47;

  --ink-rgb: 245, 245, 247;
  --ink-strong: #F5F5F7;
  --ink: #E4E4EA;
  --ink-soft: #A9A9B6;
  --ink-muted: #8A8A97;
  --ink-inverse: #26262D;
  --ink-on-solid: #26262D;

  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-ink: rgba(255, 255, 255, 0.45);

  --solid: #F5F5F7;
  --solid-hover: #FFFFFF;
  --solid-soft: rgba(255, 255, 255, 0.08);

  --sidebar-bg: rgba(33, 33, 39, 0.78);
  --sidebar-active-bg: rgba(255, 255, 255, 0.09);
  --topbar-bg: rgba(33, 33, 39, 0.72);
  --material-bar: rgba(33, 33, 39, 0.72);
  --material-thick: rgba(33, 33, 39, 0.88);
  --material-edge: rgba(255, 255, 255, 0.08);
  --scrim: rgba(0, 0, 0, 0.5);

  --accent-soft: rgba(243, 91, 37, 0.22);
  --accent-text: #FF8A5C;
  --chart-ink: #A9A9B6;

  --positive: #3DD68C;
  --negative: #FF6369;
  --caution: #FFB224;
  --info: #6BA6FF;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.35), 0 28px 64px rgba(0, 0, 0, 0.55);
}

/* Accessibility signals — frostier / solid materials, firmer edges */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --sidebar-bg: #FAFAFC;
    --topbar-bg: #FFFFFF;
    --material-bar: #FFFFFF;
    --material-thick: #FFFFFF;
    --material-filter: none;
  }
  [data-theme="dark"] {
    --sidebar-bg: #1C1C21;
    --topbar-bg: #212127;
    --material-bar: #212127;
    --material-thick: #212127;
  }
}
@media (prefers-contrast: more) {
  [data-theme="dark"] {
    --sidebar-bg: #1C1C21;
    --topbar-bg: #212127;
    --material-bar: #212127;
    --material-thick: #212127;
    --material-filter: none;
    --border-hairline: rgba(255, 255, 255, 0.3);
    --border-strong: rgba(255, 255, 255, 0.5);
    --ink-muted: #C9C9D2;
  }
  :root:not([data-theme="dark"]) {
    --sidebar-bg: #FFFFFF;
    --topbar-bg: #FFFFFF;
    --material-bar: #FFFFFF;
    --material-thick: #FFFFFF;
    --material-filter: none;
    --border-hairline: rgba(38, 38, 45, 0.3);
    --border-strong: rgba(38, 38, 45, 0.5);
    --ink-muted: #55555F;
  }
}