/* ==========================================================================
   De Ticketshop — design tokens
   --------------------------------------------------------------------------
   Everything visual derives from these custom properties. Components only use
   the *semantic* tokens (--text, --surface, --border, --accent …) so that the
   `.theme-dark` scope (scan app) can re-skin them without new component CSS.

   Palette      --brand-blue/teal/green, --brand-gradient, --accent*, --ink-50…950
   Semantic     --bg, --surface, --surface-2, --surface-3, --border, --border-strong,
                --border-subtle, --text, --text-secondary, --text-muted, --text-subtle,
                --icon-subtle (decorative icons/chevrons only, never text), --link
   Status       --success|warning|danger|info  (+ -soft, -text, -ring)
   Shape        --radius-xs|sm|(default)|lg|xl|2xl|full
   Elevation    --shadow-xs|sm|md|lg|xl, --shadow-focus(-danger)
   Type         --font-sans, --font-mono, --text-2xs … --text-4xl
   Motion       --ease-out, --ease-in-out, --dur-fast|dur|dur-slow
   Layers       --z-sticky|sidebar|dropdown|overlay|modal|toast|tooltip
   Layout       --control-h-sm|control-h|control-h-lg, --sidebar-w, --content-max

   Contrast contract (WCAG 2.2 AA, checked on --surface #FFF and on --bg #F5F7FA):
     text tokens (--text … --text-subtle, --link, --accent-text, white on --accent) ≥ 4.5:1
     --icon-subtle, borders of focused controls and --shadow-focus ≥ 3:1
   --accent-ring is a soft glow only (inputs pair it with a solid --accent border); a focus
   indicator on its own must use --shadow-focus.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand ----------------------------------------------------------------- */
  --brand-blue: #1A9BCB;
  --brand-teal: #22B5A6;
  --brand-green: #36D48B;
  --brand-gradient: linear-gradient(120deg, #1A9BCB 0%, #22B5A6 50%, #36D48B 100%);
  --brand-gradient-soft: linear-gradient(120deg, rgba(26,155,203,.10) 0%, rgba(34,181,166,.10) 50%, rgba(54,212,139,.10) 100%);

  /* Accent (AA): white text on --accent 4.88:1, --accent on --bg 4.55:1.
     SPEC §7 listed #0B8A7E, which is only 4.24:1 with white button text. */
  --accent: #0A7F74;
  --accent-hover: #08766C;
  --accent-active: #06655D;
  --accent-soft: #E7F6F3;
  --accent-soft-hover: #D5EFEA;
  --accent-text: #07706A;
  --accent-ring: rgba(34, 181, 166, .35);
  --accent-contrast: #FFFFFF;

  /* Neutral (slate) --------------------------------------------------------- */
  --ink-50: #F8FAFC;
  --ink-100: #F1F5F9;
  --ink-150: #EAEFF5;
  --ink-200: #E2E8F0;
  --ink-300: #CBD5E1;
  --ink-400: #94A3B8;
  --ink-500: #64748B;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1E293B;
  --ink-900: #0F172A;
  --ink-950: #0A1020;

  /* Semantic surfaces ----------------------------------------------------- */
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;      /* hover rows, table heads, sunken wells */
  --surface-3: #F1F5F9;      /* pressed, segmented tracks            */
  --surface-raised: #FFFFFF; /* menus, popovers                       */
  --overlay: rgba(10, 16, 32, .42);

  --border: #E4E8EF;
  --border-strong: #D5DBE5;
  --border-subtle: #EDF0F5;

  --text: #0F172A;
  --text-secondary: #334155;
  --text-muted: #5B6B80;
  --text-subtle: #627186;    /* 4.97:1 on white, 4.63:1 on --bg, 4.54:1 on --surface-3 */
  --icon-subtle: #808D9F;    /* non-text only: 3.37:1 on white, 3.14:1 on --bg */
  --text-inverse: #FFFFFF;
  --link: var(--accent-text); /* 5.94:1 on white, 5.54:1 on --bg */

  /* Status ------------------------------------------------------------------ */
  --success: #16A34A;
  --success-soft: #EAF8EF;
  --success-text: #15803D;
  --success-ring: rgba(22, 163, 74, .22);

  --warning: #D97706;
  --warning-soft: #FEF5E7;
  --warning-text: #B45309;
  --warning-ring: rgba(217, 119, 6, .24);

  --danger: #DC2626;
  --danger-hover: #C11F1F;
  --danger-soft: #FDEEEE;
  --danger-text: #B91C1C;
  --danger-ring: rgba(220, 38, 38, .25);

  --info: #2563EB;
  --info-soft: #EEF4FF;
  --info-text: #1D4ED8;
  --info-ring: rgba(37, 99, 235, .22);

  --neutral-soft: #F1F5F9;
  --neutral-text: #475569;
  --neutral-ring: rgba(71, 85, 105, .16);

  /* Charts -------------------------------------------------------------------- */
  --chart-grid: #EEF1F5;
  --chart-axis: #627186;     /* axis labels are text: same tone as --text-subtle */
  --chart-1: #1A9BCB;
  --chart-2: #36D48B;
  --chart-3: #7C5CFC;
  --chart-4: #F59E0B;
  --chart-5: #EC4899;
  --chart-6: #0B8A7E;
  --chart-7: #6366F1;
  --chart-8: #EF4444;

  /* Shape --------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* Elevation ------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 10px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, .13), 0 4px 10px -4px rgba(16, 24, 40, .06);
  --shadow-xl: 0 24px 48px -12px rgba(16, 24, 40, .18), 0 8px 16px -8px rgba(16, 24, 40, .06);
  /* Focus: solid 2px ring with a 2px surface-coloured gap (≥ 3:1 on white and on --bg). Redeclared in
     every scope that changes --accent/--surface (see the bottom of this file): a custom property
     resolves its var()s where it is declared, not where it is used. */
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --shadow-focus-danger: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger);
  --shadow-inset: inset 0 1px 2px rgba(16, 24, 40, .06);

  /* Type ------------------------------------------------------------------------ */
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.011em;
  --weight-medium: 520;
  --weight-semibold: 600;
  --weight-bold: 680;

  /* Motion ---------------------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 150ms;
  --dur: 180ms;
  --dur-slow: 220ms;

  /* Layers ---------------------------------------------------------------------- */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-dropdown: 60;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
  --z-tooltip: 110;

  /* Layout ---------------------------------------------------------------------- */
  --control-h-sm: 30px;
  --control-h: 36px;
  --control-h-lg: 44px;
  --sidebar-w: 248px;
  --content-max: 1240px;
  --sticky-top: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ==========================================================================
   Dark surface scope — used by the scan app (<body class="theme-dark">) and
   any dark panel (e.g. the login brand panel content). Re-skins semantic tokens.
   ========================================================================== */
