/* =====================================================
   POINTLESS POS — DESIGN TOKENS (DEFAULT SKIN)
   -----------------------------------------------------
   Plugin-wide design tokens. Every PointlessPOS module
   reads its colors, fonts, spacing and shape from these
   custom properties via  var(--ppos-*, fallback).

   DO NOT EDIT THIS FILE to re-skin the plugin — it is
   overwritten on every plugin update. Instead, override
   any token from your ACTIVE THEME by creating:

       wp-content/themes/<your-theme>/pointless-pos/pointless-pos.css

   and redeclaring just the tokens you want to change, e.g.

       :root {
         --ppos-color-accent: #d98b5f;
         --ppos-font-heading: 'Playfair Display', serif;
       }

   That file is enqueued AFTER this one, so your values win,
   and it lives in your theme — so plugin updates never
   touch it. See docs/theming/01-design-tokens.md.
   ===================================================== */

:root {
  /* ---- Surfaces & background ---- */
  --ppos-color-bg:            #ffffff;   /* page / card background        */
  --ppos-color-surface:       #ffffff;   /* raised panels, sections       */
  --ppos-color-surface-alt:   #f8f9fa;   /* subtle filled areas (search)  */

  /* ---- Text ---- */
  --ppos-color-text:          #333333;   /* primary body / headings       */
  --ppos-color-heading:       #2b2b2b;   /* section + menu titles         */
  --ppos-color-muted:         #777777;   /* secondary / descriptions      */
  --ppos-color-faint:         #999999;   /* captions, barcodes            */

  /* ---- Brand / accent ---- */
  --ppos-color-accent:        #2e7d32;   /* primary brand action color    */
  --ppos-color-accent-text:   #ffffff;   /* text on top of accent         */
  --ppos-color-accent-hover:  #1b5e20;   /* hovered accent                */
  --ppos-color-price:         #2e7d32;   /* price emphasis                */

  /* ---- Lines & dividers ---- */
  --ppos-color-border:        #e0e0e0;
  --ppos-color-border-strong: #cccccc;

  /* ---- Focus ring (WCAG 2.4.11 / 2.4.7) ---- */
  --ppos-color-focus:         #1a73e8;   /* keep ≥ 3:1 vs adjacent colors */

  /* ---- Typography ---- */
  --ppos-font-base:    inherit;          /* inherit the theme's body font */
  --ppos-font-heading: inherit;          /* swap to a display serif, etc. */
  --ppos-font-size-base: 1rem;
  --ppos-line-height:    1.5;
  --ppos-heading-weight: 700;

  /* ---- Shape & depth ---- */
  --ppos-radius:        8px;
  --ppos-radius-pill:   999px;
  --ppos-shadow:        0 1px 3px rgba(0, 0, 0, 0.1);
  --ppos-shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.12);

  /* ---- Spacing scale ---- */
  --ppos-space-xs: 0.25rem;
  --ppos-space-sm: 0.5rem;
  --ppos-space-md: 1rem;
  --ppos-space-lg: 1.5rem;
  --ppos-space-xl: 2rem;
}