/* Global tokens and reset (CUBE: global). ARD370–379. */

:root {
  --color-bg: #0f0f1c;
  --color-fg: #f4f4f8;
  --color-muted: #98a0b3;
  --color-accent: #6c83ff;
  --color-accent-fg: #ffffff;
  --color-border: #2a2a3d;
  --color-warn: #f3b04a;
  --color-danger: #d65a5a;
  --color-success: #4cb377;
  --color-input-bg: rgba(255, 255, 255, 0.04);
  --color-backdrop: rgba(0, 0, 0, 0.5);
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.6875rem;   /* 11px — tablet row padding */
  --space-m: 1rem;
  --space-l: 1.25rem;
  --space-xl: 1.75rem;
  --space-2xl: 2.5rem;
  --radius-s: 6px;        /* controls */
  --radius-m: 8px;        /* cards */
  --radius-l: 12px;       /* tiles, dialogs */
  --radius-pill: 999px;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* type scale */
  --fs-2xs: 0.71875rem;   /* 11.5px — table micro-headers */
  --fs-xs:  0.78125rem;   /* 12.5px — meta, captions */
  --fs-sm:  0.84375rem;   /* 13.5px — table body */
  --fs-md:  0.875rem;     /* 14px — body */
  --fs-lg:  1rem;
  --fs-xl:  1.1875rem;    /* 19px — page title */
  --fs-2xl: 1.375rem;
  --fs-3xl: 1.5rem;
  /* control geometry */
  --control-h:      38px;   /* toolbar buttons, inputs */
  --control-h-lg:   46px;   /* Charge, Sign in */
  --icon-btn:       34px;   /* icon-button visual box */
  --icon-btn-sm:    32px;   /* cart-line icon buttons */
  --tap-min:        44px;   /* hit area via cell padding */
  --app-bar-height: 52px;
  /* decorative element sizes */
  --brand-mark:     22px;   /* app-bar logo square */
  --brand-mark-lg:  30px;   /* login logo square */
  --avatar:         26px;
  --dot:            6px;     /* online status dot */
  --glyph:          46px;    /* empty-state / cart-empty icon frame */
  --glyph-sm:       28px;    /* activity-row icon frame */
  --qty-step:       40px;    /* qty stepper button */
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.05vw + 0.6rem, 19px); }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: 1.45;
  min-height: 100vh;
}
h1, h2, h3 { line-height: 1.15; margin: 0; }
h1 { font-size: clamp(1.5rem, 2.5vw + 0.8rem, 2.25rem); }
h2 { font-size: clamp(1.2rem, 1.6vw + 0.7rem, 1.6rem); }
a { color: var(--color-accent); }
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--space-xs) var(--space-m);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
}
button[type=button][data-variant=ghost],
button[data-variant=ghost] {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-border);
}
button[data-variant=danger] {
  background: var(--color-danger);
}
input, select, textarea {
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-input-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
}
input:focus, select:focus, textarea:focus, button:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-xs) var(--space-s); border-bottom: 1px solid var(--color-border); text-align: left; }
.err { color: var(--color-danger); }
.muted { color: var(--color-muted); }

/* Shared motion. Keyframes live in global; blocks reference by name. */
@keyframes shimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheetin { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }