/*
 * SIG Inventory — Design Tokens (v1.2)
 *
 * Pinned surface system. Every UI color in the application MUST come from
 * one of the variables below. New surfaces require an amendment to
 * design.md § 2.1, not an ad-hoc hex.
 *
 * Color values are stored as space-separated RGB triplets so Tailwind can
 * compose them with alpha (e.g. `bg-canvas/80`).
 */

:root,
:root.dark {
  /* ──────────────────────────── Surfaces ─────────────────────────── */
  --canvas:               11  15  23;   /* #0B0F17 — app background       */
  --canvas-deep:           7  10  18;   /* deeper navy for gradients      */
  --sidebar:              17  24  39;   /* #111827 — sidebar background   */
  --surface-1:            21  27  36;   /* #151B24 — primary card         */
  --surface-1-top:        26  34  46;   /* card gradient highlight        */
  --surface-2:            27  36  48;   /* #1B2430 — secondary / hover    */
  --surface-input:        15  22  33;   /* #0F1621 — inputs               */
  --surface-table-head:   26  35  48;   /* #1A2330 — table header row     */

  --scrim:                11  15  23;

  /* ──────────────────────────── Borders ──────────────────────────── */
  --border:               38  50  68;   /* #263244                        */
  --border-strong:        50  65  88;   /* #324158                        */
  --border-subtle:        31  42  57;   /* #1F2A39                        */

  /* ───────────────────────────── Text ────────────────────────────── */
  --text-primary:        243 244 246;   /* #F3F4F6                        */
  --text-secondary:      148 163 184;   /* #94A3B8                        */
  --text-muted:          100 116 139;   /* #64748B                        */
  --text-on-brand:         6  37  26;   /* #06251A                        */

  /* ─────────────────────────── Brand (emerald) ───────────────────── */
  --brand-400:            52 211 153;   /* #34D399                        */
  --brand-500:            16 185 129;   /* #10B981                        */
  --brand-600:             5 150 105;   /* #059669                        */
  --brand-700:             4 120  87;   /* #047857                        */

  /* ─────────────────────────── Semantic ──────────────────────────── */
  --success:              16 185 129;
  --info:                 59 130 246;
  --warning:             245 158  11;
  --danger:              239  68  68;
  --neutral:             100 116 139;
  --pending:             167 139 250;
  --repair:              249 115  22;

  /* ───────────────────────────── Radii ───────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-card: 16px;   /* 14–18px card corners             */
  --radius-full: 9999px;

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

  /* ──────────────────────────── Sizing ───────────────────────────── */
  --input-height:     44px;
  --input-height-sm:  36px;
  --input-height-lg:  46px;
  --sidebar-width:   260px;
  --sidebar-rail:     72px;

  /* ─────────────────────────── Elevation ─────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40),
               0 2px 4px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.40),
               0 8px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.45),
               0 24px 48px rgba(0, 0, 0, 0.30);

  /* ────────────────────────────── Motion ─────────────────────────── */
  --motion-fast:     120ms;
  --motion-base:     180ms;
  --motion-slow:     240ms;
  --motion-emphasis: 320ms;
  --ease-out:        cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis:   cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}