/* ============================================================
   PosGen — Design Tokens
   Single source of truth for colors, typography, spacing.
   Update here to restyle both Admin and Cashier apps.
   ============================================================ */
:root {
    /* ── Brand / Primary ── */
    --color-primary:        #6c63ff;
    --color-primary-hover:  #857dff;
    --color-primary-dim:    rgba(108, 99, 255, 0.15);
    --color-primary-glow:   rgba(108, 99, 255, 0.30);
    --color-primary-text:   #a78bfa;

    /* ── Surfaces (dark base) ── */
    --color-bg:             #0f1117;
    --color-surface-1:      #1a1d27;
    --color-surface-2:      #12141e;
    --color-border:         #2a2d3e;
    --color-border-subtle:  rgba(255, 255, 255, 0.06);

    /* ── Text ── */
    --color-text:           #e8eaf0;
    --color-text-muted:     #6b7280;
    --color-text-dim:       #9ca3af;

    /* ── Status ── */
    --color-success:        #22c55e;
    --color-success-dim:    rgba(34, 197, 94, 0.12);
    --color-success-border: rgba(34, 197, 94, 0.25);

    --color-danger:         #ef4444;
    --color-danger-dim:     rgba(239, 68, 68, 0.10);
    --color-danger-border:  rgba(239, 68, 68, 0.20);
    --color-danger-text:    #f87171;

    --color-warning:        #f59e0b;
    --color-warning-dim:    rgba(245, 158, 11, 0.12);

    --color-info:           #a78bfa;
    --color-info-dim:       rgba(167, 139, 250, 0.12);

    /* ── Secondary accents ── */
    --color-green:          #22c55e;
    --color-purple:         #a78bfa;
    --color-amber:          #f59e0b;
    --color-red:            #ef4444;

    /* ── Typography ── */
    --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

    --font-size-xs:  0.72rem;
    --font-size-sm:  0.82rem;
    --font-size-md:  0.875rem;
    --font-size-lg:  1rem;
    --font-size-xl:  1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.75rem;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-black:    800;

    /* ── Border radius ── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-glow:  0 0 0 2px var(--color-primary-dim);

    /* ── Transitions ── */
    --transition-fast:   0.12s ease;
    --transition-normal: 0.20s ease;

    /* ── Backward-compat aliases (do not remove) ── */
    --pos-bg:       var(--color-bg);
    --pos-surface:  var(--color-surface-1);
    --pos-border:   var(--color-border);
    --pos-accent:   var(--color-primary);
    --pos-accent-h: var(--color-primary-hover);
    --pos-success:  var(--color-success);
    --pos-error:    var(--color-danger);
    --pos-text:     var(--color-text);
    --pos-muted:    var(--color-text-muted);
    --pos-radius:   var(--radius-lg);
    --pos-shadow:   var(--shadow-lg);
}