/*
 * qrme design tokens: the single definition of colours, type, spacing, shape
 * and motion. Loaded by public pages, the dashboard and the Django admin.
 *
 * Every colour derives from three inputs: --accent, --bg and --text.
 * Public pages set them from the organization's brand; the dashboard and
 * the admin use the qrme defaults below.
 */

:root {
  /* Inputs */
  --accent: #4F46E5;
  --on-accent: #FFFFFF;
  --bg: #FFFFFF;
  --text: #0F172A;

  /* Derived colours */
  --page: color-mix(in srgb, var(--text) 3.5%, var(--bg));
  --surface: var(--bg);
  --surface-2: color-mix(in srgb, var(--text) 5%, var(--bg));
  --border: color-mix(in srgb, var(--text) 12%, var(--bg));
  --border-strong: color-mix(in srgb, var(--text) 22%, var(--bg));
  --text-muted: color-mix(in srgb, var(--text) 68%, var(--bg));
  --accent-ink: color-mix(in srgb, var(--accent) 82%, var(--text));
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg));
  --accent-hover: color-mix(in srgb, var(--accent) 88%, var(--text));
  --focus: color-mix(in srgb, var(--accent) 55%, transparent);
  --danger: #DC2626;
  --danger-soft: color-mix(in srgb, #DC2626 9%, var(--bg));
  --success: #15803D;
  --success-soft: color-mix(in srgb, #15803D 10%, var(--bg));
  --warning: #B45309;
  --warning-soft: color-mix(in srgb, #D97706 12%, var(--bg));
  /* Behind dialogs and sheets. */
  --backdrop: color-mix(in srgb, var(--text) 40%, transparent);
  /* What a QR image is drawn on: always white, whatever the theme (codes need a light background). */
  --paper: #FFFFFF;
  /* The bezel of the phone that frames page previews. */
  --device: #111827;
  /* The gallery's full-screen viewer, over any brand: a dark veil, and what sits on it. */
  --overlay-strong: color-mix(in srgb, #000000 88%, transparent);
  --on-overlay: #FFFFFF;
  --on-overlay-soft: color-mix(in srgb, #FFFFFF 14%, transparent);

  /* Type */
  --font: "Plex Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading: 1.6;

  /* Space, shape, depth, motion */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
  --shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--text) 7%, transparent);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 160ms;
  --tap: 44px;
  /* Control heights: every button, field, segment, chip and menu item uses one of these. The small
     size is for dense desktop toolbars; on touch screens it grows to the tap size (UX-N15). */
  --control-sm: 36px;
  --control: var(--tap);
  --control-lg: 52px;

  /* Layers: every z-index in the project comes from this scale. */
  --z-base: 0;
  --z-raised: 1;     /* a control above its card's full-size link */
  --z-sticky: 10;    /* sticky bars inside the page */
  --z-header: 20;    /* the phone top bar */
  --z-scrim: 50;     /* behind an open sheet */
  --z-sheet: 60;     /* sheets and the navigation drawer */
  --z-toast: 90;
  --z-skip: 100;     /* the skip link */
  --z-banner: 2000;  /* the impersonation banner: above the admin's own layers too (its highest is 1051) */
}

@media (pointer: coarse) {
  :root { --control-sm: var(--tap); }
}