/**
 * KeySend Design System - TailwindCSS v4 Theme Configuration
 *
 * Neobrutalist Gumroad-inspired design system with Lavender Rose accent.
 * Converted from /prototype/css/tokens.css to TailwindCSS v4 @theme directive.
 *
 * Design Principles:
 * - Bold + honest UI with thick borders and big type
 * - High contrast: pure black (#000) on white panels over light paper
 * - Lavender Rose (#FBA0E3) as primary accent
 * - Hard offset shadows (4-8px) with zero blur
 * - Heavy typography weights (900 H1, 800 H2, 700 H3/buttons)
 * - 8pt grid with thick separations (24-32px gaps)
 * - Accessible: WCAG 2.1 AA minimum contrast ratios
 */

@theme {
  /* ========================================================================
     COLOR PALETTE
     ======================================================================== */

  /* Core Colors - Black/White Foundation */
  --color-ink: #000000;              /* Pure black - primary text (21:1 contrast on white) */
  --color-paper: #FAFAFA;            /* Light grey - page background */
  --color-panel: #FFFFFF;            /* Pure white - card/panel background */
  --color-border: #000000;           /* Pure black - all borders */
  /* --color-accent: #FBA0E3;           Lavender Rose - Gumroad pink (4.8:1 on white) */
  --color-accent: #fa4b66;
  --color-accent-ink: #000000;       /* Black text on pink accent */
  --color-muted: #5A5A5A;            /* Dark grey - secondary text (7:1 on white) */
  --color-wash: #F2F2F2;             /* Subtle fill - hover/selected states */
  --color-focus: #000000;            /* Pure black - focus outline */

  /* Status & Semantic Colors (Bold and Saturated) */
  --color-ok: #17A34A;               /* Green - success states (4.5:1 on white) */
  --color-warn: #FFD700;             /* Bright yellow - warnings (1.4:1 - use black text) */
  --color-danger: #D90429;           /* Red - errors/destructive (7.5:1 on white) */
  --color-info: #0066FF;             /* Electric blue - informational (8.6:1 on white) */

  /* Vibrant Accents (Optional Secondary Colors) */
  --color-accent-alt: #FFD700;       /* Bright yellow - alternative CTA */
  --color-accent-success: #39FF14;   /* Neon green - success actions */

  /* Colored Backgrounds (Soft Tints for Sections/Cards) */
  --color-bg-pink: #FFF5FB;          /* Soft pink (5% Lavender Rose) */
  --color-bg-blue: #F0F9FF;          /* Soft blue */
  --color-bg-yellow: #FFFBEB;        /* Soft yellow */
  --color-bg-green: #F0FDF4;         /* Soft green */

  /* ========================================================================
     TYPOGRAPHY SCALE
     ======================================================================== */

  /* Font Sizes */
  --font-size-h1: 2.5rem;           /* 40px - Display headings */
  --font-size-h2: 2.0rem;           /* 32px - Section headings */
  --font-size-h3: 1.5rem;           /* 24px - Subsection headings */
  --font-size-body: 1rem;           /* 16px - Body text */
  --font-size-small: 0.875rem;      /* 14px - Small text */
  --font-size-tiny: 0.75rem;        /* 12px - Labels/badges */

  /* Font Weights */
  --font-weight-black: 900;         /* H1 */
  --font-weight-extra-bold: 800;    /* H2 */
  --font-weight-bold: 700;          /* H3, buttons, labels */
  --font-weight-semibold: 600;      /* Emphasized body */
  --font-weight-medium: 500;        /* Medium emphasis */
  --font-weight-normal: 400;        /* Body text */

  /* Line Heights */
  --line-height-tight: 1.2;         /* Headings */
  --line-height-normal: 1.5;        /* Body text */
  --line-height-relaxed: 1.6;       /* Small text */

  /* Letter Spacing */
  --letter-spacing-tighter: -0.02em; /* H1 */
  --letter-spacing-tight: -0.01em;   /* H2 */
  --letter-spacing-normal: 0;        /* Default */

  /* Font Families */
  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ========================================================================
     SPACING SCALE (8pt grid with thick separations)
     ======================================================================== */

  --spacing-1: 0.25rem;          /* 4px */
  --spacing-2: 0.5rem;           /* 8px */
  --spacing-3: 0.75rem;          /* 12px */
  --spacing-4: 1rem;             /* 16px */
  --spacing-6: 1.5rem;           /* 24px - minimum block separation */
  --spacing-8: 2rem;             /* 32px - standard block separation */
  --spacing-10: 2.5rem;          /* 40px */
  --spacing-12: 3rem;            /* 48px */
  --spacing-16: 4rem;            /* 64px */
  --spacing-20: 5rem;            /* 80px - large section spacing */
  --spacing-24: 6rem;            /* 96px - generous section spacing */
  --spacing-32: 8rem;            /* 128px - dramatic section spacing */

  /* ========================================================================
     BORDER SYSTEM
     ======================================================================== */

  /* Border Widths */
  --border-width-thin: 1px;      /* Internal dividers */
  --border-width-default: 2px;   /* Buttons, inputs */
  --border-width-thick: 3px;     /* Cards, containers */
  --border-width-heavy: 4px;     /* Emphasis, section dividers */

  /* Border Radius */
  --border-radius-none: 0;       /* Hard corners */
  --border-radius-sm: 2px;       /* Badges (hard brutalism) */
  --border-radius-default: 4px;  /* Inputs */
  --border-radius-md: 6px;       /* Inputs (subtle) */
  --border-radius-lg: 8px;       /* Buttons, cards (friendly) */
  --border-radius-xl: 12px;      /* Modals */
  --border-radius-pill: 16px;    /* Pill badges */
  --border-radius-full: 9999px;  /* Pill buttons, avatars */

  /* ========================================================================
     SHADOW SYSTEM (Neobrutalism - Hard Offset Shadows, Zero Blur)
     All shadows offset to bottom-right (positive x and y)
     ======================================================================== */

  --shadow-sm: 4px 4px 0 #000;   /* Hover states, small cards, tags */
  --shadow-md: 6px 6px 0 #000;   /* Buttons default, medium cards, input focus */
  --shadow-lg: 8px 8px 0 #000;   /* Large cards, modals, drawers, primary CTAs */
  --shadow-press: 2px 2px 0 #000; /* Pressed/active state */
  --shadow-pop: 8px 8px 0 #000;  /* Alias for shadow-lg */

  /* ========================================================================
     MOTION TIMING (Snappy, not smooth)
     ======================================================================== */

  --duration-fast: 100ms;       /* Buttons, small elements */
  --duration-quick: 120ms;      /* Default interactions */
  --duration-medium: 150ms;     /* Cards, modals */
  --duration-slow: 200ms;       /* Drawers, page transitions */

  /* Easing Functions */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);     /* Snappy end */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Playful overshoot */
  --ease-linear: linear;        /* Progress bars */

  /* Duration Aliases */
  --duration-base: 120ms;       /* Alias for duration-quick (default) */

  /* ========================================================================
     Z-INDEX LAYERS
     ======================================================================== */

  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* ========================================================================
     BREAKPOINTS (Responsive Design)
     ======================================================================== */

  --breakpoint-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

/* ========================================================================
   BASE STYLES
   ======================================================================== */

html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-family-sans);
  font-size: 16px; /* Prevents iOS zoom on inputs */
}

body {
  margin: 0;
  padding: 0;
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   TYPOGRAPHY SYSTEM
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--line-height-tight);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-tighter);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extra-bold);
  letter-spacing: var(--letter-spacing-tight);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

p {
  margin: 0;
}

/* ========================================================================
   FOCUS STATES (WCAG Compliant)
   4px black outline + 2px offset + 2px inset white ring
   ======================================================================== */

:focus-visible {
  outline: 4px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px white;
}

:focus {
  outline: none;
}

/* ========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}