/* ==========================================================================
   ULTIMATE LOGS MARKETPLACE — Design System
   Version: 2.0

   A clean, white, premium design system inspired by Stripe, Apple, and Notion.
   Colors derived from the brand logo (violet-purple).

   This file layers ON TOP of existing main.css and Tailwind utilities.
   It does NOT break existing --base variables or dynamic color.php.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* --- Brand Colors (derived from logo) --- */
  /* Primary: Deep violet-purple from the logo petals */
  --ds-primary-h: 263;
  --ds-primary-s: 70%;
  --ds-primary-l: 50%;
  --ds-primary: var(--ds-primary-h) var(--ds-primary-s) var(--ds-primary-l);
  --ds-primary-hex: #6D28D9;

  /* Secondary: Softer lavender from the logo's lighter tones */
  --ds-secondary-h: 258;
  --ds-secondary-s: 60%;
  --ds-secondary-l: 66%;
  --ds-secondary: var(--ds-secondary-h) var(--ds-secondary-s) var(--ds-secondary-l);
  --ds-secondary-hex: #9F7AEA;

  /* --- Primary Shades --- */
  --ds-primary-50:  #F5F3FF;   /* Faintest tint — backgrounds */
  --ds-primary-100: #EDE9FE;   /* Very light — hover states */
  --ds-primary-200: #DDD6FE;   /* Light — borders, highlights */
  --ds-primary-300: #C4B5FD;   /* Medium light — badges */
  --ds-primary-400: #A78BFA;   /* Medium — secondary actions */
  --ds-primary-500: #8B5CF6;   /* Standard — interactive elements */
  --ds-primary-600: #752bbf;   /* Strong — primary buttons */
  --ds-primary-700: #6D28D9;   /* Deep — active states */
  --ds-primary-800: #5B21B6;   /* Darker — pressed states */
  --ds-primary-900: #4C1D95;   /* Darkest — heavy emphasis */

  /* --- Neutral Palette --- */
  --ds-white:       #FFFFFF;
  --ds-gray-25:     #FCFCFD;   /* Near-white — page background */
  --ds-gray-50:     #F9FAFB;   /* Off-white — section backgrounds */
  --ds-gray-100:    #F3F4F6;   /* Very light gray — card backgrounds */
  --ds-gray-200:    #E5E7EB;   /* Light gray — borders, dividers */
  --ds-gray-300:    #D1D5DB;   /* Medium light — disabled borders */
  --ds-gray-400:    #9CA3AF;   /* Medium gray — placeholder text */
  --ds-gray-500:    #6B7280;   /* Standard gray — secondary text */
  --ds-gray-600:    #4B5563;   /* Dark gray — body text */
  --ds-gray-700:    #374151;   /* Darker — subheadings */
  --ds-gray-800:    #1F2937;   /* Very dark — headings */
  --ds-gray-900:    #111827;   /* Near-black — primary text */
  --ds-gray-950:    #030712;   /* Deepest — high-contrast text */

  /* --- Semantic / Background Colors --- */
  --ds-bg-page:     var(--ds-gray-25);
  --ds-bg-section:  var(--ds-gray-50);
  --ds-bg-card:     var(--ds-white);
  --ds-bg-elevated: var(--ds-white);
  --ds-bg-subtle:   var(--ds-primary-50);

  /* --- Text Colors --- */
  --ds-text-primary:   var(--ds-gray-900);
  --ds-text-secondary: var(--ds-gray-600);
  --ds-text-muted:     var(--ds-gray-400);
  --ds-text-inverse:   var(--ds-white);
  --ds-text-brand:     var(--ds-primary-600);

  /* --- Border Colors --- */
  --ds-border-light:   var(--ds-gray-200);
  --ds-border-default: var(--ds-gray-300);
  --ds-border-focus:   var(--ds-primary-400);
  --ds-border-subtle:  var(--ds-gray-100);

  /* --- Status Colors --- */
  --ds-success:    #059669;
  --ds-success-bg: #ECFDF5;
  --ds-warning:    #D97706;
  --ds-warning-bg: #FFFBEB;
  --ds-error:      #DC2626;
  --ds-error-bg:   #FEF2F2;
  --ds-info:       #2563EB;
  --ds-info-bg:    #EFF6FF;


  /* =======================================================================
     2. TYPOGRAPHY
     ======================================================================= */

  /* Font Families */
  --ds-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-mono:    'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* Font Sizes — modular scale (1.200 minor third) */
  --ds-text-xs:   0.75rem;    /* 12px */
  --ds-text-sm:   0.875rem;   /* 14px */
  --ds-text-base: 1rem;       /* 16px */
  --ds-text-lg:   1.125rem;   /* 18px */
  --ds-text-xl:   1.25rem;    /* 20px */
  --ds-text-2xl:  1.5rem;     /* 24px */
  --ds-text-3xl:  1.875rem;   /* 30px */
  --ds-text-4xl:  2.25rem;    /* 36px */
  --ds-text-5xl:  3rem;       /* 48px */
  --ds-text-6xl:  3.75rem;    /* 60px */

  /* Line Heights */
  --ds-leading-none:    1;
  --ds-leading-tight:   1.25;
  --ds-leading-snug:    1.375;
  --ds-leading-normal:  1.5;
  --ds-leading-relaxed: 1.625;
  --ds-leading-loose:   2;

  /* Font Weights */
  --ds-font-normal:   400;
  --ds-font-medium:   500;
  --ds-font-semibold: 600;
  --ds-font-bold:     700;

  /* Letter Spacing */
  --ds-tracking-tighter: -0.05em;
  --ds-tracking-tight:   -0.025em;
  --ds-tracking-normal:  0em;
  --ds-tracking-wide:    0.025em;
  --ds-tracking-wider:   0.05em;


  /* =======================================================================
     3. SPACING SYSTEM (8px base grid)
     ======================================================================= */

  --ds-space-0:   0;
  --ds-space-px:  1px;
  --ds-space-0-5: 0.125rem;  /* 2px  */
  --ds-space-1:   0.25rem;   /* 4px  */
  --ds-space-1-5: 0.375rem;  /* 6px  */
  --ds-space-2:   0.5rem;    /* 8px  */
  --ds-space-3:   0.75rem;   /* 12px */
  --ds-space-4:   1rem;      /* 16px */
  --ds-space-5:   1.25rem;   /* 20px */
  --ds-space-6:   1.5rem;    /* 24px */
  --ds-space-8:   2rem;      /* 32px */
  --ds-space-10:  2.5rem;    /* 40px */
  --ds-space-12:  3rem;      /* 48px */
  --ds-space-16:  4rem;      /* 64px */
  --ds-space-20:  5rem;      /* 80px */
  --ds-space-24:  6rem;      /* 96px */
  --ds-space-32:  8rem;      /* 128px */

  /* Section Spacing */
  --ds-section-y:  var(--ds-space-20);  /* 80px between sections */
  --ds-section-y-lg: var(--ds-space-24); /* 96px on larger screens */

  /* Container */
  --ds-container-sm:  640px;
  --ds-container-md:  768px;
  --ds-container-lg:  1024px;
  --ds-container-xl:  1200px;
  --ds-container-2xl: 1400px;
  --ds-container-px:  var(--ds-space-6);  /* 24px horizontal padding */


  /* =======================================================================
     4. BORDER RADIUS
     ======================================================================= */

  --ds-radius-none: 0;
  --ds-radius-sm:   0.25rem;   /* 4px  — small elements, badges */
  --ds-radius-md:   0.5rem;    /* 8px  — buttons, inputs */
  --ds-radius-lg:   0.75rem;   /* 12px — cards, modals */
  --ds-radius-xl:   1rem;      /* 16px — large cards, sections */
  --ds-radius-2xl:  1.25rem;   /* 20px — hero elements */
  --ds-radius-full: 9999px;    /* pill shapes */


  /* =======================================================================
     5. SHADOWS
     ======================================================================= */

  /* Soft, layered shadows for depth — never harsh */
  --ds-shadow-xs:
    0 1px 2px 0 rgba(0, 0, 0, 0.03);

  --ds-shadow-sm:
    0 1px 2px 0 rgba(0, 0, 0, 0.04),
    0 1px 3px 0 rgba(0, 0, 0, 0.06);

  --ds-shadow-md:
    0 2px 4px -1px rgba(0, 0, 0, 0.04),
    0 4px 6px -1px rgba(0, 0, 0, 0.06);

  --ds-shadow-lg:
    0 4px 6px -2px rgba(0, 0, 0, 0.03),
    0 10px 15px -3px rgba(0, 0, 0, 0.06);

  --ds-shadow-xl:
    0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 20px 25px -5px rgba(0, 0, 0, 0.06);

  --ds-shadow-2xl:
    0 25px 50px -12px rgba(0, 0, 0, 0.12);

  /* Colored shadow (brand tint — for primary buttons/cards on hover) */
  --ds-shadow-primary-sm:
    0 1px 3px 0 rgba(109, 40, 217, 0.08),
    0 1px 2px 0 rgba(109, 40, 217, 0.12);

  --ds-shadow-primary-md:
    0 4px 6px -1px rgba(109, 40, 217, 0.08),
    0 2px 4px -1px rgba(109, 40, 217, 0.12);

  --ds-shadow-primary-lg:
    0 10px 20px -3px rgba(109, 40, 217, 0.10),
    0 4px 6px -2px rgba(109, 40, 217, 0.06);


  /* =======================================================================
     6. TRANSITIONS
     ======================================================================= */

  --ds-transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-base:    200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-slow:    300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ==========================================================================
   7. BASE RESET & GLOBAL STYLES
   ========================================================================== */

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-heading);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary);
  letter-spacing: var(--ds-tracking-tight);
  line-height: var(--ds-leading-tight);
}


/* ==========================================================================
   8. COMPONENT STYLES
   ========================================================================== */

/* -------------------------------------------------------------------------
   8a. BUTTONS
   ------------------------------------------------------------------------- */

/* Base button reset */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  line-height: 1;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition:
    background-color var(--ds-transition-base),
    border-color var(--ds-transition-base),
    color var(--ds-transition-base),
    box-shadow var(--ds-transition-base),
    transform var(--ds-transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.ds-btn:active {
  transform: translateY(1px);
}

/* Primary Button */
.ds-btn-primary {
  background-color: var(--ds-primary-600);
  color: var(--ds-white);
  border-color: var(--ds-primary-600);
}

.ds-btn-primary:hover {
  background-color: var(--ds-primary-700);
  border-color: var(--ds-primary-700);
  box-shadow: var(--ds-shadow-primary-sm);
}

.ds-btn-primary:focus-visible {
  outline: 2px solid var(--ds-primary-400);
  outline-offset: 2px;
}

/* Secondary Button */
.ds-btn-secondary {
  background-color: var(--ds-white);
  color: var(--ds-gray-700);
  border-color: var(--ds-gray-300);
}

.ds-btn-secondary:hover {
  background-color: var(--ds-gray-50);
  border-color: var(--ds-gray-400);
  box-shadow: var(--ds-shadow-xs);
}

/* Ghost Button */
.ds-btn-ghost {
  background-color: transparent;
  color: var(--ds-gray-600);
  border-color: transparent;
}

.ds-btn-ghost:hover {
  background-color: var(--ds-gray-100);
  color: var(--ds-gray-900);
}

/* Soft/Tinted Button (primary tint) */
.ds-btn-soft {
  background-color: var(--ds-primary-50);
  color: var(--ds-primary-700);
  border-color: transparent;
}

.ds-btn-soft:hover {
  background-color: var(--ds-primary-100);
  color: var(--ds-primary-800);
}

/* Button Sizes */
.ds-btn-sm {
  font-size: var(--ds-text-xs);
  padding: 0.5rem 0.875rem;
  border-radius: var(--ds-radius-sm);
}

.ds-btn-lg {
  font-size: var(--ds-text-base);
  padding: 0.75rem 1.5rem;
  border-radius: var(--ds-radius-md);
}

.ds-btn-xl {
  font-size: var(--ds-text-lg);
  padding: 0.875rem 2rem;
  border-radius: var(--ds-radius-lg);
}


/* -------------------------------------------------------------------------
   8b. CARDS
   ------------------------------------------------------------------------- */

.ds-card {
  background-color: var(--ds-bg-card);
  border: 1px solid var(--ds-border-light);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-6);
  transition:
    box-shadow var(--ds-transition-base),
    border-color var(--ds-transition-base);
}

