@charset "UTF-8";
/*
 * Ark design tokens, ported from padel-tournament (C:\Users\MattGrobbelaar\Downloads\padel-tournament\index.html - its `:root` block and the values used throughout its stylesheet). padel-tournament is a single dark theme, so this file is too now - no light palette, no `.dark` / `[data-theme]` colour-override block to maintain.
 * Previously mirrored arksoft-platform's dashboard sheet (arksoft-platform/clients/admin/src/styles/globals.css); that link is broken on purpose - this catalog has its own visual identity now, ported from padel-tournament instead. Do not re-sync from arksoft-platform.
 * Architecture (top-down): 1. PRIMITIVES (padel-tournament's flat palette, never referenced directly by a component) 2. SEMANTICS (purpose-named vars, the public API components reference) 3. SURFACES (elevation steps) 4. SYSTEM (typography, motion, radii, shadows) 5. LEGACY (pre-port names repointed at the semantics above, introducing no new colour, still spoken by ark-components.css, every *.razor.css and MudBlazor's own theme).
 * Compiled to ark-tokens.css by AspNetCore.SassCompiler: App.razor and the MAUI host's index.html both link the compiled output directly.
 * `data-theme="dark"` and `.dark` are still stamped on <html> by ark-theme.js, as a safety net for any rule in ark-base.css/ark-components.css/ark-mud.css scoped to those selectors for non-colour purposes - leave the stamping in place even though colour no longer needs it.
 */
:root {
  /* 1. PRIMITIVES: padel-tournament's flat dark palette; one theme now, so each colour is a single stop, no separate light/dark pair to maintain. */
  --pt-bg: #0a0e0c;
  --pt-bg-elev: #121815;
  --pt-bg-elev-2: #1a221e;
  --pt-line: #243029;
  --pt-line-bright: #34453b;
  --pt-text: #e8efe9;
  --pt-text-dim: #8a9b91;
  --pt-accent: #c5ff3d;
  --pt-accent-dim: #8aaf2a;
  --pt-accent-hover: #d4ff5e;
  --pt-warn: #ff7a45;
  --pt-success: #4ade80;
  --pt-warning: #ffb020;
  --pt-info: #4da3ff;
  --pt-purple: #a845ff;
  --pt-blue: #45b3ff;
  --pt-pink: #ff45a8;
  --pt-amber: #ffd145;
  /* 2. SEMANTICS */
  --background: var(--pt-bg);
  --foreground: var(--pt-text);
  --card: var(--pt-bg-elev);
  --card-foreground: var(--pt-text);
  --popover: var(--pt-bg-elev-2);
  --popover-foreground: var(--pt-text);
  --primary: var(--pt-accent);
  /* Lime is a bright fill, not a dark one - it needs dark text on top, the opposite of the old teal; matches padel-tournament's own `.btn { color: var(--bg) }`. */
  --primary-foreground: var(--pt-bg);
  --primary-hover: var(--pt-accent-hover);
  --primary-soft: oklch(from var(--primary) l c h / 0.10);
  /* Theme-independent, unchanged: white-on-scrim reads the same regardless of theme. */
  --overlay: oklch(0 0 0 / 0.55);
  --overlay-foreground: oklch(1 0 0);
  --secondary: var(--pt-bg-elev-2);
  --secondary-foreground: var(--pt-text);
  --muted: var(--pt-bg-elev-2);
  --muted-foreground: var(--pt-text-dim);
  /* Accent = hover chip, a quiet highlight - NOT padel-tournament's own `--accent`, which means "the brand colour" there (that meaning is `--primary` here); this token keeps its old job, just as a faint lime tint instead of a grey one. */
  --accent: rgba(197, 255, 61, 0.08);
  --accent-foreground: var(--pt-text);
  --saffron: var(--pt-accent-dim);
  --saffron-foreground: var(--pt-bg);
  --saffron-ink: var(--pt-accent-dim);
  /* padel-tournament's own danger button fills with --warn and puts dark text on it. */
  --destructive: var(--pt-warn);
  --destructive-foreground: var(--pt-bg);
  --success: var(--pt-success);
  --success-foreground: var(--pt-bg);
  --warning: var(--pt-warning);
  --warning-foreground: var(--pt-bg);
  --info: var(--pt-info);
  --info-foreground: var(--pt-bg);
  /* Status "quads": a translucent tint of the status colour for the fill, the full-strength colour for ink/edge - the same rgba-tinting technique padel-tournament uses throughout (accent-tinted hovers/glows), applied to each status colour. */
  --success-ink: var(--success);
  --success-bg: rgba(74, 222, 128, 0.12);
  --success-edge: rgba(74, 222, 128, 0.4);
  --warning-ink: var(--warning);
  --warning-bg: rgba(255, 176, 32, 0.12);
  --warning-edge: rgba(255, 176, 32, 0.4);
  --danger-ink: var(--destructive);
  --danger-bg: rgba(255, 122, 69, 0.12);
  --danger-edge: rgba(255, 122, 69, 0.4);
  --info-ink: var(--info);
  --info-bg: rgba(77, 163, 255, 0.12);
  --info-edge: rgba(77, 163, 255, 0.4);
  --border: var(--pt-line);
  --border-strong: var(--pt-line-bright);
  --input: var(--pt-line-bright);
  --ring: var(--pt-accent);
  /* 3. SURFACES - explicit elevation; padel-tournament only draws three levels, so step 4 repeats step 3 rather than inventing a fourth. */
  --surface-1: var(--pt-bg);
  --surface-2: var(--pt-bg-elev);
  --surface-3: var(--pt-bg-elev-2);
  --surface-4: var(--pt-bg-elev-2);
  --surface-1-hover: var(--pt-bg-elev);
  --surface-2-hover: var(--pt-bg-elev-2);
  /* Charts: the brand accent first, then four more distinct hues pulled from padel-tournament's own saturated set, so a five-series chart stays readable apart. */
  --chart-1: var(--pt-accent);
  --chart-2: var(--pt-blue);
  --chart-3: var(--pt-purple);
  --chart-4: var(--pt-pink);
  --chart-5: var(--pt-amber);
  --chart-grid: rgba(232, 239, 233, 0.12);
  /* 4. SYSTEM */
  --font-display: 'Bebas Neue', 'Arial Narrow', 'Roboto Condensed', sans-serif-condensed, 'Avenir Next Condensed', Arial, ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter Tight', Arial, ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, 'Liberation Mono', monospace;
  --font-feature-default: 'tnum';
  --font-feature-tabular: 'tnum';
  /* padel-tournament's own scale: sharp, not rounded. Base aliases -md, as before. */
  --radius: 4px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --ease-out-cubic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --duration-fast: 120ms;
  --duration-default: 150ms;
  --duration-slow: 250ms;
  /* padel-tournament's own shadow stack — plain black, not oklch. */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 60px -8px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 24px 70px -8px rgba(0, 0, 0, 0.6);
  /* padel-tournament's own top-edge sheen range is 0.06-0.07; the old dark value (0.06) already matches it. */
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Bebas Neue is a wide, caps-only display face normally set with open tracking - the opposite of the old condensed-sans convention, so this flips from negative to positive. */
  --tracking-display: 0.05em;
  --tracking-tight: -0.015em;
  --color-scheme: dark;
  color-scheme: dark;
}

