/*
 * Admin design-system foundation.
 *
 * Loaded after tokens-shared.css and before each shell stylesheet. This is the
 * single source of truth for tokens and browser defaults shared by every admin
 * surface. App CSS should contain only layout or behaviour specific to that
 * workspace.
 */
:root {
  /* Semantic colour tokens (admin-scoped) */
  --primary: var(--golfkit-primary, #0f172a);
  --primary-hover: var(--golfkit-primary-hover, #0b1220);
  --primary-muted: var(--golfkit-primary-muted, #64748b);
  --primary-subtle: var(--golfkit-primary-subtle, #cbd5e1);
  --primary-surface: var(--golfkit-primary-surface, #f1f5f9);
  --accent: #226655;
  --accent-rgb: 34, 102, 85;
  --accent-muted: #88bbaa;
  --accent-subtle: #ddeedd;
  /* Darkest step of the accent ramp. Carries accent-coloured text that must
   * clear WCAG AA on the subtle accent wash, where --accent itself only
   * reaches 5.6:1. */
  --accent-strong: #123b30;
  --chart-error: #e05252;
  --hero-overlay-start: rgba(15,23,42,0.85);
  --hero-overlay-mid: rgba(15,23,42,0.5);
  --hero-overlay-end: rgba(15,23,42,0.2);
  --focus-ring: rgba(34,102,85,0.14);

  /* Base tokens (admin-scoped) */
  --shadow: 0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.04);
  /* Elevation aliases, smallest to largest: hairline lift (xs), the default
   * card and control lift (sm), a raised panel or popover (md), and a floating
   * surface (lg). Overlays that sit above the page use --elevation-4. */
  --shadow-xs: var(--elevation-1);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--elevation-2);

  /* Ring colour every gk-* control draws on focus. The readable-colour rule
   * (gkThemeCssVars) replaces it with the theme accent carried to 3:1 against
   * the surface; until a theme applies, it is the accent. */
  --focus-ring-color: var(--accent);
  /* Text on a --primary fill. */
  --primary-fg: var(--golfkit-on-primary, #ffffff);

  /* gk-button defaults. The component reads these tokens and falls back to the
   * same values, so a page that overrides none of them draws the admin button
   * and a stylesheet that needs the button's colours reads them without a
   * fallback of its own. */
  --btn-bg: linear-gradient(180deg, var(--primary), var(--primary-hover));
  --btn-border: var(--primary-hover);
  --btn-color: var(--primary-fg);
  --btn-radius: var(--radius-btn);
  --btn-pad-y: var(--space-md);
  --btn-pad-x: var(--space-2xl);
  --btn-font-size: var(--fs-13);
  --btn-font-weight: 700;
  --btn-alt-bg: var(--card);
  --btn-alt-border: var(--border);
  --btn-alt-color: var(--primary-hover);
  --btn-alt-bg-hover: var(--primary-surface);
  --btn-sm-pad-y: var(--space-xs);
  --btn-sm-pad-x: var(--space-lg);
  --btn-sm-font-size: var(--fs-12);
  --btn-danger-bg: linear-gradient(180deg, #d4442c, #b03620);
  --btn-danger-border: #c9402b;
  --btn-danger-color: #ffffff;

  /* Typography and layout */
  --font-display: 'DM Sans', 'Inter', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --admin-nav-w: 224px;
  --admin-nav-compact-w: 60px;
  --admin-header-h: 64px;
  /* Stable GolfKit navigation chrome shared by every admin surface. */
  --admin-nav-bg: #0f172a;
  --admin-nav-brand-bg: var(--admin-nav-bg);
  --admin-nav-brand-text: #f8fafc;
  --admin-nav-brand-accent: #99ee99;
  --admin-nav-text: #f8fafc;
  --admin-nav-text-rgb: 248, 250, 252;
  --admin-nav-label-text: rgba(248, 250, 252, 0.64);
  --admin-nav-item-text: var(--admin-nav-text);
  --admin-nav-icon-text: var(--admin-nav-text);
  --admin-nav-locked-text: rgba(248, 250, 252, 0.56);
  --admin-nav-locked-label-text: rgba(248, 250, 252, 0.62);
  --admin-nav-child-text: var(--admin-nav-text);
  --admin-nav-ancestor-text: var(--admin-nav-text);
  --admin-nav-hover-bg: rgba(255, 255, 255, 0.1);
  --admin-nav-hover-text: #ffffff;
  --admin-nav-active-bg: rgba(153, 238, 153, 0.16);
  --admin-nav-active-text: #f3fff3;
  --admin-nav-active-marker: #99ee99;
  --admin-nav-child-active-text: var(--admin-nav-text);
  /* Directional elevation keeps the persistent navigation layer distinct
   * from the workspace in both its compact and expanded geometries. */
  --admin-nav-edge-shadow:
    8px 0 24px -12px rgba(var(--primary-rgb), 0.42),
    2px 0 6px -3px rgba(var(--primary-rgb), 0.28);
  --admin-table-head: var(--primary-surface);
  --admin-toolbar-bg: var(--primary-surface);
  --admin-section-divider: var(--border);
  --admin-card-bg: var(--card);
  /* The admin structural border: container edges, table frames, data-row rules.
   * Points at --border-strong so every consumer reads as engineered structure.
   * Genuine hairlines (control borders, inner dividers) opt OUT by using bare
   * --border directly rather than this alias. */
  --admin-border: var(--border-strong);

  /* Shared gk-empty-state admin shape */
  --empty-pad: 48px 24px;
  --empty-heading-font: var(--font-body, inherit);
  --empty-heading-font-size: 16px;
  --empty-heading-font-weight: 600;
  --empty-heading-color: var(--text);
  --empty-msg-font-size: 13px;
  --empty-svg-size: 48px;
  --empty-svg-color: var(--border);
  --empty-icon-opacity: 1;
  --empty-icon-mb: 12px;

  /* Extended palette */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --primary-rgb: 15, 23, 42;
  --highlight-rgb: 219, 89, 66;
  --tan-rgb: 255, 180, 120;
  --paper-rgb: 242, 239, 232;
  --forest-rgb: 24, 58, 44;
  --c-neutral-50-b: #f3f4f6;
  --c-neutral-100: #e8ecea;
  --c-neutral-200: #b7c9be;
  --c-neutral-400: #8a9690;
  --c-neutral-400-b: #888;
  --c-neutral-500: #6b7280;
  --c-neutral-600: #4b5563;
  --c-red-100: #fde2de;
  --c-red-400: #dc2626;
  --c-red-500: #c0392b;
  --c-red-600: #9f2f12;
  --c-red-600-d: #7f1d1d;
  --c-orange-50: #fff8f4;
  --c-orange-200: #e8c0a0;
  --c-orange-400: #f59e0b;
  --c-orange-500-c: #d97706;
  --c-orange-500: #c06010;
  --c-orange-600: #92400e;
  --c-orange-700: #854d0e;
  --c-orange-800: #7a3800;
  --c-amber-50: #fffbeb;
  --c-amber-100: #fef3cd;
  --c-amber-200: #fde68a;
  --c-amber-300: #fcd34d;
  --c-amber-300-c: #d4bc6a;
  --c-amber-500: #eab308;
  --c-amber-700: #856404;
  --c-green-50: #dcf5e5;
  --c-green-300: #6ee7b7;
  --c-green-400: #66bb6a;
  --c-green-500: #16a34a;
  --c-green-600: #4d685d;
  --c-green-600-c: #059669;
  --c-green-700: #0f6b33;
  --c-green-800: #065f46;
  --c-blue-100: #e0f2fe;
  --c-blue-200: #b0c4d4;
  --c-blue-600: #0369a1;
  --c-blue-700: #075985;
  --c-purple-50: #ede9fe;
  --c-purple-500-b: #7e22ce;
  --c-purple-500: #5b21b6;
  --c-purple-600: #6c3483;

  /* Motion master switch (admin-scoped).
   * Components declare state-change transitions as
   * `transition: <prop> var(--gk-motion-dur, 0s) ...`, so this token is the
   * single point that turns admin state-smoothing on. Set to --dur (0.15s) it
   * lights the gk-badge tone cross-fade and gk-pagination hover/opacity fades;
   * unset (its default) they resolve to 0s and snap instantly, as before.
   * Inherits --dur's prefers-reduced-motion collapse (tokens-shared.css), so it
   * self-neutralises to ~instant for reduced-motion users. Admin-only: the
   * storefront never loads this file, so its components keep the 0s fallback. */
  --gk-motion-dur: var(--dur);
}

* { box-sizing: border-box; }
button { font-family: inherit; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}