/* SmartRes F&B POS — color + type tokens
   Inherited from SmartPOS DS (Flowbite/Tailwind base).
   Primary: Flowbite blue scale.
*/

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&display=swap');

:root {
  /* ── Neutrals (unchanged from SmartPOS) ────────────────── */
  --sr-gray-50:  #F9FAFB;
  --sr-gray-100: #F3F4F6;
  --sr-gray-200: #E5E7EB;
  --sr-gray-300: #D1D5DB;
  --sr-gray-400: #9CA3AF;
  --sr-gray-500: #6B7280;
  --sr-gray-600: #4B5563;
  --sr-gray-700: #374151;
  --sr-gray-800: #1F2A37;
  --sr-gray-900: #111928;
  --sr-white:    #FFFFFF;
  --sr-black:    #000000;

  /* ── Primary — Blue (Flowbite blue scale) ───────────────── */
  --sr-primary-50:  #EBF5FF;
  --sr-primary-100: #E1EFFE;
  --sr-primary-200: #C3DDFD;
  --sr-primary-300: #A4CAFE;
  --sr-primary-400: #76A9FA;
  --sr-primary-500: #3F83F8;
  --sr-primary-600: #1C64F2;   /* Primary-600 — brand blue */
  --sr-primary-700: #1A56DB;   /* Primary-700 — workhorse / hover */
  --sr-primary-800: #1E429F;
  --sr-primary-900: #233876;

  /* ── Brand ───────────────────────────────────────────────── */
  --sr-brand-navy:   #00244C;   /* logo tile background */
  --sr-brand-accent: #1C64F2;   /* same as primary-600 */

  /* ── Semantic (unchanged) ────────────────────────────────── */
  --sr-red-50:     #FDF2F2;
  --sr-red-100:    #FDE8E8;
  --sr-red-500:    #F05252;
  --sr-red-600:    #E02424;
  --sr-red-700:    #C81E1E;

  --sr-green-50:   #F3FAF7;
  --sr-green-100:  #DEF7EC;
  --sr-green-500:  #0E9F6E;
  --sr-green-700:  #046C4E;

  --sr-yellow-100: #FDF6B2;
  --sr-yellow-400: #E3A008;
  --sr-yellow-700: #8E4B10;

  --sr-indigo-500: #4F46E5;

  /* ── Semantic aliases ────────────────────────────────────── */
  --sr-bg:            var(--sr-gray-50);
  --sr-surface:       var(--sr-white);
  --sr-surface-alt:   var(--sr-gray-50);
  --sr-border:        var(--sr-gray-200);
  --sr-border-strong: var(--sr-gray-300);
  --sr-divider:       var(--sr-gray-200);

  --sr-fg-1:          var(--sr-gray-900);   /* primary text */
  --sr-fg-2:          var(--sr-gray-700);   /* secondary text */
  --sr-fg-3:          var(--sr-gray-500);   /* tertiary / labels */
  --sr-fg-4:          var(--sr-gray-400);   /* placeholder */
  --sr-fg-inverse:    var(--sr-white);

  --sr-primary:       var(--sr-primary-700);   /* workhorse */
  --sr-primary-hover: var(--sr-primary-800);
  --sr-primary-soft:  var(--sr-primary-50);
  --sr-primary-ring:  var(--sr-primary-300);

  --sr-success:       var(--sr-green-500);
  --sr-success-soft:  var(--sr-green-100);
  --sr-warning:       var(--sr-yellow-400);
  --sr-warning-soft:  var(--sr-yellow-100);
  --sr-danger:        var(--sr-red-600);
  --sr-danger-soft:   var(--sr-red-100);

  /* ── Spacing (4px grid) ──────────────────────────────────── */
  --sr-space-1:  4px;
  --sr-space-2:  6px;
  --sr-space-3:  8px;
  --sr-space-4:  12px;
  --sr-space-5:  16px;
  --sr-space-6:  20px;
  --sr-space-7:  24px;
  --sr-space-8:  32px;
  --sr-space-9:  40px;
  --sr-space-10: 48px;

  /* ── Radii ───────────────────────────────────────────────── */
  --sr-radius-sm:   4px;
  --sr-radius-md:   6px;
  --sr-radius-lg:   8px;
  --sr-radius-xl:   12px;
  --sr-radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --sr-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --sr-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --sr-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --sr-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.08);
  --sr-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);

  /* ── Focus rings ─────────────────────────────────────────── */
  --sr-ring-primary: 0 0 0 3px rgba(164,202,254,0.5);   /* primary-300 tint */
  --sr-ring-neutral: 0 0 0 3px var(--sr-gray-100);

  /* ── Typography ──────────────────────────────────────────── */
  --sr-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sr-font-display: 'Orbitron', 'Nasalization', 'Inter', sans-serif;
  --sr-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --sr-text-xs:   12px;
  --sr-text-sm:   14px;
  --sr-text-base: 16px;
  --sr-text-lg:   18px;
  --sr-text-xl:   20px;
  --sr-text-2xl:  24px;
  --sr-text-3xl:  30px;
  --sr-text-4xl:  36px;
  --sr-text-5xl:  48px;

  --sr-leading-tight: 1.25;
  --sr-leading-snug:  1.375;
  --sr-leading-base:  1.5;

  --sr-fw-regular:  400;
  --sr-fw-medium:   500;
  --sr-fw-semibold: 600;
  --sr-fw-bold:     700;
}

/* ── Typographic recipes ─────────────────────────────────────── */
.sr-display {
  font-family: var(--sr-font-display);
  font-size: var(--sr-text-2xl);
  line-height: var(--sr-leading-base);
  color: var(--sr-fg-1);
}
.sr-h1 {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-2xl);
  font-weight: var(--sr-fw-semibold);
  line-height: var(--sr-leading-tight);
  color: var(--sr-fg-1);
}
.sr-h2 {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-xl);
  font-weight: var(--sr-fw-semibold);
  line-height: var(--sr-leading-snug);
  color: var(--sr-fg-1);
}
.sr-h3 {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-lg);
  font-weight: var(--sr-fw-semibold);
  line-height: var(--sr-leading-snug);
  color: var(--sr-fg-1);
}
.sr-h4 {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-base);
  font-weight: var(--sr-fw-semibold);
  line-height: var(--sr-leading-snug);
  color: var(--sr-fg-1);
}
.sr-body {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-fw-regular);
  line-height: var(--sr-leading-base);
  color: var(--sr-fg-2);
}
.sr-body-sm {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-xs);
  font-weight: var(--sr-fw-regular);
  line-height: var(--sr-leading-base);
  color: var(--sr-fg-3);
}
.sr-label {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-fw-medium);
  line-height: var(--sr-leading-base);
  color: var(--sr-fg-2);
}
.sr-button-label {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-fw-medium);
  line-height: 1.2;
}
.sr-table-header {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-xs);
  font-weight: var(--sr-fw-semibold);
  line-height: var(--sr-leading-base);
  color: var(--sr-fg-3);
}
.sr-code {
  font-family: var(--sr-font-mono);
  font-size: var(--sr-text-xs);
  background: var(--sr-gray-100);
  padding: 2px 6px;
  border-radius: var(--sr-radius-sm);
}

/* ── Base reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-sm);
  font-weight: var(--sr-fw-regular);
  color: var(--sr-fg-1);
  background: var(--sr-bg);
  line-height: var(--sr-leading-base);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }