/* ==========================================================================
   payments.gi — Design Tokens
   All visual decisions as CSS custom properties.
   Source of truth: docs/DESIGN-SYSTEM.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light Mode (default)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Palette — primary */
  --color-primary:        #0B2545;
  --color-accent:         #13818C;
  --color-accent-hover:   #0F6B74;
  --color-warm:           #C9A84C;
  --color-warm-hover:     #B8963E;

  /* Palette — surfaces */
  --color-bg:             #F8F7F4;
  --color-surface:        #FFFFFF;
  --color-offset:         #F0EEEA;
  --color-border:         #E2E0DC;
  --color-border-light:   #EEEDEA;

  /* Palette — text */
  --color-text:           #1A1A1A;
  --color-text-muted:     #5C5C5C;
  --color-text-faint:     #A0A0A0;
  --color-text-inverse:   #FFFFFF;

  /* Palette — semantic */
  --color-success:        #2E7D32;
  --color-warning:        #F9A825;
  --color-danger:         #C62828;

  /* Shadows — navy-tinted */
  --shadow-sm:  0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-md:  0 4px 12px rgba(11, 37, 69, 0.08);
  --shadow-lg:  0 8px 24px rgba(11, 37, 69, 0.12);
  --shadow-xl:  0 16px 48px rgba(11, 37, 69, 0.16);
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-primary:        #1A3A6B;
  --color-accent:         #17A2B0;
  --color-accent-hover:   #1EC4D4;
  --color-warm:           #D4B85C;
  --color-warm-hover:     #E0C86E;

  --color-bg:             #0A1628;
  --color-surface:        #0F1D33;
  --color-offset:         #13243D;
  --color-border:         #1E3150;
  --color-border-light:   #172A45;

  --color-text:           #D4D4D4;
  --color-text-muted:     #9CA3AF;
  --color-text-faint:     #6B7280;
  --color-text-inverse:   #0B2545;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.3);
}

/* System preference fallback (no JS or no saved preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:        #1A3A6B;
    --color-accent:         #17A2B0;
    --color-accent-hover:   #1EC4D4;
    --color-warm:           #D4B85C;
    --color-warm-hover:     #E0C86E;

    --color-bg:             #0A1628;
    --color-surface:        #0F1D33;
    --color-offset:         #13243D;
    --color-border:         #1E3150;
    --color-border-light:   #172A45;

    --color-text:           #D4D4D4;
    --color-text-muted:     #9CA3AF;
    --color-text-faint:     #6B7280;
    --color-text-inverse:   #0B2545;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.3);
  }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
:root {
  /* Font stacks */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale — fluid clamp */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: clamp(0.9375rem, 0.85rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 0.65vw, 2rem);
  --text-3xl:  clamp(1.75rem, 1.4rem + 1.1vw, 2.625rem);
  --text-4xl:  clamp(2rem, 1.5rem + 1.6vw, 3.5rem);

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}

/* --------------------------------------------------------------------------
   Spacing Scale (4px grid)
   -------------------------------------------------------------------------- */
:root {
  --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 */
}

/* --------------------------------------------------------------------------
   Content Widths
   -------------------------------------------------------------------------- */
:root {
  --width-narrow:  680px;
  --width-content: 960px;
  --width-wide:    1200px;
  --width-max:     1440px;
}

/* --------------------------------------------------------------------------
   Border Radii
   -------------------------------------------------------------------------- */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
}

/* --------------------------------------------------------------------------
   Transitions
   -------------------------------------------------------------------------- */
:root {
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}