/*
 * MyMilesAI - Copyright (c) 2025-2026 Harijas LLC. All rights reserved.
 * Confidential and proprietary. Unauthorized use prohibited.
 * MyMilesAI is a trademark of Harijas LLC.
 * MyMilesAI is a recordkeeping tool - not tax advice.
 * See LICENSE for full terms. harijasllc@outlook.com
 */

/* MyMilesAI design tokens — shared by landing + app + auth
   Source of truth reconciled from design A (marketing-site) + B (app-redesign). */

:root {
  /* ─── Neutrals ─── */
  --ink:         #0B0F0E;
  --ink-dim:     #1F1D1A;
  --cream:       #F8F9FA;
  --paper:       #FFFFFF;
  --sand:        #FAFAFA;
  --warm-bg:     #F1F3F5;
  --border:      #E5E7EB;
  --border-alt:  #E8EAED;
  --divider:     #F3F4F6;
  --muted:       #6B7280;
  --muted-dark:  #374151;
  --muted-soft:  #9CA3AF;

  /* ─── Brand (MMAI canonical) ─── */
  --mmai-blue:         #1B4DDB;
  --mmai-blue-light:   #378ADD;
  --mmai-gold:         #C9A96E;
  --mmai-ink:          #0B0F0E;
  --mmai-paper:        #FFFFFF;
  --mmai-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mmai-font-body:    'DM Sans', system-ui, sans-serif;

  /* ─── Brand ─── */
  --accent:       #1B4DDB;
  --accent-soft:  rgba(27, 77, 219, 0.12);
  --success:      #16A34A;                 /* money / green */
  --success-soft: rgba(22, 163, 74, 0.12);
  --warn:         #F59E0B;
  --info:         #2563EB;

  /* Marketing-only brand gradient */
  --g-brand: linear-gradient(90deg, #1B4DDB, #378ADD);
  --g-brand-soft: linear-gradient(90deg, rgba(27,77,219,0.10), rgba(55,138,221,0.06));
  --g-hero-dark: linear-gradient(165deg, #1B1036 0%, #2A1248 60%, #3D1A5A 100%);

  /* ─── Type ─── */
  --font-serif: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;
  --font-brand: 'DM Sans', system-ui, sans-serif;

  /* ─── Radii ─── */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --r-pill: 9999px;

  /* ─── Shadows ─── */
  --sh-sm: 0 1px 2px rgba(11, 15, 14, 0.04), 0 1px 1px rgba(11, 15, 14, 0.02);
  --sh-md: 0 8px 20px -8px rgba(11, 15, 14, 0.12), 0 2px 4px rgba(11, 15, 14, 0.04);
  --sh-lg: 0 24px 56px -20px rgba(11, 15, 14, 0.22);
  --sh-cta: 0 12px 28px -10px rgba(27, 77, 219, 0.45);

  /* ─── Motion ─── */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset + base ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mmai-font-body, var(--font-sans));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--mmai-font-heading); }

html { scroll-behavior: smooth; }

body { min-height: 100vh; }

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--cream); }

/* ─── A11y: focus ring ─── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ─── Skip-to-content ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  html { scroll-behavior: auto; }
}