/* ============================================================
   Techelev8 POS — design tokens
   The single source of colour, space, type, radius, shadow and motion.
   No component file may declare a raw hex value.
   ============================================================ */

:root {
  /* ---------- brand ---------- */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;   /* primary */
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;

  --brand:      var(--brand-600);
  --brand-hover:var(--brand-700);
  --brand-soft: var(--brand-50);
  --brand-ink:  #FFFFFF;
  --brand-gradient: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);

  /* ---------- accent (secondary emphasis, positive money) ---------- */
  --accent-50:  #ECFDF5;
  --accent-500: #14B8A6;
  --accent-600: #0D9488;
  --accent-700: #0F766E;
  --accent:      var(--accent-600);
  --accent-soft: var(--accent-50);

  /* ---------- semantic ---------- */
  --success:      #059669;
  --success-soft: #ECFDF5;
  --success-ink:  #065F46;
  --warning:      #D97706;
  --warning-soft: #FFFBEB;
  --warning-ink:  #92400E;
  --danger:       #DC2626;
  --danger-soft:  #FEF2F2;
  --danger-ink:   #991B1B;
  --info:         #0284C7;
  --info-soft:    #F0F9FF;
  --info-ink:     #075985;

  /* ---------- neutrals ---------- */
  --bg:          #F6F7FB;   /* page ground */
  --bg-subtle:   #EEF0F6;
  --surface:     #FFFFFF;   /* cards, sheets */
  --surface-2:   #F8FAFC;   /* inset areas, table heads */
  --surface-3:   #F1F5F9;   /* hover, chips */
  --border:      #E7EAF0;   /* hairlines */
  --border-strong: #D5DAE3; /* inputs, dividers that must read */
  --text:        #0F172A;   /* primary copy */
  --text-2:      #556070;   /* secondary copy */
  --text-3:      #8A93A3;   /* meta, placeholders */
  --overlay:     rgba(15, 23, 42, .48);

  /* ---------- typography ---------- */
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: 2.125rem;  /* 34 — hero figures */
  --text-h1:      1.5rem;    /* 24 */
  --text-h2:      1.1875rem; /* 19 */
  --text-h3:      1rem;      /* 16 */
  --text-body:    0.9375rem; /* 15 */
  --text-sm:      0.8125rem; /* 13 */
  --text-xs:      0.75rem;   /* 12 */
  --text-cap:     0.6875rem; /* 11 — uppercase labels */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* ---------- space (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* ---------- radius ---------- */
  --r-xs:  6px;
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------- elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .07);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 32px rgba(15, 23, 42, .10);
  --shadow-xl: 0 8px 16px rgba(15, 23, 42, .06), 0 24px 56px rgba(15, 23, 42, .16);
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);

  /* ---------- motion ---------- */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast:   .12s;
  --normal: .2s;
  --slow:   .32s;

  /* ---------- layout ---------- */
  --sidebar-w:           264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h:            64px;
  --bottomnav-h:         62px;
  --content-max:         1440px;

  --z-sticky: 40;
  --z-nav:    50;
  --z-overlay:100;
  --z-modal:  110;
  --z-toast:  200;

  color-scheme: light;
}

/* ============================================================
   Dark mode — rebuilt surfaces, not inverted colours.
   Elevation rises by getting lighter, as real materials do.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:          #0B0F17;
    --bg-subtle:   #0F1420;
    --surface:     #151B26;
    --surface-2:   #1B2230;
    --surface-3:   #232B3B;
    --border:      #232A38;
    --border-strong: #333C4D;
    --text:        #E9EDF4;
    --text-2:      #A3AEC0;
    --text-3:      #737F93;
    --overlay:     rgba(2, 6, 14, .66);

    --brand-500: #818CF8;
    --brand-600: #6366F1;
    --brand-700: #818CF8;
    --brand:      #6D6BF2;
    --brand-hover:#7E7CF5;
    --brand-soft: #1D1F3D;
    --brand-gradient: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);

    --accent:      #2DD4BF;
    --accent-soft: #0C2C29;

    --success: #34D399;  --success-soft: #0B2A22; --success-ink: #6EE7B7;
    --warning: #FBBF24;  --warning-soft: #2C2110; --warning-ink: #FCD34D;
    --danger:  #F87171;  --danger-soft:  #2C1416; --danger-ink:  #FCA5A5;
    --info:    #38BDF8;  --info-soft:    #0C2233; --info-ink:    #7DD3FC;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, .55);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, .62);
  }
}

/* Explicit dark selection wins in both directions. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0B0F17;
  --bg-subtle:   #0F1420;
  --surface:     #151B26;
  --surface-2:   #1B2230;
  --surface-3:   #232B3B;
  --border:      #232A38;
  --border-strong: #333C4D;
  --text:        #E9EDF4;
  --text-2:      #A3AEC0;
  --text-3:      #737F93;
  --overlay:     rgba(2, 6, 14, .66);

  --brand-500: #818CF8;
  --brand-600: #6366F1;
  --brand-700: #818CF8;
  --brand:      #6D6BF2;
  --brand-hover:#7E7CF5;
  --brand-soft: #1D1F3D;
  --brand-gradient: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);

  --accent:      #2DD4BF;
  --accent-soft: #0C2C29;

  --success: #34D399;  --success-soft: #0B2A22; --success-ink: #6EE7B7;
  --warning: #FBBF24;  --warning-soft: #2C2110; --warning-ink: #FCD34D;
  --danger:  #F87171;  --danger-soft:  #2C1416; --danger-ink:  #FCA5A5;
  --info:    #38BDF8;  --info-soft:    #0C2233; --info-ink:    #7DD3FC;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, .55);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, .62);
}

/* Respect a reduced-motion preference everywhere, once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}