/**
 * Stickies Design System
 * =====================
 * Extracted from landing page (stickies-124.html)
 *
 * Usage in HTML:
 *   <link rel="stylesheet" href="/css/design-system.css">
 *
 * Usage in React (import in index.js or App.js):
 *   import './css/design-system.css';
 *
 * Usage in styled-components:
 *   color: var(--color-primary);
 */

:root {
  /* ========================================
   * COLORS - Brand
   * ======================================== */
  --color-primary: #0a8838;           /* Brand green - used for accents, links, badges */
  --color-primary-hover: #087a30;     /* Darker green for hover states */
  --color-primary-light: #e8f5ed;     /* Light green for backgrounds */

  --color-cta: #0eb149;               /* Bright green - CTA buttons */
  --color-cta-hover: #0ca142;         /* Darker CTA for hover */

  /* ========================================
   * COLORS - Text (Slate scale)
   * ======================================== */
  --color-text: #0f172a;              /* slate-900 - Primary text, headings */
  --color-text-secondary: #334155;    /* slate-700 - Secondary text */
  --color-text-body: #475569;         /* slate-600 - Body text */
  --color-text-muted: #64748b;        /* slate-500 - Muted text, descriptions */
  --color-text-subtle: #94a3b8;       /* slate-400 - Very muted, strikethrough prices */

  /* ========================================
   * COLORS - Backgrounds
   * ======================================== */
  --color-bg: #ffffff;                /* White - main background */
  --color-bg-subtle: #f8fafc;         /* slate-50 - subtle background, cards */
  --color-bg-muted: #f1f5f9;          /* slate-100 - muted backgrounds */
  --color-bg-accent: #eff6ff;         /* blue-50 - accent backgrounds */

  /* Dark mode / Footer backgrounds */
  --color-bg-dark: #0f172a;           /* slate-900 - footer, dark sections */
  --color-bg-dark-card: #1e293b;      /* slate-800 - dark cards */
  --color-bg-dark-border: #334155;    /* slate-700 - dark borders */

  /* Special backgrounds */
  --color-bg-hero: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  --color-bg-caricature: linear-gradient(to bottom right, #ecfdf5, #d1fae5);

  /* ========================================
   * COLORS - Borders
   * ======================================== */
  --color-border: #e2e8f0;            /* slate-200 - default borders */
  --color-border-light: #f1f5f9;      /* slate-100 - subtle borders */
  --color-border-dark: #334155;       /* slate-700 - dark mode borders */

  /* ========================================
   * COLORS - Status & Badges
   * ======================================== */
  --color-badge-popular: #0a8838;     /* Brand green for "Popular" badge */
  --color-badge-value: #f59e0b;       /* amber-500 for "Best value" badge */
  --color-badge-new: #0a8838;         /* Brand green for "New" badge */

  /* ========================================
   * TYPOGRAPHY - Font Family
   * ======================================== */
  --font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ========================================
   * TYPOGRAPHY - Font Sizes
   * ======================================== */
  --font-size-xs: 0.75rem;            /* 12px - badges, tiny text */
  --font-size-sm: 0.875rem;           /* 14px - small text, nav links */
  --font-size-base: 1rem;             /* 16px - body text */
  --font-size-lg: 1.125rem;           /* 18px - larger body */
  --font-size-xl: 1.25rem;            /* 20px - card titles */
  --font-size-2xl: 1.5rem;            /* 24px - prices, small headings */
  --font-size-3xl: 1.875rem;          /* 30px - section titles mobile */
  --font-size-4xl: 2.25rem;           /* 36px - section titles */
  --font-size-5xl: 3rem;              /* 48px - large section titles */
  --font-size-6xl: 3.75rem;           /* 60px - hero titles desktop */
  --font-size-7xl: 4.5rem;            /* 72px - extra large hero */

  /* ========================================
   * TYPOGRAPHY - Font Weights
   * ======================================== */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;           /* Primary weight for headings */

  /* ========================================
   * TYPOGRAPHY - Line Heights
   * ======================================== */
  --line-height-tight: 1.1;           /* Headings */
  --line-height-snug: 1.25;           /* Subheadings */
  --line-height-normal: 1.5;          /* Body text */
  --line-height-relaxed: 1.625;       /* Descriptions */

  /* ========================================
   * SPACING
   * ======================================== */
  --space-0: 0;
  --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 */

  /* ========================================
   * LAYOUT
   * ======================================== */
  --container-max: 80rem;             /* 1280px - max-w-7xl */
  --container-padding: 1rem;          /* Default container padding */

  /* ========================================
   * BORDER RADIUS
   * ======================================== */
  --radius-sm: 0.25rem;               /* 4px */
  --radius-md: 0.5rem;                /* 8px */
  --radius-lg: 0.75rem;               /* 12px - small buttons */
  --radius-xl: 1rem;                  /* 16px - buttons */
  --radius-2xl: 1.5rem;               /* 24px - cards, large containers */
  --radius-3xl: 2rem;                 /* 32px - extra large cards */
  --radius-full: 9999px;              /* Pills, circles */

  /* ========================================
   * SHADOWS
   * ======================================== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Colored shadows */
  --shadow-primary: 0 10px 15px -3px rgb(10 136 56 / 0.2);
  --shadow-cta: 0 20px 25px -5px rgb(14 177 73 / 0.3);

  /* ========================================
   * TRANSITIONS
   * ======================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-transform: transform 200ms ease;
  --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  --transition-all: all 200ms ease;

  /* ========================================
   * Z-INDEX
   * ======================================== */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
}

/* ========================================
 * COMPONENT CLASSES
 * ======================================== */

/* Button - Primary CTA */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-cta);
  color: white;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-all);
  box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
  background-color: var(--color-cta-hover);
  transform: scale(1.05);
}

/* Button - Secondary */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-all);
}

.btn-secondary:hover {
  background-color: var(--color-bg-subtle);
}

/* Button - Large */
.btn-lg {
  padding: var(--space-5) var(--space-10);
  font-size: var(--font-size-xl);
  border-radius: var(--radius-2xl);
}

/* Card */
.card {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transition: var(--transition-all);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card-body {
  padding: var(--space-6);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-black);
  border-radius: var(--radius-full);
}

.badge-primary {
  background-color: var(--color-primary);
  color: white;
}

.badge-amber {
  background-color: var(--color-badge-value);
  color: white;
}

/* Glass effect (for nav, overlays) */
.glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Container */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Text utilities */
.text-brand {
  color: var(--color-primary);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Animation - CTA pulse */
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.animate-pulse-soft {
  animation: pulse-soft 3s infinite;
}

/* Focus styles for accessibility */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* RTL support - already built into the design */
[dir="rtl"] .card-body {
  text-align: right;
}