.theme-dark {
  color-scheme: dark;

  --bg: #0A0E14;
  --surface: #111721;
  --surface-2: #161D29;
  --surface-3: #1D2533;
  --surface-raised: #1A2230;
  --overlay: rgba(2, 5, 10, .66);

  --border: #222B39;
  --border-strong: #2F3A4B;
  --border-subtle: #1B2330;

  --text: #EDF2F8;
  --text-secondary: #C3CDDA;
  --text-muted: #8B97A9;
  --text-subtle: #7C889B;    /* 5.39:1 on --bg, 5.01:1 on --surface, 4.71:1 on --surface-2 */
  --icon-subtle: #66738A;    /* non-text only */
  --text-inverse: #0A0E14;

  --accent: #2CC3A7;
  --accent-hover: #43D3B8;
  --accent-active: #25AF96;
  --accent-soft: rgba(44, 195, 167, .14);
  --accent-soft-hover: rgba(44, 195, 167, .22);
  --accent-text: #5FE0C6;
  --accent-ring: rgba(54, 212, 139, .38);
  --accent-contrast: #03201B;
  --link: #5FE0C6;

  --success: #2FD17A;
  --success-soft: rgba(47, 209, 122, .14);
  --success-text: #5BE39A;
  --success-ring: rgba(47, 209, 122, .3);
  --warning: #F5A524;
  --warning-soft: rgba(245, 165, 36, .14);
  --warning-text: #FBBF55;
  --warning-ring: rgba(245, 165, 36, .3);
  --danger: #F2555A;
  --danger-hover: #F76C70;
  --danger-soft: rgba(242, 85, 90, .14);
  --danger-text: #FF8A8E;
  --danger-ring: rgba(242, 85, 90, .32);
  --info: #4C8DFF;
  --info-soft: rgba(76, 141, 255, .14);
  --info-text: #86B1FF;
  --info-ring: rgba(76, 141, 255, .3);
  --neutral-soft: rgba(148, 163, 184, .14);
  --neutral-text: #B4C0CF;
  --neutral-ring: rgba(148, 163, 184, .2);

  --chart-grid: #1E2633;
  --chart-axis: #7C889B;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 14px -4px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, .6);
  --shadow-xl: 0 28px 56px -12px rgba(0, 0, 0, .7);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   Derived tokens — re-resolved in every scope that re-skins the accent or the
   surface: the dark theme and any element with .accent-scope (put it next to an
   inline --accent override). Without this they would keep the :root accent,
   because var() inside a custom property is substituted where the property is
   declared. (The shop redeclares --shadow-focus on .shop in shop.css.)
   ========================================================================== */
.theme-dark, .accent-scope {
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --shadow-focus-danger: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger);
}
.accent-scope {
  --link: var(--accent-text);
}