.ds-card:hover {
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-gray-300);
}

/* Card without hover effect */
.ds-card-static {
  background-color: var(--ds-bg-card);
  border: 1px solid var(--ds-border-light);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-6);
}

/* Elevated card (no border, stronger shadow) */
.ds-card-elevated {
  background-color: var(--ds-bg-elevated);
  border: none;
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  padding: var(--ds-space-6);
  transition: box-shadow var(--ds-transition-base);
}

.ds-card-elevated:hover {
  box-shadow: var(--ds-shadow-xl);
}

/* Subtle card (very faint background, no border) */
.ds-card-subtle {
  background-color: var(--ds-bg-section);
  border: none;
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-6);
  transition: background-color var(--ds-transition-base);
}

.ds-card-subtle:hover {
  background-color: var(--ds-gray-100);
}


/* -------------------------------------------------------------------------
   8c. FORM INPUTS
   ------------------------------------------------------------------------- */

.ds-input {
  display: block;
  width: 100%;
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-normal);
  color: var(--ds-text-primary);
  background-color: var(--ds-white);
  border: 1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-md);
  padding: 0.625rem 0.875rem;
  line-height: var(--ds-leading-normal);
  transition:
    border-color var(--ds-transition-base),
    box-shadow var(--ds-transition-base);
}

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

