/* ============================================================
   JLek POS — Design System
   Mirror of reference/elegant-till/src/styles.css
   (c) 2026 JLek POS
   ============================================================
   This is the SINGLE source of truth for all visual tokens.
   Every component CSS should reference these variables.
   Never hard-code colors, spacing, radius, or shadows.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================
     1. COLOR TOKENS
     Values migrated from reference elegant-till.
     Reference uses oklch for perceptual uniformity.
     ========================================= */

  /* ---- Surface / Background ---- */
  --canvas:    oklch(0.985 0.005 95);        /* warm paper */
  --bg:        oklch(0.985 0.005 95);        /* alias, backwards compatible */
  --panel:     oklch(1 0 0);                 /* white card/panel */
  --card:      oklch(1 0 0);                 /* card background */
  --surface:   oklch(1 0 0);                 /* general surface (alias) */
  --popover:   oklch(1 0 0);                 /* dropdown / dialog bg */

  /* ---- Text ---- */
  --ink:       oklch(0.16 0.012 260);       /* primary text */
  --ink-soft:  oklch(0.32 0.012 260);       /* secondary text */
  --ink-mute:  oklch(0.52 0.010 260);       /* muted / hint text */
  --muted:     oklch(0.52 0.010 260);       /* alias */
  --foreground: oklch(0.18 0.012 260);       /* readable foreground */

  /* ---- Borders ---- */
  --line:      oklch(0.92 0.006 95);         /* hairline / border */
  --hairline:  oklch(0.92 0.006 95);         /* alias */
  --border:    oklch(0.90 0.008 95);         /* standard border */
  --input:     oklch(0.90 0.008 95);         /* input border */
  --ring:      oklch(0.42 0.12 158);         /* focus ring (emerald) */

  /* ---- Brand / Primary ---- */
  --primary:           oklch(0.42 0.12 158);  /* deep emerald */
  --primary-foreground: oklch(0.985 0.005 95); /* white on primary */
  --primary-soft:      oklch(0.94 0.04 158); /* light emerald bg */

  /* ---- Secondary ---- */
  --secondary:           oklch(0.96 0.006 95);
  --secondary-foreground: oklch(0.18 0.012 260);

  /* ---- Accent ---- */
  --accent:           oklch(0.94 0.04 158);
  --accent-foreground: oklch(0.30 0.09 158);

  /* ---- Muted surface ---- */
  --muted-bg:         oklch(0.955 0.006 95);
  --muted-foreground: oklch(0.52 0.010 260);

  /* ---- Destructive / Danger ---- */
  --destructive:           oklch(0.55 0.20 24);
  --destructive-foreground: oklch(0.985 0.005 95);
  --danger:                oklch(0.55 0.20 24); /* alias */

  /* ---- Status semantics (table + kitchen lifecycle) ---- */
  --status-available:    oklch(0.96 0.05 158);
  --status-available-ink: oklch(0.36 0.11 158);
  --status-occupied:    oklch(0.95 0.045 75);
  --status-occupied-ink: oklch(0.42 0.13 60);
  --status-kitchen:     oklch(0.94 0.045 240);
  --status-kitchen-ink:  oklch(0.40 0.14 245);
  --status-pay:         oklch(0.94 0.06 20);
  --status-pay-ink:      oklch(0.45 0.18 22);
  --status-served:      oklch(0.94 0.02 260);
  --status-served-ink:   oklch(0.35 0.02 260);

  /* ---- Success / Warning / Info (semantic) ---- */
  --success: oklch(0.42 0.12 158);
  --warning: oklch(0.42 0.13 60);
  --info:    oklch(0.40 0.14 245);

  /* =========================================
     2. TYPOGRAPHY
     ========================================= */

  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- Font sizes ---- */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.8125rem;  /* 13px */
  --text-md:   0.875rem;   /* 14px */
  --text-lg:   0.9375rem;  /* 15px */
  --text-xl:   1.125rem;   /* 18px */
  --text-2xl:  1.25rem;    /* 20px */
  --text-3xl:  1.5rem;     /* 24px */

  /* ---- Font weights ---- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Line heights ---- */
  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* =========================================
     3. SPACING SCALE (4px grid)
     ========================================= */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Aliases (backwards compatible) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;

  /* =========================================
     4. RADIUS
     ========================================= */

  --radius-base: 0.75rem;  /* 12px (reference: --radius: 0.75rem) */

  --radius-sm:  calc(var(--radius-base) - 4px); /* 8px */
  --radius-md:  calc(var(--radius-base) - 2px); /* 10px */
  --radius-lg:  var(--radius-base);             /* 12px */
  --radius-xl:  calc(var(--radius-base) + 4px); /* 16px */
  --radius-2xl: calc(var(--radius-base) + 8px); /* 20px */
  --radius-3xl: calc(var(--radius-base) + 12px);/* 24px */

  /* ---- Aliases ---- */
  --radius-xs: 4px;

  /* =========================================
     5. SHADOWS
     ========================================= */

  --shadow-panel: 0 1px 0 0 color-mix(in oklab, var(--ink) 6%, transparent),
                  0 1px 2px 0 color-mix(in oklab, var(--ink) 4%, transparent);

  --shadow-raise: 0 10px 30px -12px color-mix(in oklab, var(--ink) 18%, transparent),
                  0 2px 6px -2px color-mix(in oklab, var(--ink) 10%, transparent);

  --shadow-none:  0 0 0 0 transparent;
  --shadow-sm:    var(--shadow-panel);
  --shadow-md:    var(--shadow-raise);
  --shadow-lg:    0 16px 40px color-mix(in oklab, var(--ink) 12%, transparent);

  /* =========================================
     6. SURFACE SYSTEM
     ========================================= */

  --surface-page:    var(--canvas);
  --surface-panel:   var(--panel);
  --surface-card:    var(--card);
  --surface-toolbar: var(--muted-bg);
  --surface-section: var(--panel);
  --surface-dialog:  var(--popover);
  --surface-sidebar: var(--panel);

  /* =========================================
     7. MOTION / TRANSITION
     ========================================= */

  --duration-fast:   150ms;
  --duration-normal: 220ms;
  --duration-slow:   350ms;

  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 0.6, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast:   var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
}

/* =========================================
   8. BASE STYLES
   ========================================= */

*, *::before, *::after {
  border-color: var(--border);
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--canvas);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* App-shell page contract (global — crosses layout CSS isolation).
   Document never scrolls. Pages scroll inside pos-content, or fill (Cashier V3). */
.pos-content > * {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.pos-content > .app-fill {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Cashier fill pages: maximize width under Application Bar (crosses CSS isolation). */
.pos-content:has(> .app-fill) {
  padding: 10px;
}

/* =========================================
   9. UTILITY CLASSES
   ========================================= */

.font-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.font-mono,
.font-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* ---- Animations ---- */

@keyframes fadeRise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-rise {
  animation: fadeRise var(--duration-normal) var(--ease-out) both;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

.pulse-dot {
  animation: pulseDot 1.6s ease-in-out infinite;
}