/* MODS Design System — tokens (light theme). Copied from the MODS Design System artifact; dark theme omitted (not used). */

/* ============================================================
   MODS — Color tokens
   Identity: graphite ink + orange→red "flame" gradient.
   Light is primary; dark overrides live in [data-theme="dark"].
   ============================================================ */

:root {
  /* ---- Brand: the flame ---- */
  --brand-50:  #FEF3EC;
  --brand-100: #FDE3D3;
  --brand-200: #FBC4A4;
  --brand-300: #FCA877;
  --brand-400: #FA7A3C;
  --brand-500: #F2531A;   /* base flame */
  --brand-600: #E0410F;   /* primary actions / hover */
  --brand-700: #C0330F;   /* pressed */
  --brand-800: #9A2C10;
  --brand-900: #7A2611;

  --mods-orange: #F76C11;
  --mods-red:    #CF3721;
  /* Signature gradient — emblem wings & wordmark "S" */
  --brand-gradient: linear-gradient(118deg, #FB7A18 0%, #E5391B 100%); /* @kind color */
  --brand-gradient-soft: linear-gradient(118deg, #FEF1E8 0%, #FDE7E2 100%); /* @kind color */

  /* ---- Neutral ramp (graphite) ---- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFAFB;
  --gray-50:  #F4F5F7;
  --gray-100: #ECEEF1;
  --gray-150: #E3E6EA;
  --gray-200: #D6DAE0;
  --gray-300: #BBC1CA;
  --gray-400: #929AA5;
  --gray-500: #6C7480;
  --gray-600: #4E555F;
  --gray-700: #373C44;
  --gray-800: #24282E;
  --gray-900: #15181D;
  --gray-950: #0C0E11;

  /* ---- Status palette (the colour-coded car states) ---- */
  --status-booked:    #2F6FED;  /* Записан · Booked        */
  --status-onsite:    #7C5CFC;  /* На территории · On-site */
  --status-waiting:   #0891B2;  /* В ожидании · Waiting (added for MODS Finance) */
  --status-progress:  #F59E0B;  /* В работе · In progress  */
  --status-ready:     #16A34A;  /* Готов к выдаче · Ready   */
  --status-delivered: #6B7280;  /* Выдан · Delivered       */
  --status-noshow:    #E5484D;  /* Отказ · No-show         */

  /* ---- Work-type accents (paired with icons) ---- */
  --wt-repair:   #4E555F;  /* Ремонт · Repair          */
  --wt-diag:     #2F6FED;  /* Диагностика · Diagnostics */
  --wt-complex:  #7C5CFC;  /* Комплексная · Complex     */
  --wt-service:  #0E9F8E;  /* Подготовка к ТО · Service */

  /* ---- Semantic feedback ---- */
  --info:    #2F6FED;
  --success: #16A34A;
  --warning: #F59E0B;
  --danger:  #E5484D;

  /* ---- Semantic surfaces (LIGHT) ---- */
  --bg-app:         var(--gray-50);   /* app canvas behind cards */
  --bg-base:        var(--gray-0);
  --surface-card:   var(--gray-0);
  --surface-raised: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --surface-hover:  var(--gray-50);
  --surface-active: var(--gray-100);
  --surface-inverse:var(--gray-900);

  /* ---- Borders ---- */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-150);
  --border-strong:  var(--gray-200);
  --border-inverse: var(--gray-700);

  /* ---- Text & icon ---- */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-muted:     var(--gray-400);
  --text-inverse:   var(--gray-0);
  --text-brand:     var(--brand-600);
  --icon-default:   var(--gray-600);
  --icon-muted:     var(--gray-400);
  --icon-brand:     var(--brand-600);

  /* ---- Soft tints — auto-adapt to any surface via color-mix ---- */
  --brand-soft:      color-mix(in srgb, var(--brand-500) 11%, var(--surface-card));
  --status-booked-soft:    color-mix(in srgb, var(--status-booked) 13%, var(--surface-card));
  --status-onsite-soft:    color-mix(in srgb, var(--status-onsite) 13%, var(--surface-card));
  --status-waiting-soft:   color-mix(in srgb, var(--status-waiting) 13%, var(--surface-card));
  --status-progress-soft:  color-mix(in srgb, var(--status-progress) 15%, var(--surface-card));
  --status-ready-soft:     color-mix(in srgb, var(--status-ready) 13%, var(--surface-card));
  --status-delivered-soft: color-mix(in srgb, var(--status-delivered) 13%, var(--surface-card));
  --status-noshow-soft:    color-mix(in srgb, var(--status-noshow) 13%, var(--surface-card));
  --info-soft:    color-mix(in srgb, var(--info) 12%, var(--surface-card));
  --success-soft: color-mix(in srgb, var(--success) 13%, var(--surface-card));
  --warning-soft: color-mix(in srgb, var(--warning) 15%, var(--surface-card));
  --danger-soft:  color-mix(in srgb, var(--danger) 13%, var(--surface-card));

  /* ---- Focus ring ---- */
  --ring-brand:  0 0 0 3px color-mix(in srgb, var(--brand-500) 32%, transparent);
  --ring-danger: 0 0 0 3px color-mix(in srgb, var(--danger) 32%, transparent);

  color-scheme: light;
}

/* ============================================================
   DARK THEME
   ============================================================ */

/* ============================================================
   MODS — Typography tokens
   Manrope (UI) + JetBrains Mono (data). RU-first, EN labels.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Size scale (px) ---- */
  --fs-micro:      11px;   /* uppercase eyebrow / overline */
  --fs-caption:    12px;   /* meta, helper text            */
  --fs-sm:         13px;   /* dense table cells, secondary  */
  --fs-body:       14px;   /* default UI body              */
  --fs-body-lg:    16px;   /* comfortable reading          */
  --fs-h3:         18px;
  --fs-h2:         22px;
  --fs-h1:         26px;
  --fs-display:    32px;
  --fs-display-lg: 40px;

  /* ---- Line heights ---- */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.3;  /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-relaxed: 1.6;  /* @kind font */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;   /* @kind font */
  --tracking-snug:   -0.01em;   /* @kind font */
  --tracking-normal: 0;         /* @kind font */
  --tracking-wide:   0.04em;    /* @kind font */
  --tracking-caps:   0.08em;    /* @kind font */

  /* ---- Numeric / tabular default for data fonts ---- */
  --num-tabular: "tnum" 1, "lnum" 1; /* @kind font */
}