.ds-input:hover {
  border-color: var(--ds-gray-400);
}

.ds-input:focus {
  outline: none;
  border-color: var(--ds-primary-500);
  box-shadow:
    0 0 0 3px rgba(109, 40, 217, 0.08);
}

.ds-input:disabled {
  background-color: var(--ds-gray-50);
  color: var(--ds-text-muted);
  cursor: not-allowed;
}

/* Label */
.ds-label {
  display: block;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  color: var(--ds-gray-700);
  margin-bottom: var(--ds-space-1-5);
}

/* Helper text */
.ds-helper-text {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin-top: var(--ds-space-1);
}

/* Textarea */
.ds-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select */
.ds-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}


/* -------------------------------------------------------------------------
   8d. BADGES & LABELS
   ------------------------------------------------------------------------- */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  line-height: 1;
  padding: 0.25rem 0.625rem;
  border-radius: var(--ds-radius-full);
  white-space: nowrap;
}

/* Badge variants */
.ds-badge-primary {
  background-color: var(--ds-primary-50);
  color: var(--ds-primary-700);
}

.ds-badge-gray {
  background-color: var(--ds-gray-100);
  color: var(--ds-gray-700);
}

.ds-badge-success {
  background-color: var(--ds-success-bg);
  color: var(--ds-success);
}

.ds-badge-warning {
  background-color: var(--ds-warning-bg);
  color: var(--ds-warning);
}

.ds-badge-error {
  background-color: var(--ds-error-bg);
  color: var(--ds-error);
}

.ds-badge-info {
  background-color: var(--ds-info-bg);
  color: var(--ds-info);
}

/* Dot indicator inside badge */
.ds-badge-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--ds-radius-full);
  background-color: currentColor;
}


/* ==========================================================================
   9. LAYOUT UTILITIES
   ========================================================================== */

/* Page container */
.ds-container {
  width: 100%;
  max-width: var(--ds-container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ds-container-px);
  padding-right: var(--ds-container-px);
}

.ds-container-sm {
  max-width: var(--ds-container-sm);
}

.ds-container-md {
  max-width: var(--ds-container-md);
}

.ds-container-lg {
  max-width: var(--ds-container-lg);
}

.ds-container-2xl {
  max-width: var(--ds-container-2xl);
}

/* Section spacing */
.ds-section {
  padding-top: var(--ds-section-y);
  padding-bottom: var(--ds-section-y);
}

@media (min-width: 1024px) {
  .ds-section {
    padding-top: var(--ds-section-y-lg);
    padding-bottom: var(--ds-section-y-lg);
  }
}

/* Section heading */
.ds-section-heading {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--ds-space-12);
}

