/* RAWA Design System v2 — monochrome premium canvas + a single electric-blue
   accent. Full replacement of the "Docket & Line" palette (approved by the
   owner 2026-08-30, matching the reference POS screenshot).

   Theme resolution:
   - bare :root                 = light (soft premium off-white) — the default
   - :root[data-theme="dark"]   = dark  (near-black monochrome) — explicit
   - "system" mode is resolved at runtime by rawa_theme_toggle.js, which sets
     data-theme to light/dark from prefers-color-scheme. There is deliberately
     NO @media(prefers-color-scheme) block here: un-stamped pages (first visit,
     anonymous marketing/pricing/login traffic) stay light unless the visitor
     explicitly opts into dark or system. */

:root {
	color-scheme: light;

	/* ===== Light — soft premium off-white ===== */
	--rawa-black: #16181c;
	--rawa-black-soft: #3a3f47;
	--rawa-white: #ffffff;
	--rawa-ink: #16181c;

	/* Surfaces — separation by value + soft shadow, never by hard lines */
	--rawa-bg: #f5f6f8;
	--rawa-bg-alt: #eceef2;
	--rawa-card: #ffffff;
	--rawa-elevated: #ffffff;
	--rawa-border: rgba(16, 18, 22, 0.09);
	--rawa-border-strong: rgba(16, 18, 22, 0.16);
	--rawa-hairline: rgba(16, 18, 22, 0.09);

	/* Glass — sticky header, mobile bottom-sheet, POS FAB menu, modal scrims.
	   Never for solid content cards. Pair with backdrop-filter: blur(18px). */
	--rawa-glass: rgba(255, 255, 255, 0.72);
	--rawa-glass-border: rgba(16, 18, 22, 0.08);

	/* Text — three levels */
	--rawa-text: #16181c;
	--rawa-text-secondary: #565c66;
	--rawa-text-muted: #888e99;
	--rawa-text-2: #565c66;
	--rawa-text-3: #888e99;

	/* Accent — ONE electric blue (the reference "Pay" button).
	   The --rawa-champagne* names are kept as aliases so every page that
	   already reads them turns blue with zero markup change. */
	--rawa-champagne: #2f6bff;
	--rawa-champagne-light: #4c82ff;
	--rawa-champagne-dark: #1f5af0;
	--rawa-champagne-glow: rgba(47, 107, 255, 0.12);
	--rawa-accent: var(--rawa-champagne);
	--rawa-accent-hover: #1f5af0;
	--rawa-accent-soft: rgba(47, 107, 255, 0.12);

	/* Actions — primary CTA is the accent, matching the reference */
	--rawa-primary: #2f6bff;
	--rawa-primary-hover: #1f5af0;
	--rawa-primary-text: #ffffff;
	--rawa-primary-dark: #1846c8;

	/* State — kept separate from the accent; the accent never signals state */
	--rawa-success: #1f9e5b;
	--rawa-warning: #b7791f;
	--rawa-danger: #dc3b40;
	--rawa-muted: #888e99;

	/* Shape — rounded per the approved direction (was 4 / 6 / 8) */
	--rawa-radius-sm: 10px;
	--rawa-radius-md: 12px;
	--rawa-radius-lg: 16px;
	--rawa-radius-xl: 22px;

	/* Depth — soft floating shadows, no hard close edges */
	--rawa-shadow: 0 24px 64px -24px rgba(16, 18, 22, 0.22);
	--rawa-shadow-sm: 0 10px 30px -12px rgba(16, 18, 22, 0.14);

	/* Typography — Inter for UI (loaded via the @import in rawa_web.css).
	   Inter has no Arabic glyphs, so Arabic/Urdu fall through to the system
	   stack — the same approach the theme used with Work Sans. */
	--rawa-wordmark-font: "Archivo Black", "Inter", "Segoe UI", Tahoma, sans-serif;
	--rawa-font: "Inter", "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
	--rawa-mono-font: "Space Mono", "Consolas", monospace;
}

:root[data-theme="dark"] {
	color-scheme: dark;

	/* ===== Dark — near-black monochrome (the reference) ===== */
	--rawa-black: #f3f4f6;
	--rawa-black-soft: #c7cdd1;
	--rawa-white: #17181c;
	--rawa-ink: #f3f4f6;

	--rawa-bg: #0b0c0e;
	--rawa-bg-alt: #121317;
	--rawa-card: #17181c;
	--rawa-elevated: #1e2025;
	--rawa-border: rgba(255, 255, 255, 0.07);
	--rawa-border-strong: rgba(255, 255, 255, 0.14);
	--rawa-hairline: rgba(255, 255, 255, 0.07);

	--rawa-glass: rgba(20, 22, 26, 0.66);
	--rawa-glass-border: rgba(255, 255, 255, 0.08);

	--rawa-text: #f3f4f6;
	--rawa-text-secondary: #a7acb5;
	--rawa-text-muted: #6b7079;
	--rawa-text-2: #a7acb5;
	--rawa-text-3: #6b7079;

	--rawa-champagne: #2f6bff;
	--rawa-champagne-light: #4c82ff;
	--rawa-champagne-dark: #9bbcff;
	--rawa-champagne-glow: rgba(47, 107, 255, 0.16);
	--rawa-accent: var(--rawa-champagne);
	--rawa-accent-hover: #4c82ff;
	--rawa-accent-soft: rgba(47, 107, 255, 0.16);

	--rawa-primary: #2f6bff;
	--rawa-primary-hover: #4c82ff;
	--rawa-primary-text: #ffffff;
	--rawa-primary-dark: #9bbcff;

	--rawa-success: #2fb16b;
	--rawa-warning: #e0a11e;
	--rawa-danger: #e5484d;
	--rawa-muted: #6b7079;

	--rawa-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.66);
	--rawa-shadow-sm: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}