/* GoVehlo Design System Tokens v1
   Source of truth: design_handoff_govehlo_v1/design-system/tokens/
   Import BEFORE styles.css so existing overrides still win during migration. */

/* ─── Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ═══════════════════════════════════════
     COLORS
     ═══════════════════════════════════════ */

  /* Brand Greens */
  --gv-deep-forest:     #1A2E1F;
  --gv-forest:          #2D6A4F;
  --gv-leaf:            #52B788;
  --gv-mist:            #D8F3DC;

  /* Accent — money ONLY */
  --gv-amber:           #F4A261;
  --gv-amber-light:     #FDE8D8;

  /* Surfaces */
  --gv-warm-white:      #F7F9F8;
  --gv-surface:         #FFFFFF;
  --gv-border:          #E2EDE8;
  --gv-border-strong:   #C4D9CD;

  /* Text */
  --gv-text-primary:    #1A2E1F;
  --gv-text-secondary:  #3D5C48;
  --gv-text-muted:      #6B8F7A;
  --gv-text-on-forest:  #FFFFFF;
  --gv-text-on-amber:   #1A2E1F;

  /* Interaction states */
  --gv-forest-hover:    #245940;
  --gv-forest-active:   #1D4A34;
  --gv-amber-hover:     #E8905C;
  --gv-leaf-hover:      #3FA375;

  /* Semantic */
  --gv-success:         #52B788;
  --gv-success-light:   #D1F5E3;
  --gv-warning:         #F4A261;
  --gv-warning-light:   #FDE8D8;
  --gv-error:           #D95050;
  --gv-error-light:     #FDEDED;

  /* Blue — "Requested" payment status ONLY */
  --gv-blue:            #355d9c;
  --gv-blue-soft:       #e9f0fb;

  /* ═══════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════ */

  --gv-font-display:    'Nunito', system-ui, sans-serif;
  --gv-font-body:       'Inter', system-ui, sans-serif;
  --gv-font-mono:       'Courier New', Courier, monospace;

  /* Display — 32px Nunito 900 */
  --gv-text-display-size:     32px;
  --gv-text-display-weight:   900;
  --gv-text-display-lh:       1.2;
  --gv-text-display-ls:       -0.01em;

  /* Title — 22px Nunito 800 */
  --gv-text-title-size:       22px;
  --gv-text-title-weight:     800;
  --gv-text-title-lh:         1.25;
  --gv-text-title-ls:         -0.005em;

  /* Heading — 17px Nunito 700 */
  --gv-text-heading-size:     17px;
  --gv-text-heading-weight:   700;
  --gv-text-heading-lh:       1.35;

  /* Body — 15px Inter 400 */
  --gv-text-body-size:        15px;
  --gv-text-body-weight:      400;
  --gv-text-body-lh:          1.55;

  /* Label — 13px Inter 500 */
  --gv-text-label-size:       13px;
  --gv-text-label-weight:     500;
  --gv-text-label-lh:         1.4;

  /* Caption — 11px Inter 400 */
  --gv-text-caption-size:     11px;
  --gv-text-caption-weight:   400;
  --gv-text-caption-lh:       1.4;

  /* Mono — 12px Courier New */
  --gv-text-mono-size:        12px;
  --gv-text-mono-weight:      400;
  --gv-text-mono-lh:          1.5;
  --gv-text-mono-ls:          0.04em;

  /* ═══════════════════════════════════════
     SPACING — 4px base grid
     ═══════════════════════════════════════ */

  --gv-space-1:   4px;
  --gv-space-2:   8px;
  --gv-space-3:   12px;
  --gv-space-4:   16px;
  --gv-space-5:   20px;
  --gv-space-6:   24px;
  --gv-space-8:   32px;
  --gv-space-10:  40px;
  --gv-space-12:  48px;
  --gv-space-16:  64px;

  /* Layout */
  --gv-screen-px:     16px;
  --gv-card-padding:  12px;
  --gv-section-gap:   24px;
  --gv-item-gap:      8px;
  --gv-nav-height:    64px;
  --gv-header-height: 72px;
  --gv-touch-target:  44px;

  /* ═══════════════════════════════════════
     BORDERS
     ═══════════════════════════════════════ */

  --gv-radius-sm:     8px;
  --gv-radius-md:     12px;
  --gv-radius-lg:     16px;
  --gv-radius-xl:     20px;
  --gv-radius-full:   9999px;
  --gv-border-width:  1px;

  /* ═══════════════════════════════════════
     SHADOWS — green-tinted
     ═══════════════════════════════════════ */

  --gv-shadow-card:       0 1px 3px rgba(26,46,31,0.07), 0 2px 8px rgba(26,46,31,0.04);
  --gv-shadow-card-hover: 0 4px 16px rgba(26,46,31,0.12), 0 2px 6px rgba(26,46,31,0.06);
  --gv-shadow-elevated:   0 8px 32px rgba(26,46,31,0.16), 0 2px 8px rgba(26,46,31,0.08);
  --gv-shadow-nav:        0 -2px 12px rgba(26,46,31,0.08);
  --gv-shadow-btn:        0 2px 8px rgba(45,106,79,0.30);
  --gv-shadow-btn-amber:  0 2px 8px rgba(244,162,97,0.35);
  --gv-shadow-focus:      0 0 0 3px rgba(45,106,79,0.22);

  /* ═══════════════════════════════════════
     MOTION
     ═══════════════════════════════════════ */

  --gv-duration-instant:  80ms;
  --gv-duration-fast:     140ms;
  --gv-duration-normal:   220ms;
  --gv-duration-slow:     340ms;

  --gv-ease-standard:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --gv-ease-enter:        cubic-bezier(0.0, 0.0, 0.2, 1);
  --gv-ease-exit:         cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --gv-ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  --gv-transition-default:   all var(--gv-duration-normal) var(--gv-ease-standard);
  --gv-transition-color:     color var(--gv-duration-fast) var(--gv-ease-standard),
                             background-color var(--gv-duration-fast) var(--gv-ease-standard);
  --gv-transition-transform: transform var(--gv-duration-normal) var(--gv-ease-spring);
  --gv-transition-shadow:    box-shadow var(--gv-duration-normal) var(--gv-ease-standard);
}