/* Tabular numbers helper — money, counters, plates */
.mods-tnum { font-variant-numeric: tabular-nums lining-nums; }

/* ============================================================
   MODS — Spacing scale (4px base grid)
   ============================================================ */

:root {
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Common semantic gaps */
  --gap-inline:    var(--space-2);   /* icon ↔ label        */
  --gap-control:   var(--space-3);   /* between form fields */
  --gap-card:      var(--space-4);   /* inside a card       */
  --gap-section:   var(--space-8);   /* between sections    */

  /* Layout rails */
  --sidebar-w:        248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:         60px;
  --content-max:      1320px;
}

/* ============================================================
   MODS — Radius tokens
   Calm SaaS: soft but not pill-y. Cards 14px.
   ============================================================ */

:root {
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;    /* inputs, buttons, chips */
  --radius-lg:   12px;   /* dropdowns, popovers     */
  --radius-card: 14px;   /* cards, panels           */
  --radius-xl:   18px;   /* large surfaces, modals  */
  --radius-2xl:  24px;
  --radius-pill: 999px;  /* tags, avatars, toggles  */
}

/* ============================================================
   MODS — Elevation / shadow tokens
   Soft, layered, low-contrast. Minimal SaaS — shadows whisper.
   ============================================================ */

:root {
  --shadow-xs: 0 1px 2px rgba(15, 18, 25, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 18, 25, 0.08), 0 1px 2px rgba(15, 18, 25, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 18, 25, 0.08), 0 2px 4px rgba(15, 18, 25, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 18, 25, 0.12), 0 4px 8px rgba(15, 18, 25, 0.05);
  --shadow-xl: 0 24px 56px rgba(15, 18, 25, 0.16), 0 8px 16px rgba(15, 18, 25, 0.06);

  /* Hairline border that doubles as separation on white */
  --shadow-border: 0 0 0 1px var(--border-default);

  /* Flame glow — reserved for emphasis (primary CTA hover, active nav) */
  --shadow-flame: 0 6px 18px color-mix(in srgb, var(--brand-500) 32%, transparent);
}

/* ============================================================
   MODS — Motion tokens
   Quick, calm, no bounce. Ease-out for entrances, snappy on input.
   ============================================================ */

:root {
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   180ms;   /* @kind other */
  --dur-slow:   240ms;   /* @kind other */
  --dur-slower: 320ms;   /* @kind other */

  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);        /* @kind other */
  --ease-standard: var(--ease-out);                 /* @kind other */

  /* Reusable composite transitions */
  --transition-colors: color var(--dur-fast) var(--ease-out),
                        background-color var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        box-shadow var(--dur-fast) var(--ease-out); /* @kind other */
  --transition-transform: transform var(--dur-fast) var(--ease-out); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms; /* @kind other */
    --dur-base:   0ms; /* @kind other */
    --dur-slow:   0ms; /* @kind other */
    --dur-slower: 0ms; /* @kind other */
  }
}