.ds-section-heading h2 {
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-font-bold);
  color: var(--ds-text-primary);
  margin-bottom: var(--ds-space-3);
}

.ds-section-heading p {
  font-size: var(--ds-text-lg);
  color: var(--ds-text-secondary);
  line-height: var(--ds-leading-relaxed);
}

/* Divider */
.ds-divider {
  height: 1px;
  background-color: var(--ds-border-light);
  border: none;
  margin: var(--ds-space-6) 0;
}


/* ==========================================================================
   10. SUBTLE BACKGROUND EFFECTS
   ========================================================================== */

/* Very subtle radial gradient — for hero/banner sections */
.ds-bg-gradient-subtle {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(109, 40, 217, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(159, 122, 234, 0.03) 0%, transparent 60%),
    var(--ds-white);
}

/* Slightly more visible gradient — for hero sections */
.ds-bg-gradient-hero {
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(109, 40, 217, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(159, 122, 234, 0.04) 0%, transparent 50%),
    var(--ds-white);
}

/* Top-only gradient blush */
.ds-bg-gradient-top {
  background:
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(109, 40, 217, 0.04) 0%, transparent 70%),
    var(--ds-bg-page);
}

/* Warm neutral background — sections that need differentiation */
.ds-bg-warm {
  background-color: var(--ds-gray-50);
}

/* Brand tinted background */
.ds-bg-brand-tint {
  background-color: var(--ds-primary-50);
}


/* ==========================================================================
   11. EXISTING CLASS OVERRIDES
   Enhance existing classes used in Blade templates without breaking them
   ========================================================================== */

/* Override --base color to use our brand purple where appropriate */
/* Note: color.php sets --base dynamically. These classes enhance visual treatment. */

/* Enhance existing btn--base with our design system feel */
.btn--base {
  font-family: var(--ds-font-body);
  font-weight: var(--ds-font-medium);
  border-radius: var(--ds-radius-md);
  transition:
    background-color var(--ds-transition-base),
    border-color var(--ds-transition-base),
    box-shadow var(--ds-transition-base),
    transform var(--ds-transition-fast);
  letter-spacing: var(--ds-tracking-normal);
}

.btn--base:hover {
  transform: translateY(-1px);
}

.btn--base:active {
  transform: translateY(0);
}

/* Enhance form controls globally */
.form-control,
.form--control {
  font-family: var(--ds-font-body);
  border-radius: var(--ds-radius-md);
  transition:
    border-color var(--ds-transition-base),
    box-shadow var(--ds-transition-base);
}

.form-control:focus,
.form--control:focus {
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.08);
}


/* ==========================================================================
   12. TABLE STYLES
   ========================================================================== */

.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ds-text-sm);
}

.ds-table thead th {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wider);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border-light);
  background-color: var(--ds-gray-50);
  text-align: left;
}

.ds-table tbody td {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border-subtle);
  color: var(--ds-text-primary);
  vertical-align: middle;
}

.ds-table tbody tr:hover {
  background-color: var(--ds-gray-50);
}

.ds-table tbody tr:last-child td {
  border-bottom: none;
}


/* ==========================================================================
   13. UTILITY CLASSES
   ========================================================================== */

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

/* Background utilities */
.ds-bg-brand-50 { background-color: var(--ds-primary-50); }
.ds-bg-brand-100 { background-color: var(--ds-primary-100); }

/* Truncate text */
.ds-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Smooth scroll */
.ds-smooth-scroll {
  scroll-behavior: smooth;
}

/* Focus ring utility */
.ds-focus-ring:focus-visible {
  outline: 2px solid var(--ds-primary-400);
  outline-offset: 2px;
}

/* Subtle pulse animation for status indicators */
@keyframes ds-pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.ds-pulse-subtle {
  animation: ds-pulse-subtle 2s ease-in-out infinite;
}

/* Fade in animation */
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ds-fade-in {
  animation: ds-fade-in var(--ds-transition-slow) ease-out;
}


/* ==========================================================================
   14. RESPONSIVE BREAKPOINTS (reference)

   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
   2xl: 1536px

   Usage with Tailwind: Classes like sm:, md:, lg: already work.
   For custom CSS, use @media (min-width: XXpx) { ... }
   ========================================================================== */