/* =========================================================
   ANYTIME GOLF FRANCHISEE PORTAL — DESIGN TOKENS
   Concept D — "Front Nine Operations" (approved direction)

   Single source of truth for color, spacing, radius, shadow,
   and type used across the whole authenticated portal.
   Variable NAMES are unchanged from the prior implementation
   so every stylesheet/template that already references them
   continues to work; only the VALUES change to the approved
   warm Front Nine palette (cream canvas, white surfaces,
   green actions, beige borders, rust destructive).
   ========================================================= */

:root {
  color-scheme: light;

  /* ---------- Surfaces ---------- */
  --color-bg-page: #faf6ef;      /* warm cream application canvas */
  --color-bg-nav: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #f3eee3;  /* tinted surface */
  --color-bg-sunken: #f0eadc;
  --color-bg-overlay: rgba(43, 38, 32, 0.45);

  /* ---------- Borders ---------- */
  --color-border: #e8e0d0;
  --color-border-strong: #d8cbae;
  --color-border-hairline: #f0eadc;

  /* ---------- Text ---------- */
  --color-text-primary: #2b2620;
  --color-text-secondary: #4f4638;
  --color-text-muted: #7a7060;
  --color-text-disabled: #9c9382;
  --color-text-on-brand: #ffffff;

  /* ---------- Brand / actions ---------- */
  --color-brand: #2e7d5b;
  --color-brand-strong: #24634a;
  --color-brand-soft: #e4f1ea;
  --color-brand-border: #bedbcb;

  --color-action-primary: var(--color-brand);
  --color-action-primary-hover: var(--color-brand-strong);
  --color-action-primary-text: var(--color-text-on-brand);

  --color-action-secondary: #ffffff;
  --color-action-secondary-border: var(--color-border-strong);
  --color-action-secondary-text: var(--color-text-primary);

  --color-action-danger: #a6432e;
  --color-action-danger-hover: #8a3625;
  --color-action-danger-soft: #fbebe6;
  --color-action-danger-border: #e4c1b4;

  /* ---------- Status ---------- */
  --color-success: #2e7d5b;
  --color-success-soft: #e4f1ea;
  --color-success-border: #bedbcb;

  --color-warning: #a16a1f;
  --color-warning-soft: #fbf0dc;
  --color-warning-border: #e9cd93;

  --color-error: #a6432e;
  --color-error-soft: #fbebe6;
  --color-error-border: #e4c1b4;

  --color-info: #35688c;
  --color-info-soft: #e9f1f7;
  --color-info-border: #bfd8e7;

  /* ---------- Disabled / focus ---------- */
  --color-disabled-bg: #f3eee3;
  --color-disabled-text: #9c9382;
  --color-disabled-border: #e0d6c2;

  --color-focus-ring: var(--color-brand);
  --focus-ring: 0 0 0 3px rgba(46, 125, 91, 0.28);

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radius scale (Front Nine: soft, generous) ---------- */
  --radius-sm: 8px;    /* nested/small elements   */
  --radius-md: 12px;   /* controls                */
  --radius-lg: 18px;   /* major cards             */
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---------- Shadow scale (soft, brown-tinted) ---------- */
  --shadow-sm: 0 1px 2px rgba(43, 38, 32, 0.05);
  --shadow-md: 0 1px 2px rgba(43, 38, 32, 0.05), 0 4px 14px rgba(43, 38, 32, 0.05);
  --shadow-lg: 0 10px 34px rgba(43, 38, 32, 0.18);

  /* ---------- Typography ---------- */
  --font-family-base: "Instrument Sans", -apple-system, "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  --font-family-mono: "SF Mono", "Consolas", "Menlo", monospace;

  /* Front Nine: larger base, less tiny administrative text */
  --font-size-xs: 0.78125rem;   /* 12.5px */
  --font-size-sm: 0.84375rem;   /* 13.5px */
  --font-size-base: 0.9375rem;  /* 15px   */
  --font-size-md: 1rem;         /* 16px   */
  --font-size-lg: 1.125rem;     /* 18px   */
  --font-size-xl: 1.3125rem;    /* 21px   */
  --font-size-2xl: 1.625rem;    /* 26px   */
  --font-size-3xl: 1.9375rem;   /* 31px   */

  --line-height-tight: 1.25;
  --line-height-base: 1.55;

  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  /* ---------- Layout ---------- */
  --nav-width: 268px;          /* fixed desktop sidebar width */
  --topbar-height: 56px;       /* retained for legacy references */
  --subnav-height: 44px;       /* retained for legacy references */
  --tabbar-height: 84px;       /* mobile bottom navigation */
  --touch-target-min: 48px;    /* Front Nine deliberate-action controls */

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}