/* =========================================================================
   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;

    /* ---- Touch --------------------------------------------------------- */
    /* Minimum hit area for a control on a touch screen (WCAG 2.5.5 / Apple
       HIG). Applied only under @media (pointer: coarse) — see README
       "Responsive"; defined at :root so layout math can reserve the space. */
    --pos-touch-target: 44px;

    /* ---- 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 */
}

/* ---- Touch type scale ---------------------------------------------------
   A finger-driven screen is read from further away and the 12px workhorse
   is too small to tap accurately, so the whole scale steps up 2px when the
   PRIMARY pointer is coarse. Keyed on the pointer, never on width — a
   desktop window narrowed to tablet size keeps the desktop scale, and a
   mouse-driven 1366px terminal is unaffected. */
@media (pointer: coarse) {
    :root {
        --pos-font-2xs: 11px;
        --pos-font-xs: 12px;
        --pos-font-sm: 13px;
        --pos-font-base: 14px;
        --pos-font-md: 15px;
        --pos-font-lg: 16px;
        --pos-font-xl: 18px;
        --pos-font-2xl: 20px;
        --pos-font-3xl: 22px;
    }
}

/* -------------------------------------------------------------------------
   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;
}
------------------------------------------------------------------------- */