/* ──────────────────────────────────────────────────────────────
   Prairieline design system
   Single source of truth for visual tokens across the platform.

   Surfaces that import this file:
     • Customer storefront   (public/src/css/index.css inherits these names)
     • Customer portal       (public/portal/portal.css)
     • Admin POS register    (public/admin/pos.html)
     • Customer display      (future — pole-mounted screen)
     • Menu boards           (future — TV layouts)
     • Printer emulator      (future — phone-as-thermal-printer)

   The back-office admin shell (public/admin/admin.css) still uses an
   older palette and migrates separately the next time it's touched.
   ────────────────────────────────────────────────────────────── */

:root {
    /* ── Brand green (Material green; storefront's canonical accent) ── */
    --green-50:  #e8f5e9;
    --green-100: #c8e6c9;
    --green-200: #a5d6a7;
    --green-300: #81c784;
    --green-400: #66bb6a;
    --green-500: #4caf50;
    --green-600: #43a047;
    --green-700: #388e3c;
    --green-800: #2e7d32;
    --green-900: #1b5e20;

    /* ── Neutral scale ── */
    --gray-50:  #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-850: #303030;
    --gray-900: #212121;
    --gray-950: #121212;

    /* ── Semantic surfaces ── */
    --bg:              var(--gray-950);          /* App background */
    --bg-card:         rgba(255,255,255,0.04);   /* Floating surface (cards over bg) */
    --bg-card-hover:   rgba(255,255,255,0.08);
    --bg-glass:        rgba(30,30,30,0.75);      /* Header glass / overlay scrim */
    --surface:         #1c1f2b;                  /* Elevated panel (cart rail, modal) */
    --surface-2:       #252836;                  /* Even more elevated */

    /* ── Type colours ── */
    --text:            #f5f5f5;
    --text-muted:      #9e9e9e;
    --text-heading:    #ffffff;

    /* ── Brand accent ── */
    --primary:         var(--green-500);
    --primary-dark:    var(--green-700);         /* Pressed state, dark accent button bg under white text */
    --primary-glow:    rgba(76,175,80,0.25);
    --primary-bg:      rgba(76,175,80,0.10);     /* Tinted backgrounds (chips, sub-surfaces) */

    /* ── State colours ── */
    --amber:    #ffb300;
    --amber-bg: rgba(255,179,0,0.10);
    --red:      #ef5350;
    --red-bg:   rgba(239,83,80,0.10);
    --blue:     #42a5f5;
    --blue-bg:  rgba(66,165,245,0.10);

    /* ── Borders ── */
    --border:        rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.16);
    --border-active: rgba(76,175,80,0.40);

    /* ── Type ── */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', var(--font-body);
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* ── Radii ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* ── Motion ── */
    --ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in:  cubic-bezier(0.4, 0, 1, 1);
    --duration-fast:  150ms;
    --duration-med:   300ms;
    --duration-slow:  500ms;

    /* ── Touch sizing ── */
    --tap-min:       48px;   /* WCAG-friendly minimum for any tappable target */
    --tap-comfort:   56px;   /* High-frequency targets (category pills, quantity steppers) */
    --tap-primary:   72px;   /* Primary CTAs (Pay button) */
}

/* ── Shared motion vocabulary ───────────────────────────────────
   Prefixed pl- to make cross-surface usage unambiguous. The existing
   un-prefixed fadeIn/slideIn live in each surface's own stylesheet
   for back-compat and can be retired once callers migrate. */
@keyframes pl-fade-in        { from { opacity: 0; transform: translateY(8px); }
                               to   { opacity: 1; transform: translateY(0); } }
@keyframes pl-fade-in-up     { from { opacity: 0; transform: translateY(20px); }
                               to   { opacity: 1; transform: translateY(0); } }
@keyframes pl-slide-in-right { from { transform: translateX(100%); opacity: 0; }
                               to   { transform: translateX(0);    opacity: 1; } }
@keyframes pl-slide-in-left  { from { transform: translateX(-100%); opacity: 0; }
                               to   { transform: translateX(0);     opacity: 1; } }
@keyframes pl-slide-in-up    { from { transform: translateY(100%); opacity: 0; }
                               to   { transform: translateY(0);    opacity: 1; } }