/* =========================================================================
   POS Register — tokens.css
   The single source of truth for the Register theme. Everything else
   (base.css, components.css, layout.css, scoped .razor.css) reads these.

   Values are copied verbatim from the pre-refactor CSS, so adopting these
   tokens is a visual no-op. A future theme = override these variables under
   :root[data-theme="x"] (see the commented example at the bottom).

   Naming: --pos-*  |  Do NOT hardcode colors/sizes outside this file.
   ========================================================================= */

:root {
    /* ---- Typography ---------------------------------------------------- */
    --pos-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ---- Surfaces / chrome -------------------------------------------- */
    --pos-canvas: #223444;              /* main content + sidebar background */
    --pos-chrome: #1B2937;              /* header, bottom-actions, dark buttons */
    --pos-chrome-2: #334E66;            /* scan / secondary button backgrounds */
    --pos-chrome-2-hover: rgba(51, 78, 102, 0.5);
    --pos-chrome-2-70: rgba(51, 78, 102, 0.7);
    --pos-surface: #ffffff;             /* cards, sales list, inputs */
    --pos-surface-muted: #f8f9fa;       /* table row hover */
    --pos-surface-header: #e6e6e6;      /* table header row */
    --pos-surface-accent: #436689;      /* totals section */
    --pos-row-discount: #e8f4fd;        /* discounted item row */
    --pos-row-selected: #dde6ee;        /* selected item row */

    /* ---- Text ---------------------------------------------------------- */
    --pos-text: #0d0d0d;                /* primary text on light */
    --pos-text-on-dark: #ffffff;        /* text on chrome / canvas */
    --pos-text-muted: #6c757d;          /* placeholders, search icon */
    --pos-text-muted-on-dark: #e0e0e0;  /* time / labels on dark */
    --pos-text-subtle: #7f8c8d;         /* empty-cart text */
    --pos-text-cancel: #616161;         /* cancel button label */

    /* ---- Borders ------------------------------------------------------- */
    --pos-border: #bdc3c7;              /* table container, scrollbar thumb */
    --pos-border-light: #e1e5e9;        /* search box */
    --pos-border-input: #d2d2d2;        /* text inputs */
    --pos-border-muted: #ccc;           /* customer-action button */
    --pos-border-check: #929292;        /* checkbox */

    /* ---- Brand / primary (green) -------------------------------------- */
    --pos-primary: #4D9078;             /* == rgba(77,144,120,1) */
    --pos-primary-hover: rgba(77, 144, 120, 0.75);
    --pos-primary-disabled: rgba(77, 144, 120, 0.5);
    --pos-primary-soft: rgba(77, 144, 120, 0.1);
    --pos-primary-border: #47856f;

    /* ---- State: success / danger / validation ------------------------- */
    --pos-success: #27ae60;
    --pos-success-alt: #2ecc71;
    --pos-valid: #26b050;
    --pos-danger: #e74c3c;
    --pos-danger-border: #BF5A64;
    --pos-danger-strong: #c0392b;
    --pos-danger-soft: rgba(248, 68, 86, 0.08);
    --pos-invalid: #e50000;

    /* ---- Accent: amber ------------------------------------------------- */
    --pos-amber: #DF9F20;
    --pos-amber-dark: #B87D18;          /* warning accent/border — the amber
                                           counterpart to --pos-danger-strong */
    --pos-amber-soft: rgba(223, 159, 32, 0.08);
    --pos-amber-soft-hover: rgba(223, 159, 32, 0.05);

    /* ---- Accent: blue / links / focus --------------------------------- */
    --pos-blue: #7699bc;
    --pos-blue-icon: #3498db;
    --pos-blue-soft: rgba(34, 51, 68, 0.2);
    --pos-selected: #1976d2;            /* grid focus outline, MudGrid selection */
    --pos-selected-hover: #1565c0;
    --pos-link: #006bb7;
    --pos-focus-ring: #258cfb;

    /* ---- Overlays / misc ---------------------------------------------- */
    --pos-overlay-light: rgba(255, 255, 255, 0.1);
    --pos-overlay-light-2: rgba(255, 255, 255, 0.2);
    --pos-fill-muted: rgba(242, 242, 242, 0.6);
    --pos-scroll-track: #ecf0f1;
    --pos-scroll-thumb-hover: #95a5a6;

    /* ---- Spacing scale ------------------------------------------------- */
    /* Applied to padding / margin / gap across all files. Values that were
       within 1px of a step were snapped to it (3,5→4  7→8  13→12  15,17→16
       22→20  25→24); genuinely off-scale sizes (18, 26, 28, 30, 34, 36, 42,
       44, 46, 50, 55, 56, 80, 100) and 1px hairlines stay literal on purpose
       — snapping those would have moved layouts, not just tidied them. */
    --pos-space-1: 2px;
    --pos-space-2: 4px;
    --pos-space-3: 6px;
    --pos-space-4: 8px;
    --pos-space-5: 10px;
    --pos-space-6: 12px;
    --pos-space-7: 14px;
    --pos-space-8: 16px;
    --pos-space-9: 20px;
    --pos-space-10: 24px;
    --pos-space-11: 32px;
    --pos-space-12: 40px;
    --pos-space-13: 48px;

    /* ---- Radius -------------------------------------------------------- */
    --pos-radius-sm: 3px;
    --pos-radius: 4px;                  /* default */
    --pos-radius-md: 6px;
    --pos-radius-lg: 8px;
    --pos-radius-xl: 12px;

    /* ---- Font size ----------------------------------------------------- */
    --pos-font-2xs: 9px;
    --pos-font-xs: 10px;
    --pos-font-sm: 11px;
    --pos-font-base: 12px;              /* workhorse */
    --pos-font-md: 13px;
    --pos-font-lg: 14px;
    --pos-font-xl: 16px;
    --pos-font-2xl: 18px;
    --pos-font-3xl: 20px;

    /* ---- Font weight --------------------------------------------------- */
    --pos-weight-normal: 400;
    --pos-weight-medium: 500;
    --pos-weight-semibold: 600;
    --pos-weight-bold: 700;
    --pos-weight-extrabold: 800;

    /* ---- Shadow -------------------------------------------------------- */
    --pos-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --pos-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* ---- z-index ------------------------------------------------------- */
    --pos-z-raised: 2;
    --pos-z-sticky: 10;
    --pos-z-overlay: 1000;

    /* ---- Transition ---------------------------------------------------- */
    --pos-transition: all 0.2s ease;
    --pos-transition-color: color 0.2s ease;
    --pos-transition-bg: background-color 0.2s ease;
    --pos-transition-slow: all 0.3s ease;

    /* ---- Completeness -------------------------------------------------- */
    /* One-off values found while migrating app.css / ProcessSales that were
       not in the initial catalog. Exact values, kept so the common files
       carry no raw literals. Candidates for consolidation later. */
    --pos-text-black: #000;             /* distinct from --pos-text (#0d0d0d) */
    --pos-btn-label-light: #f4f5f7;     /* button label on dark chrome */
    --pos-btn-label-soft: #efefef;      /* sidebar-secondary label */
    --pos-fill-light: #f2f2f2;          /* light border/fill */
    --pos-border-cancel: #ADADAD;       /* cancel button border */
    --pos-chrome-alt-hover: rgba(46, 71, 92, 0.5); /* sidebar-secondary hover */
    --pos-danger-2: #dc2626;            /* refund-mode red */

    /* ---- Extended semantic palette ------------------------------------- */
    /* Added for the register-family page/dialog rollout. The many one-off
       greens/greys/blues/reds those files used are consolidated onto these
       semantic families (nearest-match), not minted as one-off tokens. */

    /* Neutral ramp (greys) */
    --pos-neutral-50: #f9fafb;
    --pos-neutral-100: #f3f4f6;
    --pos-neutral-200: #e5e7eb;
    --pos-neutral-300: #d1d5db;
    --pos-neutral-400: #9ca3af;
    --pos-neutral-500: #6b7280;
    --pos-neutral-600: #4b5563;
    --pos-neutral-700: #374151;
    --pos-neutral-800: #1f2937;
    --pos-neutral-900: #101921;

    /* Green (brand) tints/shades */
    --pos-primary-light: #5f9b85;
    --pos-primary-dark: #3d6757;
    --pos-primary-bg: #e6f7f3;          /* pale green surface */

    /* Success (bright green) */
    --pos-success-strong: #15803d;
    --pos-success-bg: #f0fdf4;

    /* Blue / info */
    --pos-info: #2196f3;
    --pos-blue-light: #8eadcf;
    --pos-blue-bg: #e6f3ff;

    /* Red / danger */
    --pos-danger-light: #d06673;
    --pos-danger-bg: #fef2f2;

    /* Amber */
    --pos-amber-strong: #fbbf24;
    --pos-amber-bg: #fff3e0;

    /* Chrome (darker end) */
    --pos-chrome-dark: #101921;

    /* Black scrims (shadows / borders / hovers) */
    --pos-scrim-03: rgba(0, 0, 0, 0.03);
    --pos-scrim-05: rgba(0, 0, 0, 0.05);
    --pos-scrim-10: rgba(0, 0, 0, 0.1);
    --pos-scrim-15: rgba(0, 0, 0, 0.15);
    --pos-scrim-20: rgba(0, 0, 0, 0.2);
    --pos-scrim-25: rgba(0, 0, 0, 0.25);

    /* Shadows (elevation) */
    --pos-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Chrome / white translucents (modal backdrop, high-opacity labels) */
    --pos-chrome-overlay: rgba(27, 41, 55, 0.85);   /* modal backdrop */
    --pos-overlay-light-50: rgba(255, 255, 255, 0.5);
    --pos-overlay-light-72: rgba(255, 255, 255, 0.72);

    /* ---- RGB triples --------------------------------------------------- */
    /* Bare "r, g, b" components for the brand/state colors, for consumers
       that need to compose their own alpha: rgba(var(--pos-primary-rgb), .3).
       CSS cannot derive these from the hex above, so they are duplicated —
       if you change the hex, change the triple on the same line. Consumed by
       the MudBlazor palette bridge in app.css (Mud builds its ripple and
       overlay colors from --mud-palette-*-rgb). */
    --pos-primary-rgb: 77, 144, 120;    /* --pos-primary  #4D9078 */
    --pos-selected-rgb: 25, 118, 210;   /* --pos-selected #1976d2 */
    --pos-success-rgb: 39, 174, 96;     /* --pos-success  #27ae60 */
    --pos-danger-rgb: 231, 76, 60;      /* --pos-danger   #e74c3c */
    --pos-amber-rgb: 223, 159, 32;      /* --pos-amber    #DF9F20 */
    --pos-info-rgb: 33, 150, 243;       /* --pos-info     #2196f3 */
}

/* -------------------------------------------------------------------------
   Future theme example (inert — kept commented until themes ship).
   Add `data-theme="dark"` to <html> and uncomment to activate. Only the
   variables that differ need to be listed; everything else inherits :root.

:root[data-theme="dark"] {
    --pos-canvas: #10202c;
    --pos-chrome: #0d1922;
    --pos-surface: #1b2b38;
    --pos-text: #e8eef3;
    --pos-surface-header: #24384a;
}
------------------------------------------------------------------------- */