/* Design tokens copied from the delivery app css/style.css (lines 1-129) on 2026-09-06. Keep in sync by hand when tokens change. */
/* ============================================================
   Master Spas Delivery App — style.css
   Mobile-first, Master Spas branded

   LOCK NOTE:
   Form UI behavior styles are protected by FORM_CHANGE_GUARDRAILS.md.
   Do not alter locked UX patterns unless explicitly requested by owner.
   ============================================================ */

/* Self-hosted fonts — Plus Jakarta Sans (Velocity redesign) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  /* ── Quiet Tool palette — near-black + one blue accent ── */
  --primary:        #1A1A1A;
  --primary-light:  #333333;
  --primary-dark:   #0A0A0A;
  --accent:         #2563EB;
  --accent-light:   #3B82F6;
  --accent-subtle:  #EFF6FF;
  --gold:           #2563EB;
  --gold-text:      #1D4ED8;
  --gold-light:     #EFF6FF;
  --white:          #ffffff;

  /* ── Surfaces ── */
  --bg:             #FAFAFA;
  --card:           #ffffff;
  --surface-raised: #F5F5F5;
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;

  /* ── Text hierarchy ── */
  --text:           #111111;
  --text-sm:        #6B7280;
  --text-xs:        #9CA3AF;

  /* ── Semantic colors ── */
  --success:        #16A34A;
  --success-bg:     #F0FDF4;
  --danger:         #DC2626;
  --danger-bg:      #FEF2F2;
  --warning:        #D97706;
  --warning-bg:     #FFFBEB;

  /* ── Status dots — muted, not screaming ── */
  --status-assigned:   #2563EB;
  --status-inprogress: #D97706;
  --status-completed:  #16A34A;
  --status-invoiced:   #7C3AED;
  --status-paid:       #059669;

  /* ── Shadows — subtle ── */
  --shadow-sm:      none;
  --shadow-hover:   0 2px 8px rgba(0,0,0,0.06);
  --shadow:         0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.12);
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);

  /* ── Radii — tighter, less bubbly ── */
  --radius:         8px;
  --radius-sm:      6px;
  --radius-xs:      4px;
  --radius-pill:    999px;

  /* ── Typography ── */
  --font-sans:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* ── Layout ── */
  --header-h:       56px;
  --transition:     0.15s ease;
}

/* ── Dark Theme — truly dark ── */
[data-theme="dark"] {
  --primary:        #E5E5E5;
  --primary-light:  #D4D4D4;
  --primary-dark:   #0A0A0A;
  --accent:         #3B82F6;
  --accent-light:   #60A5FA;

  --bg:             #0A0A0A;
  --card:           #141414;
  --surface-raised: #1C1C1C;
  --border:         #262626;
  --border-strong:  #404040;

  --text:           #F5F5F5;
  --text-sm:        #A3A3A3;
  --text-xs:        #737373;

  --shadow-sm:      none;
  --shadow-hover:   0 2px 8px rgba(0,0,0,0.4);
  --shadow:         0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.6);
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);

  --success-bg:     #052E16;
  --danger-bg:      #450A0A;
  --warning-bg:     #451A03;

  --white:          #141414;
  --gold:           #3B82F6;
  --gold-text:      #60A5FA;
  --gold-light:     #1E1B4B;

  color-scheme: dark;
}

html, body { margin: 0; font-family: var(--font-sans); color: var(--text); background: var(--bg); }