/* ==========================================================================
   Mapeico — Design Tokens
   Single source of truth. All other CSS files reference these variables only.
   ========================================================================== */

:root {
  /* ── Color ──────────────────────────────────────────────────────────────── */
  /* Ink: calm, trustworthy deep navy. Primary: deep teal. */
  --color-ink:        #0B1F2A;
  --color-ink-soft:   #123245;
  --color-ink-faint:  #24485E;

  --color-primary:    #0F6B6B;
  --color-primary-dk: #0B5252;
  --color-primary-bg: #E6F4F4;

  --color-surface:    #FFFFFF;
  --color-surface-2:  #F7F9FA;

  --color-sand:       #F7F4EE;
  --color-sand-2:     #EFE8DA;
  --color-sand-3:     #E5DCCF;

  --color-mint:       #DFF5EE;
  --color-mint-2:     #BFDCCF;

  --color-amber:      #E0A030;
  --color-amber-bg:   #FBF3DD;

  --color-red:        #C8453B;
  --color-red-bg:     #FBEAEA;

  --color-success:    #1F8B4C;
  --color-success-bg: #E3F4EA;

  --color-text:       #1A2A38;
  --color-text-soft:  #4A5E72;
  --color-text-faint: #5F7085;
  /* Text colors for use on dark (ink) surfaces */
  --color-text-on-dark: #C7D2DC;
  /* AA-safe text variants of the accent colors (badges, small text) */
  --color-amber-text:  #8F6410;
  --color-success-text:#15713C;
  --color-red-text:    #B23A31;

  --color-border:     #E2E7ED;
  --color-border-2:   #D5DCE2;

  --color-white:      #FFFFFF;
  --color-black:      #0B1F2A;

  --color-badge-ink:  #0B1F2A;
  --color-badge-mint: #DFF5EE;
  --color-badge-amber:#FBF3DD;
  --color-badge-red:  #FBEAEA;

  /* ── Semantic / status ─────────────────────────────────────────────────── */
  --status-available:   var(--color-success-text);
  --status-available-bg:var(--color-success-bg);

  --status-pending:     var(--color-amber-text);
  --status-pending-bg:  var(--color-amber-bg);

  --status-disputed:    var(--color-red-text);
  --status-disputed-bg: var(--color-red-bg);

  --status-in-escrow:   var(--color-primary);
  --status-in-escrow-bg:var(--color-primary-bg);

  --status-completed:   var(--color-success-text);
  --status-completed-bg:var(--color-success-bg);

  --status-cancelled:   var(--color-text-faint);
  --status-cancelled-bg:var(--color-sand);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.8125rem; /* 13px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.375rem;  /* 22px */
  --font-size-2xl:  1.625rem;  /* 26px */
  --font-size-3xl:  2.125rem;  /* 34px */
  --font-size-4xl:  2.75rem;  /* 44px */
  --font-size-5xl:  3.75rem;  /* 60px */

  --line-height-tight: 1.2;
  --line-height-base:  1.6;
  --line-height-soft:  1.75;

  /* ── Spacing (8px scale) ──────────────────────────────────────────────── */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --max-content: 1120px;
  --content-pad: 24px;
  --section-pad: 96px;
  --section-pad-mobile: 56px;

  /* ── Shape & shadows ──────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 31, 42, 0.04),
               0 1px 3px rgba(11, 31, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(11, 31, 42, 0.06),
               0 4px 16px rgba(11, 31, 42, 0.08);
  --shadow-lg: 0 8px 32px rgba(11, 31, 42, 0.10),
               0 4px 12px rgba(11, 31, 42, 0.06);
  --shadow-xl: 0 16px 48px rgba(11, 31, 42, 0.14),
               0 8px 24px rgba(11, 31, 42, 0.08);

  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-md);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 150ms;
  --duration-norm: 200ms;
  --duration-slow: 350ms;

  --trans-default: 0.2s var(--ease-out);

  /* ── Content widths ───────────────────────────────────────────────────── */
  --width-sm: 640px;
  --width-md: 768px;
  --width-lg: 960px;
  --width-xl: 1120px;

  /* ── Header / app shell ───────────────────────────────────────────────── */
  --header-h: 64px;
  --banner-h: 36px;
  --app-shrink: 240px;
  --nav-collapsed: 0;

  /* ── Focus ring ───────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(15, 107, 107, 0.25),
                0 1px 4px rgba(11, 31, 42, 0.12);
  --focus-ring-offset: 2px;
}