/* 5. LEGACY ARK NAMES: the vocabulary this catalog used before the port. Each line points an old name at a value sections 1-4 already define, introducing no colour; most already read a *semantic* name and needed no edit, only the handful reading a now-removed primitive (the old --brand-* / --neutral-* / --tertiary-500 ramp) are repointed below. */
:root {
  /* Brand */
  --brand-primary: var(--primary);
  --brand-secondary: var(--saffron);
  --brand-tertiary: var(--pt-purple);
  /* Neutrals - stock greys, kept literal, unchanged: these were already theme-invariant and nothing in sections 1-4 replaces them. */
  --gray-50: #f3f4f5;
  --gray-200: rgba(242, 242, 242, 1);
  --gray-700: #374151;
  --gray-800: #1f2937;
  /* Semantic brand */
  --primary-color: var(--primary);
  --primary-hover-color: var(--primary-hover);
  /* Same darken-on-press idiom ark-base.css's login button already uses for --primary. */
  --primary-active-color: color-mix(in srgb, var(--primary) 78%, black);
  --secondary-color: var(--saffron);
  --secondary-hover-color: color-mix(in srgb, var(--saffron) 80%, white);
  --tertiary-color: var(--pt-purple);
  --tertiary-hover-color: color-mix(in srgb, var(--pt-purple) 85%, black);
  /* Ink for the purple fill - same split --saffron-foreground makes, the page ground not --pt-text: near-white on --pt-purple measures 3.6:1 and fails AA, the dark ground measures 4.6:1 and passes. ark-mud.css pairs it with --tertiary-color on the Admin chip and on --mud-palette-tertiary-text. */
  --tertiary-foreground: var(--pt-bg);
  /* State - the quads are already section-2 names; the old `-text` / `-border` spellings point at their `-ink` / `-edge` members, not the plain colour. */
  --success-color: var(--success);
  --success-text: var(--success-ink);
  --success-border: var(--success-edge);
  --warning-color: var(--warning);
  --warning-text: var(--warning-ink);
  --warning-border: var(--warning-edge);
  --danger-color: var(--destructive);
  --danger-text: var(--danger-ink);
  --danger-border: var(--danger-edge);
  --info-color: var(--info);
  --info-text: var(--info-ink);
  --info-border: var(--info-edge);
  /* Sizing. Unchanged, cascades. */
  --box-shadow: var(--shadow-sm);
  --shadow-brand: var(--shadow-lift);
  --motion-fast: var(--duration-fast);
  /* Spacing/layout - pre-existing drift already noted as unused holdovers (they don't match ArkTheme.cs's real DrawerWidthLeft/AppbarHeight); not touched by this port. */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --sidebar-width: 270px;
  --sidebar-width-collapsed: 59px;
  --topbar-height: 60px;
  --breadcrumb-height: 40px;
  --page-title-height: 40px;
  --container-padding-x: var(--spacing-md);
  --container-padding-mobile: var(--spacing-md);
  --container-padding-tablet: var(--spacing-lg);
  --container-padding-desktop: var(--spacing-lg);
  --mobile-xs: 320px;
  --gutter-x: 1.5rem;
  /* Typography: font family lines are semantic refs, unchanged, cascade; size/weight lines are the same pre-existing drift as the spacing block above - not touched. */
  --font-family-base: var(--font-sans);
  --font-family-heading: var(--font-display);
  --font-family-body: var(--font-sans);
  --font-family-mono: var(--font-mono);
  --font-size-base: 12px;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  /* Gradient */
  --brand-gradient-start: var(--primary);
  --brand-gradient-end: var(--pt-purple);
  /* Menu icons */
  --menu-icon-color: var(--muted-foreground);
  --menu-icon-color-hover: var(--primary-hover);
  --menu-icon-color-active: var(--primary);
  --menu-icon-color-selected: var(--pt-purple);
  /* Was a hardcoded white: a selected row's background can be the lime primary or the purple accent, both bright, so white text would fail contrast on either - dark text (the app's own background colour) reads on both. */
  --menu-link-color-selected: var(--background);
  /* Text. Unchanged except --text-muted, which pointed at a now-removed primitive. */
  --text: var(--foreground);
  --text-color: var(--foreground);
  --text-header: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --text-muted: var(--muted-foreground);
  /* Borders: --border-color-secondary was a 20%-alpha tint of the old purple #6a329c, recomputed for the new purple #a845ff (rgb 168 69 255) at the same alpha. */
  --border-color: var(--border);
  --button-border: var(--border-strong);
  --border-color-secondary: rgba(168, 69, 255, 0.20);
  /* Surfaces. Unchanged, cascades. */
  --surface-bg: var(--surface-1);
  --surface-subtle: var(--surface-4);
  --surface-bg-2: var(--surface-4);
  --surface-glass: oklch(from var(--card) l c h / 0.85);
  --surface-glass-strong: oklch(from var(--card) l c h / 0.92);
  --grid-header-bg: var(--surface-4);
  --grid-header-line: var(--border-strong);
  /* Atmospheric page background - same soft brand-colour glow, now the lime, not the teal. */
  --workspace-mesh:
      radial-gradient(ellipse 60% 40% at 15% -5%, oklch(from var(--primary) l c h / 0.10), transparent 70%);
  /* Hover / selection - was a 10-15%-alpha teal tint, now the same recipe padel-tournament uses for hover/active tints (e.g. its bottom-nav active state). */
  --hover-surface: rgba(197, 255, 61, 0.08);
  --selection: rgba(197, 255, 61, 0.15);
  /* Drawer. Unchanged, cascades. */
  --drawer-text: var(--foreground);
  --drawer-count: var(--primary);
}

/* System-preference fallback removed: with one theme, `color-scheme: dark` is already set unconditionally above, so there is nothing left for a `@media (prefers-color-scheme: dark)` block to add. */
/* 6. PLATFORM TAIL: the rest of the upstream sheet's `:root` declarations. The old dark-mode override for this block (a slightly stronger grid tint and a deeper card-hover shadow) is merged straight into the values below, since that is now the only mode there is. */
:root {
  --text-display-page: 1.5rem; /* 24px */
  --text-display-section: 1.25rem; /* 20px */
  --text-display-card: 1.0625rem; /* 17px */
  --text-display-stat: 1.75rem; /* 28px */
  --text-sm: 0.875rem; /* 14px */
  --text-xs: 0.75rem; /* 12px */
  --tracking-meta: 0.22em;
  --border-emphasis: var(--foreground);
  --shadow-card: var(--shadow-sm);
  /* Was --shadow-lg outside dark mode, --shadow-lift inside it; always the deeper one now. */
  --shadow-card-hover: var(--shadow-lift);
  /* Was 0.04 outside dark mode, 0.05 inside it; always the dark value now. */
  --grid-alpha: 0.05;
}

/*# sourceMappingURL=ark-tokens.css.map */