/* LUXIOUS QR STUDIO - design tokens.
 * Dark stone + brushed gold, taken from the luxious.ma identity.
 * One accent (gold). Radius rule: 8 fields, 12 small cards, 20 panels, pill controls. */
:root {
  color-scheme: light;
  --bg: #f3f3f1;
  --bg-elev: #fcfcfb;
  --surface-2: #efefec;
  --surface-3: #e7e7e3;
  --field: #fefefd;
  --line: rgba(23, 24, 28, 0.09);
  --line-strong: rgba(23, 24, 28, 0.17);
  --text: #17181c;
  --text-2: #4c4f57;
  --text-3: #686b73;
  --ink: #17181c;
  --ink-hover: #2a2c32;
  --on-ink: #f7f6f2;
  --gold: #c8a46a;
  --gold-text: #7e612f;
  --gold-soft: rgba(200, 164, 106, 0.16);
  --gold-line: rgba(160, 125, 66, 0.35);
  --focus: #7e612f;
  --success: #1f7046;
  --success-soft: rgba(31, 112, 70, 0.1);
  --danger: #b0302a;
  --danger-soft: rgba(176, 48, 42, 0.09);
  --warning: #8a5a0e;
  --warning-soft: rgba(176, 116, 18, 0.12);
  --scrim: rgba(14, 15, 17, 0.42);
  --checker: #e6e6e2;

  --shadow-1: 0 1px 2px rgba(23, 24, 28, 0.05), 0 1px 1px rgba(23, 24, 28, 0.03);
  --shadow-2: 0 10px 28px -12px rgba(23, 24, 28, 0.16), 0 2px 6px -2px rgba(23, 24, 28, 0.06);
  --shadow-pop: 0 28px 64px -18px rgba(23, 24, 28, 0.3), 0 4px 14px -4px rgba(23, 24, 28, 0.1);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --font: "Geist", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;
  --fs-3xl: 34px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-fast: 160ms;
  --dur: 220ms;

  --sidebar-w: 248px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;

  /* z-index scale */
  --z-sticky: 20;
  --z-nav: 30;
  --z-overlay: 60;
  --z-toast: 80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0f11;
    --bg-elev: #15161a;
    --surface-2: #1c1d22;
    --surface-3: #25262c;
    --field: #111215;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --text: #ecebe6;
    --text-2: #b6b7bd;
    --text-3: #92949b;
    --ink: #ecebe6;
    --ink-hover: #ffffff;
    --on-ink: #121316;
    --gold: #d8b878;
    --gold-text: #dcbd80;
    --gold-soft: rgba(216, 184, 120, 0.13);
    --gold-line: rgba(216, 184, 120, 0.35);
    --focus: #dcbd80;
    --success: #5cc18c;
    --success-soft: rgba(92, 193, 140, 0.12);
    --danger: #f07a72;
    --danger-soft: rgba(240, 122, 114, 0.12);
    --warning: #e0aa52;
    --warning-soft: rgba(224, 170, 82, 0.13);
    --scrim: rgba(0, 0, 0, 0.6);
    --checker: #24252a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 30px -12px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-pop: 0 30px 70px -18px rgba(0, 0, 0, 0.75), 0 4px 14px -4px rgba(0, 0, 0, 0.5);
    --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0f11;
  --bg-elev: #15161a;
  --surface-2: #1c1d22;
  --surface-3: #25262c;
  --field: #111215;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #ecebe6;
  --text-2: #b6b7bd;
  --text-3: #92949b;
  --ink: #ecebe6;
  --ink-hover: #ffffff;
  --on-ink: #121316;
  --gold: #d8b878;
  --gold-text: #dcbd80;
  --gold-soft: rgba(216, 184, 120, 0.13);
  --gold-line: rgba(216, 184, 120, 0.35);
  --focus: #dcbd80;
  --success: #5cc18c;
  --success-soft: rgba(92, 193, 140, 0.12);
  --danger: #f07a72;
  --danger-soft: rgba(240, 122, 114, 0.12);
  --warning: #e0aa52;
  --warning-soft: rgba(224, 170, 82, 0.13);
  --scrim: rgba(0, 0, 0, 0.6);
  --checker: #24252a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 30px -12px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 30px 70px -18px rgba(0, 0, 0, 0.75), 0 4px 14px -4px rgba(0, 0, 0, 0.5);
  --inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}