/**
 * AMAI Design System - Layer 3: Component Tokens
 *
 * Tokens específicos de componente.
 * Valores baseados no v1 original para consistência.
 *
 * Naming: --{component}-{element}[-{state}]
 */

:root {
  /* ============================================
     CARD (v1: padding 24px, radius 16px)
     ============================================ */
  --card-bg:           var(--color-bg-elevated);
  --card-border:       var(--color-border);
  --card-border-width: 1px;
  --card-radius:       16px;
  --card-padding:      24px;
  --card-margin-bottom: 24px;

  --card-header-bg:       transparent;
  --card-header-border:   var(--color-border);
  --card-header-padding:  20px 24px;

  --card-title-size:      16px;
  --card-title-weight:    600;

  /* ============================================
     BADGE (v1: padding 4px 12px)
     ============================================ */
  --badge-padding:      4px 12px;
  --badge-radius:       20px;
  --badge-font-size:    12px;
  --badge-font-weight:  500;

  --badge-primary-bg:   rgba(99, 102, 241, 0.2);
  --badge-primary-text: #a5b4fc;

  --badge-success-bg:   rgba(34, 197, 94, 0.2);
  --badge-success-text: #86efac;

  --badge-warning-bg:   rgba(245, 158, 11, 0.2);
  --badge-warning-text: #fcd34d;

  --badge-danger-bg:    rgba(239, 68, 68, 0.2);
  --badge-danger-text:  #fca5a5;

  --badge-info-bg:      rgba(59, 130, 246, 0.2);
  --badge-info-text:    #93c5fd;

  --badge-secondary-bg:   rgba(100, 116, 139, 0.2);
  --badge-secondary-text: #cbd5e1;

  /* ============================================
     ALERT (v1: padding 16px 20px)
     ============================================ */
  --alert-padding:      16px 20px;
  --alert-radius:       12px;
  --alert-gap:          12px;
  --alert-margin-bottom: 20px;

  --alert-icon-size:    20px;
  --alert-title-weight: 600;
  --alert-text-size:    14px;

  --alert-info-bg:      rgba(59, 130, 246, 0.1);
  --alert-info-border:  rgba(59, 130, 246, 0.3);
  --alert-info-icon:    var(--color-info);

  --alert-warning-bg:      rgba(245, 158, 11, 0.1);
  --alert-warning-border:  rgba(245, 158, 11, 0.3);
  --alert-warning-icon:    var(--color-warning);

  --alert-success-bg:      rgba(34, 197, 94, 0.1);
  --alert-success-border:  rgba(34, 197, 94, 0.3);
  --alert-success-icon:    var(--color-success);

  --alert-danger-bg:      rgba(239, 68, 68, 0.1);
  --alert-danger-border:  rgba(239, 68, 68, 0.3);
  --alert-danger-icon:    var(--color-danger);

  /* ============================================
     TABLE (v1: padding 14px 16px)
     ============================================ */
  --table-cell-padding:   14px 16px;
  --table-header-bg:      #3a4255;
  --table-header-text:    var(--color-text);
  --table-header-size:    12px;
  --table-border:         var(--color-border);
  --table-row-hover:      rgba(99, 102, 241, 0.08);
  --table-cell-size:      14px;
  --table-last-col-min:   150px;
  --table-last-col-max:   250px;

  /* ============================================
     NAV (Sidebar) - v1 values
     ============================================ */
  --nav-bg:             var(--color-bg-secondary);
  --nav-border:         var(--color-border);
  --nav-width:          280px;

  --nav-header-padding: 0 24px;
  --nav-header-bg:      linear-gradient(135deg, #6366f1, #4f46e5);
  --nav-header-border:  #0f1419;
  --nav-header-title-size: 18px;
  --nav-header-subtitle-size: 11px;

  --nav-section-header-padding: 12px 24px;
  --nav-section-header-size: 11px;
  --nav-section-header-text: var(--color-text-muted);

  --nav-link-padding:   10px 24px 10px 32px;
  --nav-link-size:      14px;
  --nav-link-gap:       10px;
  --nav-link-text:      var(--color-text-muted);
  --nav-link-text-hover: var(--color-text);
  --nav-link-bg-hover:  var(--color-bg);
  --nav-link-bg-active: rgba(99, 102, 241, 0.1);
  --nav-link-text-active: var(--color-primary);

  --nav-footer-size:    12px;
  --nav-footer-padding: 16px 20px;

  /* ============================================
     HEADER (Page header) - fluid values
     ============================================ */
  --header-bg:          var(--color-bg-secondary);
  --header-border:      #0f1419;
  --header-border-width: clamp(1px, 0.1vw, 3px);
  --header-padding:     clamp(12px, 1vw, 24px) clamp(20px, 2vw, 40px);
  --header-height:      clamp(56px, 4vw + 24px, 103px);
  --header-gap:         clamp(8px, 0.6vw, 12px);

  --header-title-size:    var(--fluid-text-lg);
  --header-title-weight:  600;
  --header-subtitle-size: var(--fluid-text-sm);
  --header-separator-size: var(--fluid-text-sm);

  /* Mobile overrides */
  --header-mobile-padding:       10px 16px;
  --header-mobile-gap:           12px;
  --header-mobile-title-size:    15px;
  --header-mobile-subtitle-size: 15px;
  --header-mobile-subtitle-opacity: 0.7;

  /* Nav toggle button */
  --nav-toggle-size:        48px;
  --nav-toggle-font-size:   22px;
  --nav-toggle-radius:      12px;

  /* Mobile content typography */
  --content-mobile-body-size:    15px;
  --content-mobile-sm-body-size: 14px;

  /* Stat card mobile */
  --stat-card-mobile-gap:        16px;

  /* ============================================
     STAT CARD - fluid values
     ============================================ */
  --stat-card-padding:  var(--fluid-space-md);
  --stat-card-gap:      var(--fluid-space-sm);
  --stat-card-bg:       var(--color-bg-elevated);
  --stat-card-border:   var(--color-border);
  --stat-card-radius:   var(--fluid-radius-lg);

  --stat-icon-size:     var(--fluid-size-lg);
  --stat-icon-radius:   var(--fluid-radius-md);
  --stat-icon-font-size: var(--fluid-text-xl);

  --stat-value-size:    var(--fluid-text-3xl);
  --stat-value-weight:  700;
  --stat-label-size:    var(--fluid-text-xs);
  --stat-label-margin:  var(--fluid-space-3xs);

  /* ============================================
     FLOW DIAGRAM - v1 values
     ============================================ */
  --flow-bg:            linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
  --flow-padding:       48px 24px;
  --flow-radius:        20px;
  --flow-border:        var(--color-border);

  --flow-phase-bg:      var(--color-bg-elevated);
  --flow-phase-border:  var(--color-border);
  --flow-phase-border-width: 2px;
  --flow-phase-radius:  16px;
  --flow-phase-padding: 24px;
  --flow-phase-padding-top: var(--fluid-space-lg);  /* Espaço entre número e ícone */
  --flow-phase-min-width: 200px;
  --flow-phase-max-width: 240px;

  --flow-phase-icon-size: 64px;
  --flow-phase-icon-radius: 16px;
  --flow-phase-icon-font-size: 28px;
  --flow-phase-icon-margin: 16px;
  --flow-phase-icon-margin-top: var(--fluid-space-sm);  /* Espaço entre número e ícone */

  --flow-phase-title-size: 18px;
  --flow-phase-title-weight: 700;
  --flow-phase-title-margin: 8px;

  --flow-phase-subtitle-size: 13px;
  --flow-phase-subtitle-margin: 16px;

  --flow-phase-items-size: 13px;
  --flow-phase-items-padding: 6px 0;

  --flow-arrow-width:   40px;
  --flow-arrow-height:  2px;
  --flow-arrow-color:   var(--color-border);
  --flow-arrow-padding: 0 8px;

  /* ============================================
     STATE CARD - fluid values
     ============================================ */
  --state-card-bg:      var(--color-bg-elevated);
  --state-card-border:  var(--color-border);
  --state-card-border-width: var(--fluid-stroke-md);
  --state-card-radius:  var(--fluid-radius-md);
  --state-card-padding: var(--fluid-space-md);

  --state-icon-size:    var(--fluid-size-md);
  --state-icon-radius:  var(--fluid-radius-md);
  --state-icon-font-size: var(--fluid-text-lg);
  --state-icon-margin:  var(--fluid-space-xs);

  --state-name-size:    var(--fluid-text-sm);
  --state-name-weight:  600;
  --state-name-margin:  var(--fluid-space-3xs);
  --state-desc-size:    var(--fluid-text-xs);

  /* ============================================
     PRINCIPLE CARD - fluid values
     ============================================ */
  --principle-card-bg:      var(--color-bg-elevated);
  --principle-card-border:  var(--color-border);
  --principle-card-radius:  var(--fluid-radius-lg);
  --principle-card-padding: var(--fluid-space-md);
  --principle-card-gap:     var(--fluid-space-sm);

  --principle-number-size:  var(--fluid-size-sm);
  --principle-number-radius: var(--fluid-radius-sm);
  --principle-number-bg:    var(--color-primary-subtle);
  --principle-number-text:  var(--color-primary);
  --principle-number-font-size: var(--fluid-text-md);

  --principle-title-size:   var(--fluid-text-md);
  --principle-title-weight: 600;
  --principle-title-margin: var(--fluid-space-3xs);
  --principle-desc-size:    var(--fluid-text-sm);

  /* ============================================
     HERO - fluid values
     ============================================ */
  --hero-bg:            linear-gradient(135deg, var(--color-primary-subtle), var(--color-planning-subtle));
  --hero-border:        var(--color-border);
  --hero-radius:        var(--fluid-radius-xl);
  --hero-padding:       var(--fluid-space-2xl);
  --hero-margin-bottom: var(--fluid-space-xl);

  --hero-title-size:    var(--fluid-text-4xl);
  --hero-title-weight:  800;
  --hero-title-gradient: linear-gradient(135deg, var(--color-primary-text), var(--color-planning-text));
  --hero-title-margin:  var(--fluid-space-sm);

  --hero-subtitle-size:  var(--fluid-text-lg);
  --hero-subtitle-max-width: 600px;

  --hero-badges-gap:    var(--fluid-space-xs);
  --hero-badges-margin: var(--fluid-space-lg);

  /* ============================================
     ITERATION CARD - fluid values
     ============================================ */
  --iteration-card-bg:      var(--color-bg-elevated);
  --iteration-card-border:  var(--color-border);
  --iteration-card-radius:  var(--fluid-radius-lg);
  --iteration-card-padding: var(--fluid-space-md);

  --iteration-header-gap:   var(--fluid-space-xs);
  --iteration-header-margin: var(--fluid-space-xs);

  --iteration-icon-size:    var(--fluid-size-md);
  --iteration-icon-radius:  var(--fluid-radius-md);

  --iteration-title-size:   var(--fluid-text-sm);
  --iteration-desc-size:    var(--fluid-text-xs);
  --iteration-desc-margin:  var(--fluid-space-xs);
  --iteration-action-size:  var(--fluid-text-xs);
  --iteration-action-padding: var(--fluid-space-xs) var(--fluid-space-sm);
  --iteration-action-radius: var(--fluid-radius-md);

  /* ============================================
     CODE BLOCK - v1 values
     ============================================ */
  --code-bg:            var(--color-bg);
  --code-border:        var(--color-border);
  --code-radius:        12px;
  --code-padding:       20px;
  --code-font-size:     13px;
  --code-line-height:   1.6;

  /* ============================================
     COMPARISON CARD - v1 values
     ============================================ */
  --comparison-card-bg:      var(--color-bg-elevated);
  --comparison-card-border:  var(--color-border);
  --comparison-card-radius:  16px;
  --comparison-card-padding: 24px;

  --comparison-title-size:   16px;
  --comparison-title-margin: 16px;
  --comparison-title-gap:    10px;

  --comparison-item-padding: 0;
  --comparison-item-size:    14px;
  --comparison-item-gap:     8px;

  /* ============================================
     GRID & LAYOUT - v1 values
     ============================================ */
  --grid-gap:           24px;
  --stats-row-gap:      20px;
  --stats-row-margin:   32px;
  --states-grid-gap:    16px;

  --content-padding:    40px;
  --content-max-width:  1400px;

  /* ============================================
     INTERACTIONS - hover/focus states
     ============================================ */
  --hover-lift:         -4px;
  --hover-lift-sm:      -2px;
  --shadow-card-hover:  0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ============================================
   LIGHT THEME - Component Overrides
   ============================================ */
[data-theme="light"] {
  /* Badge colors - more visible on light bg */
  --badge-primary-bg:   rgba(79, 70, 229, 0.15);
  --badge-primary-text: #4338ca;

  --badge-success-bg:   rgba(22, 163, 74, 0.15);
  --badge-success-text: #15803d;

  --badge-warning-bg:   rgba(217, 119, 6, 0.15);
  --badge-warning-text: #b45309;

  --badge-danger-bg:    rgba(220, 38, 38, 0.15);
  --badge-danger-text:  #b91c1c;

  --badge-info-bg:      rgba(37, 99, 235, 0.15);
  --badge-info-text:    #1d4ed8;

  --badge-secondary-bg:   rgba(100, 116, 139, 0.15);
  --badge-secondary-text: #475569;

  /* Table */
  --table-header-bg:    #d8dfe8;
  --table-header-text:  #1e293b;
  --table-row-hover:    rgba(79, 70, 229, 0.06);

  /* Nav header - keep gradient but adjust border */
  --nav-header-border:  #e2e8f0;

  /* Header border */
  --header-border:      #e2e8f0;

  /* Hero gradient for light theme */
  --hero-bg:            linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.08));
  --hero-title-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);

  /* Flow diagram */
  --flow-bg:            linear-gradient(135deg, #f8fafc, #f1f5f9);

  /* Alert backgrounds - slightly more visible */
  --alert-info-bg:      rgba(37, 99, 235, 0.08);
  --alert-info-border:  rgba(37, 99, 235, 0.25);

  --alert-warning-bg:   rgba(217, 119, 6, 0.08);
  --alert-warning-border: rgba(217, 119, 6, 0.25);

  --alert-success-bg:   rgba(22, 163, 74, 0.08);
  --alert-success-border: rgba(22, 163, 74, 0.25);

  --alert-danger-bg:    rgba(220, 38, 38, 0.08);
  --alert-danger-border: rgba(220, 38, 38, 0.25);
}
/**
 * AMAI Design System - Tokens Index
 *
 * Importa todos os tokens na ordem correta:
 * 1. Primitives (valores brutos)
 * 2. Scale (sistema de escala fluida responsiva)
 * 3. Semantic (significado, muda entre temas)
 * 4. Components (específicos de componente)
 */

@import './primitives.css';
@import './scale.css';
@import './semantic.css';
@import './components.css';
/**
 * AMAI Design System - Layer 1: Primitive Tokens
 *
 * Valores brutos que NUNCA mudam entre temas.
 * Cores em OKLCH para uniformidade perceptual e suporte a P3 gamut.
 *
 * Naming: --primitive-{category}-{name}-{scale}
 */

:root {
  /* ============================================
     COLORS - OKLCH (Lightness, Chroma, Hue)
     ============================================ */

  /* Gray Scale (Neutral) */
  --primitive-color-gray-50:  oklch(98% 0.005 265);
  --primitive-color-gray-100: oklch(96% 0.005 265);
  --primitive-color-gray-200: oklch(90% 0.010 265);
  --primitive-color-gray-300: oklch(80% 0.015 265);
  --primitive-color-gray-400: oklch(65% 0.015 265);
  --primitive-color-gray-500: oklch(55% 0.015 265);
  --primitive-color-gray-600: oklch(45% 0.015 265);
  --primitive-color-gray-700: oklch(35% 0.015 265);
  --primitive-color-gray-800: oklch(25% 0.015 265);
  --primitive-color-gray-900: oklch(15% 0.015 265);
  --primitive-color-gray-950: oklch(10% 0.015 265);

  /* Indigo (Primary base) */
  --primitive-color-indigo-50:  oklch(97% 0.02 265);
  --primitive-color-indigo-100: oklch(93% 0.04 265);
  --primitive-color-indigo-200: oklch(85% 0.08 265);
  --primitive-color-indigo-300: oklch(75% 0.12 265);
  --primitive-color-indigo-400: oklch(65% 0.16 265);
  --primitive-color-indigo-500: oklch(55% 0.20 265);   /* Base */
  --primitive-color-indigo-600: oklch(48% 0.20 265);
  --primitive-color-indigo-700: oklch(42% 0.18 265);
  --primitive-color-indigo-800: oklch(35% 0.15 265);
  --primitive-color-indigo-900: oklch(28% 0.12 265);

  /* Violet (Clarity phase) */
  --primitive-color-violet-50:  oklch(97% 0.02 295);
  --primitive-color-violet-100: oklch(93% 0.05 295);
  --primitive-color-violet-200: oklch(85% 0.10 295);
  --primitive-color-violet-300: oklch(75% 0.15 295);
  --primitive-color-violet-400: oklch(65% 0.18 295);
  --primitive-color-violet-500: oklch(55% 0.20 295);   /* Base */
  --primitive-color-violet-600: oklch(48% 0.18 295);
  --primitive-color-violet-700: oklch(42% 0.16 295);
  --primitive-color-violet-800: oklch(35% 0.14 295);
  --primitive-color-violet-900: oklch(28% 0.12 295);

  /* Green (Build/Success) */
  --primitive-color-green-50:  oklch(97% 0.03 145);
  --primitive-color-green-100: oklch(93% 0.06 145);
  --primitive-color-green-200: oklch(85% 0.12 145);
  --primitive-color-green-300: oklch(75% 0.16 145);
  --primitive-color-green-400: oklch(68% 0.18 145);
  --primitive-color-green-500: oklch(60% 0.18 145);    /* Base */
  --primitive-color-green-600: oklch(52% 0.16 145);
  --primitive-color-green-700: oklch(45% 0.14 145);
  --primitive-color-green-800: oklch(38% 0.12 145);
  --primitive-color-green-900: oklch(30% 0.10 145);

  /* Amber (Warning/Validation) */
  --primitive-color-amber-50:  oklch(97% 0.03 85);
  --primitive-color-amber-100: oklch(93% 0.08 85);
  --primitive-color-amber-200: oklch(88% 0.12 85);
  --primitive-color-amber-300: oklch(82% 0.15 85);
  --primitive-color-amber-400: oklch(78% 0.16 85);
  --primitive-color-amber-500: oklch(75% 0.16 85);     /* Base */
  --primitive-color-amber-600: oklch(65% 0.15 85);
  --primitive-color-amber-700: oklch(55% 0.13 85);
  --primitive-color-amber-800: oklch(45% 0.11 85);
  --primitive-color-amber-900: oklch(35% 0.09 85);

  /* Red (Danger) */
  --primitive-color-red-50:  oklch(97% 0.02 25);
  --primitive-color-red-100: oklch(93% 0.05 25);
  --primitive-color-red-200: oklch(85% 0.10 25);
  --primitive-color-red-300: oklch(75% 0.15 25);
  --primitive-color-red-400: oklch(65% 0.18 25);
  --primitive-color-red-500: oklch(55% 0.20 25);       /* Base */
  --primitive-color-red-600: oklch(48% 0.18 25);
  --primitive-color-red-700: oklch(42% 0.16 25);
  --primitive-color-red-800: oklch(35% 0.14 25);
  --primitive-color-red-900: oklch(28% 0.12 25);

  /* Blue (Info) */
  --primitive-color-blue-50:  oklch(97% 0.02 240);
  --primitive-color-blue-100: oklch(93% 0.05 240);
  --primitive-color-blue-200: oklch(85% 0.10 240);
  --primitive-color-blue-300: oklch(75% 0.14 240);
  --primitive-color-blue-400: oklch(65% 0.17 240);
  --primitive-color-blue-500: oklch(55% 0.19 240);     /* Base */
  --primitive-color-blue-600: oklch(48% 0.17 240);
  --primitive-color-blue-700: oklch(42% 0.15 240);
  --primitive-color-blue-800: oklch(35% 0.13 240);
  --primitive-color-blue-900: oklch(28% 0.11 240);

  /* Cyan (Done) */
  --primitive-color-cyan-50:  oklch(97% 0.02 195);
  --primitive-color-cyan-100: oklch(93% 0.05 195);
  --primitive-color-cyan-200: oklch(85% 0.10 195);
  --primitive-color-cyan-300: oklch(75% 0.13 195);
  --primitive-color-cyan-400: oklch(68% 0.14 195);
  --primitive-color-cyan-500: oklch(60% 0.14 195);     /* Base */
  --primitive-color-cyan-600: oklch(52% 0.12 195);
  --primitive-color-cyan-700: oklch(45% 0.10 195);
  --primitive-color-cyan-800: oklch(38% 0.08 195);
  --primitive-color-cyan-900: oklch(30% 0.06 195);

  /* White & Black */
  --primitive-color-white: oklch(100% 0 0);
  --primitive-color-black: oklch(0% 0 0);

  /* ============================================
     SPACING - 4px base scale
     ============================================ */
  --primitive-spacing-0:   0;
  --primitive-spacing-1:   0.25rem;  /* 4px */
  --primitive-spacing-2:   0.5rem;   /* 8px */
  --primitive-spacing-3:   0.75rem;  /* 12px */
  --primitive-spacing-4:   1rem;     /* 16px */
  --primitive-spacing-5:   1.25rem;  /* 20px */
  --primitive-spacing-6:   1.5rem;   /* 24px */
  --primitive-spacing-8:   2rem;     /* 32px */
  --primitive-spacing-10:  2.5rem;   /* 40px */
  --primitive-spacing-12:  3rem;     /* 48px */
  --primitive-spacing-16:  4rem;     /* 64px */
  --primitive-spacing-20:  5rem;     /* 80px */
  --primitive-spacing-24:  6rem;     /* 96px */

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

  /* Font Families */
  --primitive-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --primitive-font-mono: 'Monaco', 'Menlo', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --primitive-font-size-xs:   0.75rem;   /* 12px */
  --primitive-font-size-sm:   0.875rem;  /* 14px */
  --primitive-font-size-base: 1rem;      /* 16px */
  --primitive-font-size-lg:   1.125rem;  /* 18px */
  --primitive-font-size-xl:   1.25rem;   /* 20px */
  --primitive-font-size-2xl:  1.5rem;    /* 24px */
  --primitive-font-size-3xl:  1.875rem;  /* 30px */
  --primitive-font-size-4xl:  2.25rem;   /* 36px */
  --primitive-font-size-5xl:  3rem;      /* 48px */

  /* Font Weights */
  --primitive-font-weight-normal:   400;
  --primitive-font-weight-medium:   500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold:     700;
  --primitive-font-weight-extrabold: 800;

  /* Line Heights */
  --primitive-line-height-none:    1;
  --primitive-line-height-tight:   1.25;
  --primitive-line-height-snug:    1.375;
  --primitive-line-height-normal:  1.5;
  --primitive-line-height-relaxed: 1.625;
  --primitive-line-height-loose:   2;

  /* ============================================
     BORDERS
     ============================================ */
  --primitive-border-width-0:    0;
  --primitive-border-width-1:    1px;
  --primitive-border-width-2:    2px;
  --primitive-border-width-3:    3px;
  --primitive-border-width-4:    4px;

  --primitive-border-radius-none:  0;
  --primitive-border-radius-sm:    0.25rem;   /* 4px */
  --primitive-border-radius-md:    0.5rem;    /* 8px */
  --primitive-border-radius-lg:    0.75rem;   /* 12px */
  --primitive-border-radius-xl:    1rem;      /* 16px */
  --primitive-border-radius-2xl:   1.25rem;   /* 20px */
  --primitive-border-radius-full:  9999px;

  /* ============================================
     SHADOWS
     ============================================ */
  --primitive-shadow-none: none;
  --primitive-shadow-sm:   0 1px 2px 0 oklch(0% 0 0 / 0.05);
  --primitive-shadow-md:   0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.1);
  --primitive-shadow-lg:   0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1);
  --primitive-shadow-xl:   0 20px 25px -5px oklch(0% 0 0 / 0.1), 0 8px 10px -6px oklch(0% 0 0 / 0.1);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --primitive-duration-fast:   150ms;
  --primitive-duration-normal: 200ms;
  --primitive-duration-slow:   300ms;

  --primitive-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --primitive-easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --primitive-easing-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Z-INDEX
     ============================================ */
  --primitive-z-0:       0;
  --primitive-z-10:      10;
  --primitive-z-20:      20;
  --primitive-z-30:      30;
  --primitive-z-40:      40;
  --primitive-z-50:      50;
  --primitive-z-100:     100;
  --primitive-z-1000:    1000;
}
/**
 * AMAI Design System - Responsive Scale System
 *
 * Sistema de escala fluida usando clamp() para responsividade automática.
 * Valores escalam suavemente entre breakpoints mínimo (320px) e máximo (1920px).
 *
 * Fórmula: clamp(min, preferred, max)
 * Preferred usa viewport width para escala proporcional.
 */

:root {
  /* ============================================
     BASE SCALE FACTORS
     Usado internamente para cálculos
     ============================================ */
  --scale-min: 320;   /* Mobile mínimo */
  --scale-max: 1920;  /* Desktop máximo */

  /* ============================================
     FLUID SPACING
     Espaçamento que escala com viewport
     ============================================ */
  --fluid-space-3xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);    /* 2-4px */
  --fluid-space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);      /* 4-8px */
  --fluid-space-xs:  clamp(0.375rem, 0.3rem + 0.3vw, 0.75rem);    /* 6-12px */
  --fluid-space-sm:  clamp(0.5rem, 0.4rem + 0.4vw, 1rem);         /* 8-16px */
  --fluid-space-md:  clamp(0.75rem, 0.6rem + 0.6vw, 1.5rem);      /* 12-24px */
  --fluid-space-lg:  clamp(1rem, 0.8rem + 0.8vw, 2rem);           /* 16-32px */
  --fluid-space-xl:  clamp(1.5rem, 1.2rem + 1.2vw, 3rem);         /* 24-48px */
  --fluid-space-2xl: clamp(2rem, 1.6rem + 1.6vw, 4rem);           /* 32-64px */
  --fluid-space-3xl: clamp(3rem, 2.4rem + 2.4vw, 6rem);           /* 48-96px */

  /* ============================================
     FLUID TYPOGRAPHY
     Tamanhos de fonte que escalam suavemente
     MÍNIMO: 14px para garantir legibilidade em mobile
     BASE: viewport de 1280px (notebook 15")
     MAX: viewport de 1920px+ (monitor grande)
     ============================================ */
  --fluid-text-xs:  clamp(0.875rem, 0.8rem + 0.2vw, 0.875rem);     /* 14px mobile */
  --fluid-text-sm:  clamp(0.9375rem, 0.85rem + 0.25vw, 1rem);      /* 15-16px */
  --fluid-text-md:  clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);   /* 15-18px */
  --fluid-text-lg:  clamp(1rem, 0.9rem + 0.35vw, 1.25rem);         /* 16-20px */
  --fluid-text-xl:  clamp(1.125rem, 1rem + 0.4vw, 1.5rem);         /* 18-24px */
  --fluid-text-2xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem);       /* 20-28px */
  --fluid-text-3xl: clamp(1.375rem, 1.2rem + 0.6vw, 2rem);         /* 22-32px */
  --fluid-text-4xl: clamp(1.5rem, 1.3rem + 0.8vw, 2.5rem);         /* 24-40px */
  --fluid-text-5xl: clamp(2rem, 1.7rem + 1vw, 3.5rem);             /* 32-56px */

  /* ============================================
     FLUID SIZING (Icons, buttons, etc)
     ============================================ */
  --fluid-size-2xs: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);       /* 12-20px */
  --fluid-size-xs:  clamp(1rem, 0.8rem + 0.6vw, 1.5rem);           /* 16-24px */
  --fluid-size-sm:  clamp(1.25rem, 1rem + 0.8vw, 2rem);            /* 20-32px */
  --fluid-size-md:  clamp(1.5rem, 1.2rem + 1vw, 2.5rem);           /* 24-40px */
  --fluid-size-lg:  clamp(2rem, 1.6rem + 1.2vw, 3.25rem);          /* 32-52px */
  --fluid-size-xl:  clamp(2.5rem, 2rem + 1.5vw, 4rem);             /* 40-64px */
  --fluid-size-2xl: clamp(3rem, 2.4rem + 1.8vw, 4.75rem);          /* 48-76px */

  /* ============================================
     FLUID RADIUS
     Border radius que escala
     ============================================ */
  --fluid-radius-sm:  clamp(0.25rem, 0.2rem + 0.15vw, 0.5rem);     /* 4-8px */
  --fluid-radius-md:  clamp(0.5rem, 0.4rem + 0.25vw, 0.875rem);    /* 8-14px */
  --fluid-radius-lg:  clamp(0.75rem, 0.6rem + 0.35vw, 1.25rem);    /* 12-20px */
  --fluid-radius-xl:  clamp(1rem, 0.8rem + 0.5vw, 1.5rem);         /* 16-24px */

  /* ============================================
     FLUID GAP (for flex/grid)
     ============================================ */
  --fluid-gap-xs:  clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);       /* 2-4px */
  --fluid-gap-sm:  clamp(0.25rem, 0.2rem + 0.15vw, 0.5rem);        /* 4-8px */
  --fluid-gap-md:  clamp(0.375rem, 0.3rem + 0.2vw, 0.75rem);       /* 6-12px */
  --fluid-gap-lg:  clamp(0.5rem, 0.4rem + 0.3vw, 1rem);            /* 8-16px */
  --fluid-gap-xl:  clamp(0.75rem, 0.6rem + 0.4vw, 1.5rem);         /* 12-24px */

  /* ============================================
     FLUID LINE/STROKE WIDTH
     Para setas, bordas, etc
     ============================================ */
  --fluid-stroke-sm: clamp(1px, 0.5px + 0.05vw, 2px);
  --fluid-stroke-md: clamp(1.5px, 1px + 0.08vw, 3px);
  --fluid-stroke-lg: clamp(2px, 1.5px + 0.1vw, 4px);
}
/**
 * AMAI Design System - Layer 2: Semantic Tokens
 *
 * Tokens com significado contextual que MUDAM entre temas.
 * Referenciam os primitives e dão significado.
 *
 * Naming: --{category}-{role}[-{modifier}]
 */

/* ============================================
   LIGHT THEME (Default)
   ============================================ */
:root {
  /* Background - Softer dark gray instead of near-black */
  --color-bg:           #1a1f2e;
  --color-bg-secondary: #222838;
  --color-bg-tertiary:  #2a3142;
  --color-bg-elevated:  #2a3142;
  --color-bg-overlay:   oklch(0% 0 0 / 0.7);

  /* Foreground (Text) - Higher contrast */
  --color-text:         #f1f5f9;
  --color-text-muted:   #94a3b8;
  --color-text-subtle:  #64748b;
  --color-text-inverse: #1e293b;

  /* Border - More visible */
  --color-border:         #3f4a5c;
  --color-border-strong:  #556275;
  --color-border-subtle:  #2d3648;

  /* Primary (Actions, Links) - Brighter for dark bg */
  --color-primary:         #818cf8;
  --color-primary-hover:   #a5b4fc;
  --color-primary-active:  #6366f1;
  --color-primary-subtle:  rgba(129, 140, 248, 0.15);
  --color-primary-bg-hover: rgba(129, 140, 248, 0.08);
  --color-primary-text:    #a5b4fc;

  /* Phase Colors (AMAI specific) - Brighter for contrast */
  --color-planning:              #a78bfa;
  --color-planning-subtle:       rgba(167, 139, 250, 0.2);
  --color-planning-hover:        rgba(139, 92, 246, 0.05);
  --color-planning-muted:        rgba(139, 92, 246, 0.15);
  --color-planning-muted-hover:  rgba(139, 92, 246, 0.25);
  --color-planning-border:       rgba(139, 92, 246, 0.3);
  --color-planning-text:         #c4b5fd;

  --color-build:              #4ade80;
  --color-build-subtle:       rgba(74, 222, 128, 0.2);
  --color-build-hover:        rgba(34, 197, 94, 0.05);
  --color-build-muted:        rgba(34, 197, 94, 0.15);
  --color-build-muted-hover:  rgba(34, 197, 94, 0.25);
  --color-build-border:       rgba(34, 197, 94, 0.3);
  --color-build-text:         #86efac;

  --color-validation:              #fbbf24;
  --color-validation-subtle:       rgba(251, 191, 36, 0.2);
  --color-validation-hover:        rgba(194, 120, 3, 0.05);
  --color-validation-muted:        rgba(194, 120, 3, 0.15);
  --color-validation-muted-hover:  rgba(194, 120, 3, 0.25);
  --color-validation-border:       rgba(194, 120, 3, 0.3);
  --color-validation-text:         #fcd34d;

  --color-waiting:              #94a3b8;
  --color-waiting-subtle:       rgba(148, 163, 184, 0.2);
  --color-waiting-hover:        rgba(100, 116, 139, 0.05);
  --color-waiting-muted:        rgba(100, 116, 139, 0.15);
  --color-waiting-muted-hover:  rgba(100, 116, 139, 0.25);
  --color-waiting-border:       rgba(100, 116, 139, 0.3);
  --color-waiting-text:         #cbd5e1;

  --color-done:              #22d3ee;
  --color-done-subtle:       rgba(34, 211, 238, 0.2);
  --color-done-hover:        rgba(6, 182, 212, 0.05);
  --color-done-muted:        rgba(6, 182, 212, 0.15);
  --color-done-muted-hover:  rgba(6, 182, 212, 0.25);
  --color-done-border:       rgba(6, 182, 212, 0.3);
  --color-done-text:         #67e8f9;

  /* Status Colors - Brighter */
  --color-success:         #4ade80;
  --color-success-subtle:  rgba(74, 222, 128, 0.15);
  --color-success-hover:   rgba(34, 197, 94, 0.05);
  --color-success-text:    #86efac;

  --color-warning:         #fbbf24;
  --color-warning-subtle:  rgba(251, 191, 36, 0.15);
  --color-warning-hover:   rgba(245, 158, 11, 0.05);
  --color-warning-text:    #fcd34d;

  --color-danger:          #f87171;
  --color-danger-subtle:   rgba(248, 113, 113, 0.15);
  --color-danger-hover:    rgba(239, 68, 68, 0.05);
  --color-danger-text:     #fca5a5;

  --color-info:            #60a5fa;
  --color-info-subtle:     rgba(96, 165, 250, 0.15);
  --color-info-hover:      rgba(59, 130, 246, 0.05);
  --color-info-text:       #93c5fd;

  /* Focus */
  --color-focus-ring:      var(--primitive-color-indigo-400);
  --color-focus-ring-offset: var(--color-bg);

  /* ============================================
     SEMANTIC SPACING (v1 values)
     ============================================ */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;

  /* Content spacing */
  --space-content-gap:     24px;
  --space-section-gap:     32px;
  --space-page-padding:    40px;

  /* Additional spacing aliases for convenience */
  --spacing-1:  4px;
  --spacing-2:  8px;
  --spacing-3:  12px;
  --spacing-4:  16px;
  --spacing-5:  20px;
  --spacing-6:  24px;
  --spacing-8:  32px;
  --spacing-10: 40px;
  --spacing-12: 48px;

  /* ============================================
     SEMANTIC TYPOGRAPHY
     ============================================ */
  --font-family-body:    var(--primitive-font-sans);
  --font-family-heading: var(--primitive-font-sans);
  --font-family-code:    var(--primitive-font-mono);

  --font-size-body:      var(--primitive-font-size-base);
  --font-size-small:     var(--primitive-font-size-sm);
  --font-size-caption:   var(--primitive-font-size-xs);

  --font-size-h1:        var(--primitive-font-size-4xl);
  --font-size-h2:        var(--primitive-font-size-2xl);
  --font-size-h3:        var(--primitive-font-size-xl);
  --font-size-h4:        var(--primitive-font-size-lg);

  --line-height-body:    var(--primitive-line-height-normal);
  --line-height-heading: var(--primitive-line-height-tight);

  /* ============================================
     SEMANTIC BORDERS
     ============================================ */
  --border-width-default:  var(--primitive-border-width-1);
  --border-width-thick:    var(--primitive-border-width-2);

  --border-radius-sm:      var(--primitive-border-radius-md);
  --border-radius-md:      var(--primitive-border-radius-lg);
  --border-radius-lg:      var(--primitive-border-radius-xl);
  --border-radius-full:    var(--primitive-border-radius-full);

  /* ============================================
     SEMANTIC SHADOWS
     ============================================ */
  --shadow-sm:   var(--primitive-shadow-sm);
  --shadow-md:   var(--primitive-shadow-md);
  --shadow-lg:   var(--primitive-shadow-lg);

  /* Card/Component hover shadows */
  --shadow-card-hover:      0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-card-hover-lg:   0 12px 40px rgba(0, 0, 0, 0.3);
  --shadow-card-float:      0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-card-subtle:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-flow-phase:      0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-flow-phase-hover: 0 8px 24px rgba(0, 0, 0, 0.2);

  /* Colored shadows for priority/state elements */
  --shadow-build:           0 4px 16px var(--color-build-muted);
  --shadow-planning:        0 4px 16px var(--color-planning-muted);
  --shadow-validation:      0 4px 16px var(--color-validation-muted);
  --shadow-waiting:         0 4px 16px var(--color-waiting-muted);
  --shadow-danger:          0 8px 24px rgba(248, 113, 113, 0.15);

  /* ============================================
     SEMANTIC TRANSITIONS
     ============================================ */
  --transition-fast:   var(--primitive-duration-fast) var(--primitive-easing-default);
  --transition-normal: var(--primitive-duration-normal) var(--primitive-easing-default);
  --transition-slow:   var(--primitive-duration-slow) var(--primitive-easing-default);

  /* ============================================
     LAYOUT
     ============================================ */
  --nav-width:      280px;
  --header-height:  103px;
  --content-max-width: 1400px;
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
  /* Background - Soft warm gray */
  --color-bg:           #e2e8f0;
  --color-bg-secondary: #f1f5f9;
  --color-bg-tertiary:  #cbd5e1;
  --color-bg-elevated:  #ffffff;
  --color-bg-overlay:   rgba(15, 23, 42, 0.5);

  /* Text - Strong contrast for readability */
  --color-text:         #0f172a;
  --color-text-muted:   #475569;
  --color-text-subtle:  #64748b;
  --color-text-inverse: #f8fafc;

  /* Border - More visible on gray bg */
  --color-border:         #94a3b8;
  --color-border-strong:  #64748b;
  --color-border-subtle:  #cbd5e1;

  /* Primary - Darker for contrast on light bg */
  --color-primary:         #4338ca;
  --color-primary-hover:   #3730a3;
  --color-primary-active:  #312e81;
  --color-primary-subtle:  rgba(67, 56, 202, 0.12);
  --color-primary-bg-hover: rgba(67, 56, 202, 0.06);
  --color-primary-text:    #3730a3;

  /* Phase Colors - Darker/more saturated */
  --color-planning:         #6d28d9;
  --color-planning-subtle:  rgba(109, 40, 217, 0.12);
  --color-planning-hover:   rgba(109, 40, 217, 0.08);
  --color-planning-text:    #5b21b6;

  --color-build:           #15803d;
  --color-build-subtle:    rgba(21, 128, 61, 0.12);
  --color-build-hover:     rgba(21, 128, 61, 0.08);
  --color-build-text:      #166534;

  --color-validation:      #ca8a04;
  --color-validation-subtle: rgba(202, 138, 4, 0.15);
  --color-validation-hover: rgba(202, 138, 4, 0.08);
  --color-validation-text: #a16207;

  --color-waiting:         #475569;
  --color-waiting-subtle:  rgba(71, 85, 105, 0.12);
  --color-waiting-hover:   rgba(71, 85, 105, 0.08);
  --color-waiting-text:    #334155;

  --color-done:            #0e7490;
  --color-done-subtle:     rgba(14, 116, 144, 0.12);
  --color-done-hover:      rgba(14, 116, 144, 0.08);
  --color-done-text:       #155e75;

  /* Status Colors - Darker */
  --color-success:         #15803d;
  --color-success-subtle:  rgba(21, 128, 61, 0.12);
  --color-success-hover:   rgba(21, 128, 61, 0.08);
  --color-success-text:    #166534;

  --color-warning:         #eab308;
  --color-warning-subtle:  rgba(234, 179, 8, 0.15);
  --color-warning-hover:   rgba(234, 179, 8, 0.08);
  --color-warning-text:    #a16207;

  --color-danger:          #b91c1c;
  --color-danger-subtle:   rgba(185, 28, 28, 0.12);
  --color-danger-hover:    rgba(185, 28, 28, 0.08);
  --color-danger-text:     #991b1b;

  --color-info:            #1d4ed8;
  --color-info-subtle:     rgba(29, 78, 216, 0.12);
  --color-info-hover:      rgba(29, 78, 216, 0.08);
  --color-info-text:       #1e40af;

  --color-focus-ring:      #4338ca;
  --color-focus-ring-offset: #f5f7fa;

  /* Light theme shadows - softer than dark */
  --shadow-card-hover:      0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card-hover-lg:   0 12px 40px rgba(0, 0, 0, 0.15);
  --shadow-card-float:      0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-subtle:     0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-flow-phase:      0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-flow-phase-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/**
 * AMAI Design System - Alert Component
 *
 * Alertas com escala fluida.
 * Usa tokens de tokens/scale.css para responsividade automática.
 */

.alert {
  padding: var(--fluid-space-sm) var(--fluid-space-md);
  border-radius: var(--fluid-radius-md);
  margin-bottom: var(--fluid-space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--fluid-space-sm);
}

.alert__icon {
  font-size: var(--fluid-text-lg);
  flex-shrink: 0;
}

.alert__content {
  flex: 1;
}

.alert__title {
  font-weight: 600;
  font-size: var(--fluid-text-sm);
  margin-bottom: var(--fluid-space-3xs);
}

.alert__text {
  font-size: var(--fluid-text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Variants */
.alert--info {
  background: var(--alert-info-bg);
  border: 1px solid var(--alert-info-border);
}

.alert--info .alert__icon {
  color: var(--color-info);
}

.alert--info .alert__title {
  color: var(--color-info);
}

.alert--warning {
  background: var(--alert-warning-bg);
  border: 1px solid var(--alert-warning-border);
}

.alert--warning .alert__icon {
  color: var(--color-warning);
}

.alert--warning .alert__title {
  color: var(--color-warning);
}

.alert--success {
  background: var(--alert-success-bg);
  border: 1px solid var(--alert-success-border);
}

.alert--success .alert__icon {
  color: var(--color-success);
}

.alert--success .alert__title {
  color: var(--color-success);
}

.alert--danger {
  background: var(--alert-danger-bg);
  border: 1px solid var(--alert-danger-border);
}

.alert--danger .alert__icon {
  color: var(--color-danger);
}

.alert--danger .alert__title {
  color: var(--color-danger);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .alert {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
    gap: var(--fluid-space-xs);
  }

  .alert__icon {
    font-size: var(--fluid-text-md);
  }

  .alert__title {
    font-size: var(--fluid-text-xs);
  }

  .alert__text {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Badge Component
 * Usa tokens de tokens/components.css
 */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: 1;
  white-space: nowrap;
}

/* Variants */
.badge--primary {
  background: var(--badge-primary-bg);
  color: var(--badge-primary-text);
}

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

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

.badge--danger {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-text);
}

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

.badge--secondary {
  background: var(--badge-secondary-bg);
  color: var(--badge-secondary-text);
}

/* Phase badges (AMAI specific) */
.badge--planning {
  background: var(--color-planning-subtle);
  color: var(--color-planning-text);
}

.badge--build {
  background: var(--color-build-subtle);
  color: var(--color-build-text);
}

.badge--validation {
  background: var(--color-validation-subtle);
  color: var(--color-validation-text);
}

.badge--waiting {
  background: var(--color-waiting-subtle);
  color: var(--color-waiting-text);
}

.badge--done {
  background: var(--color-done-subtle);
  color: var(--color-done-text);
}
/**
 * AMAI Design System - Base Styles
 *
 * Reset + Typography + Utilities básicas
 */

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  font-weight: var(--primitive-font-weight-semibold);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--primitive-border-radius-sm);
}

strong, b {
  font-weight: var(--primitive-font-weight-semibold);
}

code {
  font-family: var(--font-family-code);
  font-size: 0.9em;
  background: var(--color-bg);
  padding: var(--primitive-spacing-1) var(--primitive-spacing-2);
  border-radius: var(--primitive-border-radius-sm);
}

pre {
  background: var(--code-bg);
  border: var(--border-width-default) solid var(--code-border);
  border-radius: var(--code-radius);
  padding: var(--code-padding);
  overflow-x: auto;
  font-size: var(--code-font-size);
  line-height: var(--primitive-line-height-relaxed);
}

pre code {
  background: none;
  padding: 0;
}

/* ============================================
   LISTS
   ============================================ */
ul, ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
}

/* ============================================
   IMAGES
   ============================================ */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================
   INTERACTIVE ELEMENTS
   ============================================ */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

button:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text utilities */
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-medium { font-weight: var(--primitive-font-weight-medium); }
.font-semibold { font-weight: var(--primitive-font-weight-semibold); }
.font-bold { font-weight: var(--primitive-font-weight-bold); }

.text-sm { font-size: var(--font-size-small); }
.text-xs { font-size: var(--font-size-caption); }
.text-lg { font-size: var(--font-size-h4); }

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn var(--primitive-duration-slow) var(--primitive-easing-out);
}

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

/* ============================================
   MOBILE TYPOGRAPHY HIERARCHY
   Garante que títulos sejam sempre maiores que o corpo
   ============================================ */
@media (max-width: 768px) {
  body {
    font-size: var(--content-mobile-body-size);
  }

  p {
    font-size: var(--content-mobile-body-size);
  }

  li {
    font-size: var(--content-mobile-body-size);
  }

  h1 { font-size: var(--fluid-text-3xl); }
  h2 { font-size: var(--fluid-text-2xl); }
  h3 { font-size: var(--fluid-text-xl); }
  h4 { font-size: var(--fluid-text-lg); }
}

@media (max-width: 500px) {
  body {
    font-size: var(--content-mobile-sm-body-size);
  }

  p {
    font-size: var(--content-mobile-sm-body-size);
  }

  li {
    font-size: var(--content-mobile-sm-body-size);
  }

  h1 { font-size: var(--fluid-text-2xl); }
  h2 { font-size: var(--fluid-text-xl); }
  h3 { font-size: var(--fluid-text-lg); }
  h4 { font-size: var(--fluid-text-md); }
}

/* Section intro text */
.section-intro {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-6);
}

/* Flex utilities */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--spacing-2); }

/* Margin utilities */
.mt-lg { margin-top: var(--spacing-6); }

/* Text color utilities (additional) */
.text-secondary { color: var(--color-text-secondary); }

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */

/* Cards get subtle shadow in light mode */
[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .principle-card,
[data-theme="light"] .state-card,
[data-theme="light"] .project-type-card,
[data-theme="light"] .iteration-card,
[data-theme="light"] .comparison-card,
[data-theme="light"] .responsibility-card,
[data-theme="light"] .use-skip-card,
[data-theme="light"] .priority-matrix,
[data-theme="light"] .priority-questions {
  box-shadow: var(--shadow-card-subtle);
}

/* Flow phases get shadow */
[data-theme="light"] .flow-phase {
  box-shadow: var(--shadow-flow-phase);
}

[data-theme="light"] .flow-phase:hover {
  box-shadow: var(--shadow-flow-phase-hover);
}

/* Project type cards hover */
[data-theme="light"] .project-type-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Planning flow diagram boxes */
[data-theme="light"] .planning-flow-diagram__box,
[data-theme="light"] .build-cycle-diagram__box {
  box-shadow: var(--shadow-flow-phase);
}

/* State cards hover */
[data-theme="light"] .state-card:hover {
  box-shadow: var(--shadow-card-float);
}

/* Nav in light mode */
[data-theme="light"] .nav {
  border-right-color: var(--color-border);
}

/* Header border */
[data-theme="light"] .header {
  border-bottom-color: var(--color-border);
}
/**
 * AMAI Design System - Card Component
 * Usa tokens fluidos - sem media queries
 */

.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: var(--card-border-width) solid var(--card-border);
  margin-bottom: var(--card-margin-bottom);
  overflow: hidden;
}

.card-header {
  padding: var(--card-header-padding);
  border-bottom: 1px solid var(--card-header-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fluid-space-xs);
}

.card-title {
  font-size: var(--card-title-size);
  font-weight: var(--card-title-weight);
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
}

.card-title i {
  font-size: 1.1em;
}

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

/* Variants */
.card--no-header .card-body {
  padding-top: var(--card-padding);
}

.card--compact .card-body {
  padding: var(--fluid-space-sm);
}

.card--compact .card-header {
  padding: var(--fluid-space-xs) var(--fluid-space-sm);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .card {
    border-radius: var(--fluid-radius-md);
  }

  .card-header {
    padding: var(--fluid-space-sm);
  }

  .card-title {
    font-size: var(--fluid-text-lg);
  }

  .card-body {
    padding: var(--fluid-space-sm);
    font-size: var(--fluid-text-sm);
  }

  .card-body p,
  .card-body li,
  .card-body span {
    font-size: var(--fluid-text-sm);
  }
}

@media (max-width: 500px) {
  .card {
    margin-bottom: var(--fluid-space-md);
  }

  .card-header {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
  }

  .card-title {
    font-size: var(--fluid-text-md);
  }

  .card-body {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
    font-size: var(--fluid-text-xs);
  }

  .card-body p,
  .card-body li,
  .card-body span {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Code Block Component
 * Usa tokens de tokens/components.css
 */

.code-block {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--code-radius);
  padding: var(--code-padding);
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  font-family: var(--font-family-code);
  font-size: var(--code-font-size);
  color: var(--color-text);
  line-height: var(--code-line-height);
  white-space: pre-wrap;
}
/**
 * AMAI Design System - Comparison Components
 * Usa tokens de tokens/components.css e tokens/scale.css
 *
 * Suporta tanto seletores BEM (.comparison-card__title) quanto
 * seletores de descendentes (h4, ul, li) para compatibilidade.
 */

.comparison-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

.comparison-card {
  background: var(--comparison-card-bg);
  border: 1px solid var(--comparison-card-border);
  border-radius: var(--comparison-card-radius);
  padding: var(--comparison-card-padding);
  transition: all 0.2s ease;
}

.comparison-card:hover {
  transform: translateY(var(--hover-lift-sm));
  border-color: var(--color-danger);
  box-shadow: var(--shadow-danger);
  background: var(--color-danger-hover);
}

/* BEM: .comparison-card__title | Legacy: h4 */
.comparison-card__title,
.comparison-card h4 {
  display: flex;
  align-items: center;
  gap: var(--comparison-title-gap);
  margin: 0 0 var(--comparison-title-margin) 0;
  font-size: var(--comparison-title-size);
  color: var(--color-text);
}

/* BEM: .comparison-card__title-icon | Legacy: h4 i */
.comparison-card__title-icon,
.comparison-card h4 i {
  color: var(--color-danger);
}

/* BEM: .comparison-card__list | Legacy: ul */
.comparison-card__list,
.comparison-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-3xs);
}

/* BEM: .comparison-card__item | Legacy: li */
.comparison-card__item,
.comparison-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--comparison-item-gap);
  padding: var(--comparison-item-padding);
  font-size: var(--comparison-item-size);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* BEM: .comparison-card__item-icon | Legacy: li i */
.comparison-card__item-icon,
.comparison-card li i {
  color: var(--color-danger);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .comparison-row {
    grid-template-columns: 1fr;
    gap: var(--fluid-space-sm);
  }

  .comparison-card {
    padding: var(--fluid-space-sm);
  }

  .comparison-card__title,
  .comparison-card h4 {
    font-size: var(--fluid-text-sm);
  }
}

@media (max-width: 500px) {
  .comparison-card {
    padding: var(--fluid-space-xs);
  }

  .comparison-card__title,
  .comparison-card h4 {
    font-size: var(--fluid-text-xs);
    margin-bottom: var(--fluid-space-xs);
  }

  .comparison-card__item,
  .comparison-card li {
    font-size: var(--fluid-text-xs);
    padding: var(--fluid-space-3xs);
  }
}
/**
 * AMAI Design System - Connection Diagram Component
 *
 * Mostra como as fases se conectam com o Planning Pipeline.
 * Usa tokens de tokens/scale.css para responsividade automática.
 *
 * REGRAS:
 * - Sempre horizontal (nunca quebra linha)
 * - Escala proporcionalmente com a viewport
 * - Sem scroll horizontal
 */

/* ============================================
   CONTAINER
   ============================================ */
.connection-diagram {
  background: var(--color-bg-tertiary);
  border-radius: var(--fluid-radius-xl);
  padding: var(--fluid-space-lg);
}

/* ============================================
   ROW - Sempre horizontal
   ============================================ */
.connection-diagram__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--fluid-gap-md);
  flex-wrap: nowrap;
}

/* ============================================
   PHASE CARD
   ============================================ */
.connection-diagram__phase {
  background: var(--color-bg-elevated);
  border: var(--fluid-stroke-md) solid var(--color-border);
  border-radius: var(--fluid-radius-md);
  padding: var(--fluid-space-sm);
  min-width: 0;
  flex: 1 1 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.2s ease;
}

.connection-diagram__phase:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

.connection-diagram__phase--expanded {
  flex: 2 1 0;
}

/* Phase color variants */
.connection-diagram__phase--understanding {
  border-color: var(--color-info);
}
.connection-diagram__phase--understanding:hover {
  background: var(--color-info-hover);
}

.connection-diagram__phase--planning {
  border-color: var(--color-planning);
}
.connection-diagram__phase--planning:hover {
  background: var(--color-planning-hover);
}

.connection-diagram__phase--build {
  border-color: var(--color-build);
}
.connection-diagram__phase--build:hover {
  background: var(--color-build-hover);
}

.connection-diagram__phase--validation {
  border-color: var(--color-validation);
}
.connection-diagram__phase--validation:hover {
  background: var(--color-validation-hover);
}

/* ============================================
   PHASE NUMBER
   ============================================ */
.connection-diagram__phase-number {
  width: var(--fluid-size-sm);
  height: var(--fluid-size-sm);
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fluid-text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--fluid-space-xs);
}

.connection-diagram__phase--understanding .connection-diagram__phase-number {
  background: var(--color-info);
  color: var(--color-text-inverse);
}

.connection-diagram__phase--planning .connection-diagram__phase-number {
  background: var(--color-planning);
  color: var(--color-text-inverse);
}

.connection-diagram__phase--build .connection-diagram__phase-number {
  background: var(--color-build);
  color: var(--color-text-inverse);
}

.connection-diagram__phase--validation .connection-diagram__phase-number {
  background: var(--color-validation);
  color: var(--color-text-inverse);
}

/* ============================================
   PHASE CONTENT
   ============================================ */
.connection-diagram__phase-title {
  font-size: var(--fluid-text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--fluid-space-2xs);
}

.connection-diagram__phase-desc {
  font-size: var(--fluid-text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============================================
   PIPELINE (inside expanded phase)
   ============================================ */
.connection-diagram__pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fluid-gap-2xs);
  margin-top: var(--fluid-space-xs);
  flex-wrap: nowrap;
}

.connection-diagram__step {
  background: var(--color-planning-subtle);
  color: var(--color-planning);
  padding: var(--fluid-space-3xs) var(--fluid-space-2xs);
  border-radius: var(--fluid-radius-sm);
  font-size: var(--fluid-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.connection-diagram__step-arrow {
  color: var(--color-text-muted);
  font-size: var(--fluid-text-xs);
}

/* ============================================
   ARROW CONNECTOR
   ============================================ */
.connection-diagram__arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--fluid-text-lg);
  padding: 0 var(--fluid-gap-xs);
  flex-shrink: 1;
}

/* ============================================
   CYCLE MESSAGE
   ============================================ */
.connection-diagram__cycle {
  text-align: center;
  margin-top: var(--fluid-space-sm);
  padding-top: var(--fluid-space-sm);
  border-top: 1px dashed var(--color-border);
}

.connection-diagram__cycle span {
  color: var(--color-text-muted);
  font-size: var(--fluid-text-sm);
  font-style: italic;
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] .connection-diagram {
  background: var(--color-bg-secondary);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .connection-diagram {
    padding: var(--fluid-space-md);
  }

  .connection-diagram__row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: var(--fluid-space-sm) !important;
  }

  .connection-diagram__phase {
    width: 100% !important;
    flex: none !important;
  }

  .connection-diagram__phase--expanded {
    flex: none !important;
  }

  .connection-diagram__arrow {
    transform: rotate(90deg);
    padding: var(--fluid-space-2xs) 0;
    justify-content: center;
    display: flex;
  }

  .connection-diagram__pipeline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--fluid-space-3xs);
  }

  .connection-diagram__step-arrow {
    transform: none;
  }

  .connection-diagram__step {
    font-size: var(--fluid-text-xs);
    padding: var(--fluid-space-3xs) var(--fluid-space-xs);
  }

  .connection-diagram__phase-number {
    width: var(--fluid-size-xs);
    height: var(--fluid-size-xs);
    font-size: var(--fluid-text-xs);
  }

  .connection-diagram__phase-title {
    font-size: var(--fluid-text-sm);
  }

  .connection-diagram__phase-desc {
    font-size: var(--fluid-text-xs);
  }
}

@media (max-width: 500px) {
  .connection-diagram {
    padding: var(--fluid-space-sm);
  }

  .connection-diagram__phase {
    padding: var(--fluid-space-xs);
  }

  .connection-diagram__pipeline {
    margin-top: var(--fluid-space-2xs);
  }

  .connection-diagram__step {
    padding: var(--fluid-space-3xs) var(--fluid-space-2xs);
  }

  .connection-diagram__cycle {
    margin-top: var(--fluid-space-xs);
    padding-top: var(--fluid-space-xs);
  }

  .connection-diagram__cycle span {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Document Card Component
 * Cards for "What to Document" section with hover effects
 * Usa tokens fluidos - sem media queries
 */

.document-card {
  background: var(--color-bg-elevated);
  border: var(--fluid-stroke-md) solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-xs);
  transition: all 0.2s ease;
}

.document-card:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

/* Color variants */
.document-card--info {
  border-color: var(--color-info);
}

.document-card--info:hover {
  background: var(--color-info-hover);
}

.document-card--warning {
  border-color: var(--color-warning);
}

.document-card--warning:hover {
  background: var(--color-warning-hover);
}

.document-card--success {
  border-color: var(--color-build);
}

.document-card--success:hover {
  background: var(--color-build-hover);
}

.document-card--danger {
  border-color: var(--color-danger);
}

.document-card--danger:hover {
  background: var(--color-danger-hover);
}

/* Header */
.document-card__header {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
}

.document-card__icon {
  width: var(--fluid-size-md);
  height: var(--fluid-size-md);
  border-radius: var(--fluid-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fluid-text-xl);
  flex-shrink: 0;
}

.document-card--info .document-card__icon {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

.document-card--warning .document-card__icon {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.document-card--success .document-card__icon {
  background: var(--color-build-subtle);
  color: var(--color-build);
}

.document-card--danger .document-card__icon {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* Title */
.document-card__title {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fluid-text-md);
}

/* Description */
.document-card__desc {
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: var(--fluid-text-sm);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .document-card {
    padding: var(--fluid-space-sm);
  }

  .document-card__icon {
    width: var(--fluid-size-sm);
    height: var(--fluid-size-sm);
    font-size: var(--fluid-text-lg);
  }

  .document-card__title {
    font-size: var(--fluid-text-sm);
  }

  .document-card__desc {
    font-size: var(--fluid-text-xs);
  }
}

@media (max-width: 500px) {
  .document-card {
    padding: var(--fluid-space-xs);
  }

  .document-card__icon {
    width: var(--fluid-size-xs);
    height: var(--fluid-size-xs);
    font-size: var(--fluid-text-md);
  }

  .document-card__title {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Flow Diagram Component
 *
 * Diagrama de fluxo horizontal com escala fluida.
 * Usa tokens de tokens/scale.css para responsividade automática.
 *
 * REGRAS:
 * - Sempre horizontal (nunca quebra linha)
 * - Escala proporcionalmente com a viewport
 * - Sem scroll horizontal
 */

/* ============================================
   CONTAINER
   ============================================ */
.flow-diagram {
  background: var(--flow-bg);
  border-radius: var(--fluid-radius-xl);
  padding: var(--fluid-space-xl) var(--fluid-space-lg);
  border: 1px solid var(--flow-border);
}

/* ============================================
   FLOW CONTAINER - Sempre horizontal
   ============================================ */
.flow-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  padding: var(--fluid-space-sm) 0;
}

/* ============================================
   PHASE CARD
   ============================================ */
.flow-phase {
  background: var(--flow-phase-bg);
  border: var(--fluid-stroke-md) solid var(--flow-phase-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--flow-phase-padding-top) var(--fluid-space-sm) var(--fluid-space-md);
  min-width: 0;
  flex: 1 1 0;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flow-phase:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-card-hover-lg);
}

/* Phase variants */
.flow-phase--understanding { border-color: var(--color-info); }
.flow-phase--understanding:hover { background: var(--color-info-hover); }

.flow-phase--planning { border-color: var(--color-planning); }
.flow-phase--planning:hover { background: var(--color-planning-hover); }

.flow-phase--build { border-color: var(--color-build); }
.flow-phase--build:hover { background: var(--color-build-hover); }

.flow-phase--validation { border-color: var(--color-validation); }
.flow-phase--validation:hover { background: var(--color-validation-hover); }

/* ============================================
   PHASE NUMBER BADGE
   ============================================ */
.flow-phase__number {
  position: absolute;
  top: calc(-1 * var(--fluid-size-xs) / 2);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-elevated);
  border: var(--fluid-stroke-md) solid var(--color-border);
  border-radius: 50%;
  width: var(--fluid-size-xs);
  height: var(--fluid-size-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fluid-text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.flow-phase--understanding .flow-phase__number {
  border-color: var(--color-info);
  color: var(--color-info);
}
.flow-phase--planning .flow-phase__number {
  border-color: var(--color-planning);
  color: var(--color-planning);
}
.flow-phase--build .flow-phase__number {
  border-color: var(--color-build);
  color: var(--color-build);
}
.flow-phase--validation .flow-phase__number {
  border-color: var(--color-validation);
  color: var(--color-validation);
}

/* ============================================
   PHASE ICON
   ============================================ */
.flow-phase__icon {
  width: var(--fluid-size-md);
  height: var(--fluid-size-md);
  border-radius: var(--fluid-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--flow-phase-icon-margin-top) auto var(--fluid-space-xs);
}

.flow-phase__icon i {
  font-size: var(--fluid-text-lg);
}

.flow-phase--understanding .flow-phase__icon {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

.flow-phase--planning .flow-phase__icon {
  background: var(--color-planning-subtle);
  color: var(--color-planning);
}

.flow-phase--build .flow-phase__icon {
  background: var(--color-build-subtle);
  color: var(--color-build);
}

.flow-phase--validation .flow-phase__icon {
  background: var(--color-validation-subtle);
  color: var(--color-validation);
}

/* ============================================
   PHASE CONTENT
   ============================================ */
.flow-phase__title {
  font-size: var(--fluid-text-sm);
  font-weight: 700;
  margin-bottom: var(--fluid-space-2xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flow-phase__subtitle {
  font-size: var(--fluid-text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--fluid-space-xs);
}

.flow-phase__items {
  text-align: left;
  font-size: var(--fluid-text-xs);
  color: var(--color-text-muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.flow-phase__items li {
  padding: var(--fluid-space-3xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.flow-phase__items li:last-child {
  border-bottom: none;
}

/* ============================================
   ARROW CONNECTOR
   ============================================ */
.flow-arrow {
  display: flex;
  align-items: center;
  padding: 0 var(--fluid-gap-sm);
  flex-shrink: 1;
  min-width: var(--fluid-space-md);
}

.flow-arrow__line {
  width: var(--fluid-space-lg);
  height: var(--fluid-stroke-md);
  background: var(--color-text-muted);
  position: relative;
  flex-shrink: 1;
  min-width: var(--fluid-space-sm);
}

.flow-arrow__line::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--color-text-muted);
}

/* ============================================
   ARROW TIP - Escala com viewport
   ============================================ */
@supports (width: clamp(1px, 1vw, 10px)) {
  .flow-arrow__line::after {
    border-top-width: clamp(3px, 2px + 0.15vw, 6px);
    border-bottom-width: clamp(3px, 2px + 0.15vw, 6px);
    border-left-width: clamp(4px, 3px + 0.2vw, 10px);
    right: clamp(-4px, -3px - 0.1vw, -8px);
  }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .flow-container {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .flow-phase {
    width: 100%;
    max-width: 400px;
    flex: none;
  }

  /* Seta vertical como caractere de texto */
  .flow-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--fluid-space-sm) 0;
    min-width: auto;
    transform: none;
  }

  .flow-arrow__line {
    width: auto;
    height: auto;
    background: none;
  }

  .flow-arrow__line::before {
    content: '↓';
    font-size: var(--fluid-text-xl);
    color: var(--color-text-muted);
  }

  .flow-arrow__line::after {
    display: none;
  }

  /* Número da fase centralizado no topo */
  .flow-phase__number {
    top: calc(-1 * var(--fluid-size-xs) / 2);
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 500px) {
  .flow-diagram {
    padding: var(--fluid-space-md) var(--fluid-space-sm);
  }

  .flow-phase {
    padding: var(--fluid-space-sm);
    max-width: none;
  }

  .flow-phase__title {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Hero Component
 * Usa tokens fluidos - sem media queries
 */

.hero {
  background: var(--hero-bg);
  border: 1px solid var(--hero-border);
  border-radius: var(--hero-radius);
  padding: var(--hero-padding);
  margin-bottom: var(--hero-margin-bottom);
  text-align: center;
}

.hero__title {
  font-size: var(--hero-title-size);
  font-weight: var(--hero-title-weight);
  background: var(--hero-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--hero-title-margin);
}

.hero__subtitle {
  font-size: var(--hero-subtitle-size);
  color: var(--color-text-muted);
  max-width: var(--hero-subtitle-max-width);
  margin: 0 auto;
  line-height: 1.6;
}

.hero__badges {
  display: flex;
  justify-content: center;
  gap: var(--hero-badges-gap);
  margin-top: var(--hero-badges-margin);
  flex-wrap: wrap;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .hero {
    padding: var(--fluid-space-lg) var(--fluid-space-md);
  }

  .hero__title {
    font-size: var(--fluid-text-3xl);
  }

  .hero__subtitle {
    font-size: var(--fluid-text-sm);
  }
}

@media (max-width: 500px) {
  .hero {
    padding: var(--fluid-space-md);
    border-radius: var(--fluid-radius-md);
  }

  .hero__title {
    font-size: var(--fluid-text-2xl);
  }

  .hero__badges {
    gap: var(--fluid-space-2xs);
  }
}
/**
 * AMAI Design System - Components Index
 *
 * Importa todos os componentes.
 */

@import './base.css';
@import './card.css';
@import './badge.css';
@import './alert.css';
@import './table.css';
@import './stat-card.css';
@import './hero.css';
@import './flow-diagram.css';
@import './state-card.css';
@import './principle-card.css';
@import './project-type-card.css';
@import './planning-flow.css';
@import './comparison.css';
@import './iteration-card.css';
@import './priority.css';
@import './layers-diagram.css';
@import './responsibility-card.css';
@import './code-block.css';
@import './connection-diagram.css';
@import './document-card.css';
/**
 * AMAI Design System - Iteration Card Component
 * Usa tokens fluidos - sem media queries
 */

.iteration-card {
  background: var(--iteration-card-bg);
  border: 1px solid var(--iteration-card-border);
  border-radius: var(--iteration-card-radius);
  padding: var(--iteration-card-padding);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.iteration-card:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-card-hover);
}

.iteration-card__header {
  display: flex;
  align-items: center;
  gap: var(--iteration-header-gap);
  margin-bottom: var(--iteration-header-margin);
}

.iteration-card__icon {
  width: var(--iteration-icon-size);
  height: var(--iteration-icon-size);
  border-radius: var(--iteration-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fluid-text-lg);
  flex-shrink: 0;
}

.iteration-card__icon--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.iteration-card__icon--warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.iteration-card__icon--info {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

.iteration-card__icon--success {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.iteration-card__title {
  font-size: var(--iteration-title-size);
  font-weight: 600;
  color: var(--color-text);
}

.iteration-card__desc {
  font-size: var(--iteration-desc-size);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--iteration-desc-margin);
}

.iteration-card__action {
  background: var(--color-bg);
  padding: var(--iteration-action-padding);
  border-radius: var(--iteration-action-radius);
  font-size: var(--iteration-action-size);
  color: var(--color-primary);
  font-weight: 500;
  border-left: 3px solid var(--color-primary);
}

/* ============================================
   GOLDEN RULE COMPONENT
   ============================================ */
.golden-rule {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-lg);
}

.golden-rule__highlight {
  display: flex;
  align-items: center;
  gap: var(--fluid-gap-md);
  background: linear-gradient(135deg, var(--color-primary-subtle), var(--color-planning-subtle));
  border: 2px solid var(--color-primary);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-sm) var(--fluid-space-md);
  font-size: var(--fluid-text-md);
  color: var(--color-text);
}

.golden-rule__highlight i {
  font-size: var(--fluid-text-xl);
  color: var(--color-primary);
  flex-shrink: 0;
}

.golden-rule__highlight strong {
  color: var(--color-primary);
}

.golden-rule__rules {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-xs);
}

.golden-rule__rule {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-sm);
  padding: var(--fluid-space-sm) var(--fluid-space-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-md);
}

.golden-rule__rule-if {
  font-size: var(--fluid-text-sm);
  color: var(--color-text);
  font-weight: 500;
  flex: 1;
}

.golden-rule__rule-then {
  font-size: var(--fluid-text-sm);
  color: var(--color-info);
  font-weight: 600;
}

.golden-rule__examples {
  background: var(--color-bg-tertiary);
  border-radius: var(--fluid-radius-md);
  padding: var(--fluid-space-md);
}

.golden-rule__examples-title {
  font-size: var(--fluid-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--fluid-space-sm);
}

.golden-rule__example {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
  padding: var(--fluid-space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.golden-rule__example:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.golden-rule__example-trigger {
  font-size: var(--fluid-text-sm);
  color: var(--color-text);
  font-style: italic;
  flex: 1;
}

.golden-rule__example-action {
  font-size: var(--fluid-text-xs);
  color: var(--color-warning);
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .iteration-card {
    padding: var(--fluid-space-sm);
  }

  .iteration-card__icon {
    width: var(--fluid-size-sm);
    height: var(--fluid-size-sm);
    font-size: var(--fluid-text-md);
  }

  .iteration-card__title {
    font-size: var(--fluid-text-sm);
  }

  .iteration-card__desc {
    font-size: var(--fluid-text-xs);
  }

  .iteration-card__action {
    font-size: var(--fluid-text-xs);
    padding: var(--fluid-space-xs);
  }

  .golden-rule__highlight {
    flex-direction: column;
    text-align: center;
    padding: var(--fluid-space-sm);
    font-size: var(--fluid-text-sm);
  }

  .golden-rule__rule {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fluid-space-2xs);
    padding: var(--fluid-space-xs);
  }

  .golden-rule__rule-if,
  .golden-rule__rule-then {
    font-size: var(--fluid-text-xs);
  }

  .golden-rule__example {
    flex-direction: column;
    align-items: flex-start;
  }

  .golden-rule__example-trigger {
    font-size: var(--fluid-text-xs);
  }

  .golden-rule__example-action {
    white-space: normal;
  }
}

@media (max-width: 500px) {
  .iteration-card {
    padding: var(--fluid-space-xs);
  }

  .iteration-card__icon {
    width: var(--fluid-size-xs);
    height: var(--fluid-size-xs);
    font-size: var(--fluid-text-sm);
  }

  .golden-rule {
    gap: var(--fluid-space-sm);
  }

  .golden-rule__examples {
    padding: var(--fluid-space-sm);
  }
}
/**
 * AMAI Design System - Layers Diagram Component (Team/Solo Mode)
 * Usa tokens fluidos - sem media queries
 */

.layers-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-sm);
  padding: var(--fluid-space-sm) 0;
}

.layers-diagram__layer {
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
  transition: all 0.2s ease;
}

.layers-diagram__layer:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

.layers-diagram__layer--3 {
  border-color: var(--color-planning);
}

.layers-diagram__layer--3:hover {
  background: var(--color-planning-hover);
}

.layers-diagram__layer--2 {
  border-color: var(--color-build);
}

.layers-diagram__layer--2:hover {
  background: var(--color-build-hover);
}

.layers-diagram__layer--1 {
  border-color: var(--color-warning);
}

.layers-diagram__layer--1:hover {
  background: var(--color-warning-hover);
}

.layers-diagram__header {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
  margin-bottom: var(--fluid-space-sm);
}

.layers-diagram__icon {
  width: var(--fluid-size-md);
  height: var(--fluid-size-md);
  border-radius: var(--fluid-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fluid-text-lg);
  flex-shrink: 0;
}

.layers-diagram__icon--planning {
  background: var(--color-planning-subtle);
  color: var(--color-planning);
}

.layers-diagram__icon--build {
  background: var(--color-build-subtle);
  color: var(--color-build);
}

.layers-diagram__icon--warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.layers-diagram__title {
  font-size: var(--fluid-text-md);
  font-weight: 600;
  color: var(--color-text);
}

.layers-diagram__subtitle {
  font-size: var(--fluid-text-xs);
  color: var(--color-text-muted);
}

.layers-diagram__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--fluid-space-xs);
}

.layers-diagram__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fluid-space-xs);
  padding: var(--fluid-space-sm);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-md);
  text-align: center;
  transition: all 0.2s ease;
}

.layers-diagram__item:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-strong);
}

.layers-diagram__item i {
  font-size: var(--fluid-text-lg);
  color: var(--color-text);
}

.layers-diagram__item span {
  font-size: var(--fluid-text-xs);
  color: var(--color-text);
  font-weight: 500;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .layers-diagram__layer {
    padding: var(--fluid-space-sm);
  }

  .layers-diagram__header {
    flex-wrap: wrap;
  }

  .layers-diagram__icon {
    width: var(--fluid-size-sm);
    height: var(--fluid-size-sm);
    font-size: var(--fluid-text-md);
  }

  .layers-diagram__title {
    font-size: var(--fluid-text-sm);
  }

  .layers-diagram__grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }

  .layers-diagram__item {
    padding: var(--fluid-space-xs);
  }

  .layers-diagram__item i {
    font-size: var(--fluid-text-md);
  }
}

@media (max-width: 500px) {
  .layers-diagram__layer {
    padding: var(--fluid-space-xs);
  }

  .layers-diagram__icon {
    width: var(--fluid-size-xs);
    height: var(--fluid-size-xs);
    font-size: var(--fluid-text-sm);
  }

  .layers-diagram__title {
    font-size: var(--fluid-text-xs);
  }

  .layers-diagram__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .layers-diagram__item {
    padding: var(--fluid-space-2xs);
  }
}
/**
 * AMAI Design System - Planning Flow Components
 *
 * Componentes de fluxo/diagrama com escala fluida.
 * Usa tokens de tokens/scale.css para responsividade automática.
 */

/* ============================================
   PLANNING FLOW BOX (inline flow)
   ============================================ */
.planning-flow-box {
  background: linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
  margin-top: var(--fluid-space-md);
}

.planning-flow-box__header {
  display: flex;
  align-items: center;
  gap: var(--fluid-gap-md);
  margin-bottom: var(--fluid-space-sm);
  color: var(--color-text);
  font-size: var(--fluid-text-sm);
}

.planning-flow-box__header i {
  color: var(--color-planning);
  font-size: var(--fluid-text-lg);
}

.planning-flow-box__steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.planning-flow-box__step {
  background: var(--color-bg-elevated);
  border: var(--fluid-stroke-md) solid var(--color-planning);
  padding: var(--fluid-space-xs) var(--fluid-space-sm);
  border-radius: var(--fluid-radius-sm);
  font-size: var(--fluid-text-sm);
  font-weight: 600;
  color: var(--color-text);
  transition: all 0.2s ease;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.planning-flow-box__step:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-planning);
}

.planning-flow-box__step--highlight {
  background: var(--color-planning);
  color: white;
  border-color: var(--color-planning);
}

.planning-flow-box__arrow {
  color: var(--color-planning);
  padding: 0 var(--fluid-gap-sm);
  font-size: var(--fluid-text-sm);
  flex-shrink: 0;
}

/* ============================================
   PLANNING FLOW DIAGRAM (Step 2 Planning)
   ============================================ */
.planning-flow-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-lg);
  padding: var(--fluid-space-lg);
  background: linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
  border-radius: var(--fluid-radius-lg);
}

/* Inline variant - all in one row */
.planning-flow-diagram--inline {
  gap: 0;
  padding: var(--fluid-space-lg) var(--fluid-space-md);
}

.planning-flow-diagram--inline .planning-flow-diagram__row {
  flex-wrap: nowrap;
  padding-top: var(--fluid-space-sm);
  padding-bottom: var(--fluid-space-md);
}

.planning-flow-diagram__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.planning-flow-diagram__box {
  background: var(--color-bg-elevated);
  border: var(--fluid-stroke-md) solid var(--color-planning);
  border-radius: var(--fluid-radius-sm);
  padding: var(--fluid-space-2xs) var(--fluid-space-xs);
  text-align: center;
  min-width: 0;
  flex: 1 1 0;
  transition: all 0.2s ease;
}

.planning-flow-diagram__box:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

.planning-flow-diagram__box--planning { border-color: var(--color-planning); }
.planning-flow-diagram__box--info {
  border-color: var(--color-info);
  background: var(--color-info-subtle);
}
.planning-flow-diagram__box--info .planning-flow-diagram__box-agent { color: var(--color-info); }

.planning-flow-diagram__box--highlight {
  border-color: var(--color-info);
  background: var(--color-info-subtle);
}
.planning-flow-diagram__box--highlight .planning-flow-diagram__box-agent { color: var(--color-info); }

.planning-flow-diagram__box--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-subtle);
}
.planning-flow-diagram__box--warning .planning-flow-diagram__box-agent { color: var(--color-warning); }

.planning-flow-diagram__box-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--fluid-text-xs);
  margin-bottom: var(--fluid-space-3xs);
  white-space: nowrap;
}

.planning-flow-diagram__box-agent {
  font-size: var(--fluid-text-xs);
  color: var(--color-planning);
  font-weight: 500;
}

.planning-flow-diagram__connector {
  display: flex;
  align-items: center;
  padding: 0 var(--fluid-gap-2xs);
  color: var(--color-planning);
  font-size: var(--fluid-text-sm);
  flex-shrink: 0;
}

.planning-flow-diagram__validation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fluid-space-xs);
}

.planning-flow-diagram__validation-label {
  font-size: var(--fluid-text-sm);
  color: var(--color-text-muted);
}

.planning-flow-diagram__validation-note {
  font-size: var(--fluid-text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================
   BUILD CYCLE DIAGRAM (Step 3 Build)
   ============================================ */
.build-cycle-diagram {
  background: linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-lg);
  text-align: center;
}

.build-cycle-diagram__label {
  font-weight: 700;
  font-size: var(--fluid-text-sm);
  color: var(--color-build);
  margin-bottom: var(--fluid-space-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.build-cycle-diagram__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}

.build-cycle-diagram__box {
  background: var(--color-bg-elevated);
  border: var(--fluid-stroke-md) solid var(--color-build);
  border-radius: var(--fluid-radius-sm);
  padding: var(--fluid-space-xs) var(--fluid-space-sm);
  min-width: 0;
  flex: 1 1 0;
  max-width: calc(100% / 4 - var(--fluid-gap-md));
  transition: all 0.2s ease;
}

.build-cycle-diagram__box:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

.build-cycle-diagram__box--warning {
  border-color: var(--color-warning);
  background: var(--color-warning-subtle);
}

.build-cycle-diagram__box-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--fluid-text-sm);
}

.build-cycle-diagram__box-subtitle {
  font-size: var(--fluid-text-xs);
  color: var(--color-text-muted);
  margin-top: var(--fluid-space-3xs);
}

.build-cycle-diagram__arrow {
  color: var(--color-build);
  padding: 0 var(--fluid-gap-md);
  font-size: var(--fluid-text-lg);
  flex-shrink: 0;
}

.build-cycle-diagram__output {
  margin-top: var(--fluid-space-sm);
  padding-top: var(--fluid-space-sm);
  border-top: 1px solid var(--color-border);
  color: var(--color-success);
  font-weight: 600;
  font-size: var(--fluid-text-sm);
}

/* ============================================
   VALIDATION DIAGRAM (Step 4 Validation)
   ============================================ */
.validation-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-xl);
  padding: var(--fluid-space-lg) 0;
}

.validation-diagram__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  background: linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
  padding: var(--fluid-space-md);
  border-radius: var(--fluid-radius-lg);
}

.validation-diagram__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fluid-space-xs);
  padding: var(--fluid-space-sm) var(--fluid-space-md);
  transition: all 0.2s ease;
  flex: 1 1 0;
  min-width: 0;
}

.validation-diagram__step:hover {
  transform: translateY(var(--hover-lift-sm));
}

.validation-diagram__step i {
  font-size: var(--fluid-text-3xl);
  color: var(--color-validation);
}

.validation-diagram__step--decision i {
  color: var(--color-warning);
}

.validation-diagram__step-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--fluid-text-md);
}

.validation-diagram__step-subtitle {
  font-size: var(--fluid-text-sm);
  color: var(--color-text-muted);
}

.validation-diagram__arrow {
  color: var(--color-validation);
  padding: 0 var(--fluid-gap-sm);
  font-size: var(--fluid-text-lg);
  flex-shrink: 0;
}

.validation-diagram__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fluid-space-md);
}

@media (max-width: 900px) {
  .validation-diagram__options {
    grid-template-columns: repeat(2, 1fr);
  }
}

.validation-diagram__option {
  background: var(--color-bg-elevated);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
  text-align: center;
  border: var(--fluid-stroke-md) solid var(--color-border);
  transition: all 0.2s ease;
}

.validation-diagram__option:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

.validation-diagram__option--success { border-color: var(--color-success); }
.validation-diagram__option--success:hover { background: var(--color-success-hover); }

.validation-diagram__option--warning { border-color: var(--color-warning); }
.validation-diagram__option--warning:hover { background: var(--color-warning-hover); }

.validation-diagram__option--danger { border-color: var(--color-danger); }
.validation-diagram__option--danger:hover { background: var(--color-danger-hover); }

.validation-diagram__option-card {
  margin-bottom: var(--fluid-space-sm);
}

.validation-diagram__option-card i {
  font-size: var(--fluid-text-3xl);
  margin-bottom: var(--fluid-space-xs);
  display: block;
}

.validation-diagram__option--success i { color: var(--color-success); }
.validation-diagram__option--warning i { color: var(--color-warning); }
.validation-diagram__option--danger i { color: var(--color-danger); }

.validation-diagram__option-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fluid-text-md);
  margin-bottom: var(--fluid-space-3xs);
}

.validation-diagram__option-subtitle {
  font-size: var(--fluid-text-sm);
  color: var(--color-text-muted);
}

.validation-diagram__option-action {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--fluid-space-xs) var(--fluid-space-sm);
  border-radius: var(--fluid-radius-sm);
  font-size: var(--fluid-text-sm);
  margin-top: var(--fluid-space-sm);
}

.validation-diagram__option-action strong {
  display: block;
  color: var(--color-text);
  margin-bottom: var(--fluid-space-3xs);
}

.validation-diagram__option-action span {
  color: var(--color-text-muted);
  font-size: var(--fluid-text-xs);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  /* Planning flow box */
  .planning-flow-box__steps {
    flex-direction: column;
    gap: var(--fluid-space-xs);
  }

  .planning-flow-box__step {
    width: 100%;
  }

  .planning-flow-box__arrow {
    transform: rotate(90deg);
    padding: var(--fluid-space-2xs) 0;
  }

  /* Planning flow diagram */
  .planning-flow-diagram__row {
    flex-direction: column;
    gap: var(--fluid-space-xs);
  }

  .planning-flow-diagram__box {
    width: 100%;
  }

  .planning-flow-diagram__box-title {
    white-space: normal;
  }

  .planning-flow-diagram__connector {
    transform: rotate(90deg);
    padding: var(--fluid-space-2xs) 0;
  }

  /* Build cycle diagram */
  .build-cycle-diagram__flow {
    flex-direction: column;
    gap: var(--fluid-space-xs);
  }

  .build-cycle-diagram__box {
    width: 100%;
    max-width: none;
  }

  .build-cycle-diagram__arrow {
    transform: rotate(90deg);
    padding: var(--fluid-space-2xs) 0;
  }

  /* Validation diagram - mantém horizontal */
  .validation-diagram__flow {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    padding: var(--fluid-space-sm);
  }

  .validation-diagram__step {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--fluid-space-xs);
    gap: var(--fluid-space-2xs);
  }

  .validation-diagram__step i {
    font-size: var(--fluid-text-xl);
  }

  .validation-diagram__step-title {
    font-size: var(--fluid-text-xs);
  }

  .validation-diagram__step-subtitle {
    font-size: var(--fluid-text-xs);
  }

  .validation-diagram__arrow {
    font-size: var(--fluid-text-sm);
    padding: 0 var(--fluid-space-2xs);
  }

  .validation-diagram__options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .planning-flow-box {
    padding: var(--fluid-space-sm);
  }

  .planning-flow-diagram {
    padding: var(--fluid-space-sm);
  }

  .build-cycle-diagram {
    padding: var(--fluid-space-sm);
  }

  .validation-diagram__flow {
    padding: var(--fluid-space-xs);
  }

  .validation-diagram__step {
    padding: var(--fluid-space-2xs);
  }

  .validation-diagram__step i {
    font-size: var(--fluid-text-lg);
  }

  .validation-diagram__step-subtitle {
    display: none;
  }

  .validation-diagram__option {
    padding: var(--fluid-space-sm);
  }
}
/**
 * AMAI Design System - Principle Card Component
 * Usa tokens fluidos de tokens/components.css
 * Sem media queries - responsividade automática via clamp()
 */

.principle-card {
  background: var(--principle-card-bg);
  border: 1px solid var(--principle-card-border);
  border-radius: var(--principle-card-radius);
  padding: var(--principle-card-padding);
  display: flex;
  gap: var(--principle-card-gap);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.principle-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg-hover);
}

.principle-card__number {
  width: var(--principle-number-size);
  height: var(--principle-number-size);
  background: var(--principle-number-bg);
  color: var(--principle-number-text);
  border-radius: var(--principle-number-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--principle-number-font-size);
  flex-shrink: 0;
}

.principle-card__content {
  flex: 1;
  min-width: 0;
}

.principle-card__title {
  font-weight: var(--principle-title-weight);
  font-size: var(--principle-title-size);
  margin-bottom: var(--principle-title-margin);
}

.principle-card__desc {
  font-size: var(--principle-desc-size);
  color: var(--color-text-muted);
  line-height: 1.625;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  /* Grid de princípios: 1 coluna no mobile */
  .grid--2:has(.principle-card) {
    grid-template-columns: 1fr;
    gap: var(--fluid-space-sm);
  }

  .principle-card {
    flex-direction: row;
    align-items: flex-start;
    padding: var(--fluid-space-sm);
    gap: var(--fluid-space-sm);
  }

  .principle-card__number {
    width: var(--fluid-size-sm);
    height: var(--fluid-size-sm);
    font-size: var(--fluid-text-sm);
  }

  .principle-card__title {
    font-size: var(--fluid-text-sm);
    font-weight: 600;
    margin-bottom: var(--fluid-space-3xs);
  }

  .principle-card__desc {
    font-size: var(--fluid-text-xs);
    line-height: 1.5;
  }
}

@media (max-width: 500px) {
  .principle-card {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
  }

  .principle-card__number {
    width: var(--fluid-size-xs);
    height: var(--fluid-size-xs);
    font-size: var(--fluid-text-xs);
  }

  .principle-card__title {
    font-size: var(--fluid-text-xs);
  }

  .principle-card__desc {
    font-size: var(--fluid-text-xs);
    line-height: 1.4;
  }
}
/**
 * AMAI Design System - Priority Components
 * Usa tokens de tokens/semantic.css e tokens/scale.css
 *
 * Suporta tanto seletores BEM quanto seletores de descendentes para compatibilidade.
 */

.priority-matrix {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
}

/* BEM: .priority-matrix__title | Legacy: h4 */
.priority-matrix__title,
.priority-matrix h4 {
  margin: 0 0 var(--fluid-space-sm) 0;
  color: var(--color-text);
  font-size: var(--fluid-text-md);
  font-weight: 600;
}

.priority-matrix__cell {
  text-align: center;
  font-weight: 700;
  font-size: var(--fluid-text-md);
  padding: var(--fluid-space-sm) var(--fluid-space-md);
  border-radius: var(--fluid-radius-sm);
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* 1st - High Impact + High Urgency - Most important (build green) */
.priority-matrix__cell--1 {
  background: var(--color-build-muted);
  color: var(--color-build);
  border: 1px solid var(--color-build-border);
}

.priority-matrix__cell--1:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-build);
  background: var(--color-build-muted-hover);
}

/* 2nd - High Impact + Low Urgency - Important but can wait (planning purple) */
.priority-matrix__cell--2 {
  background: var(--color-planning-muted);
  color: var(--color-planning);
  border: 1px solid var(--color-planning-border);
}

.priority-matrix__cell--2:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-planning);
  background: var(--color-planning-muted-hover);
}

/* 3rd - Low Impact + High Urgency - Urgent but less value (validation orange) */
.priority-matrix__cell--3 {
  background: var(--color-validation-muted);
  color: var(--color-validation);
  border: 1px solid var(--color-validation-border);
}

.priority-matrix__cell--3:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-validation);
  background: var(--color-validation-muted-hover);
}

/* 4th - Low Impact + Low Urgency - Can be deprioritized (waiting slate) */
.priority-matrix__cell--4 {
  background: var(--color-waiting-muted);
  color: var(--color-waiting);
  border: 1px solid var(--color-waiting-border);
}

.priority-matrix__cell--4:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-waiting);
  background: var(--color-waiting-muted-hover);
}

.priority-questions {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
}

/* BEM: .priority-questions__title | Legacy: h4 */
.priority-questions__title,
.priority-questions h4 {
  margin: 0 0 var(--fluid-space-sm) 0;
  color: var(--color-text);
  font-size: var(--fluid-text-md);
  font-weight: 600;
}

.priority-questions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-xs);
}

/* BEM: .priority-questions__item | Legacy: li */
.priority-questions__item,
.priority-questions__list li {
  color: var(--color-text-muted);
  font-size: var(--fluid-text-sm);
  line-height: 1.5;
}

.priority-questions__item strong,
.priority-questions__list li strong {
  color: var(--color-text);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .priority-matrix {
    padding: var(--fluid-space-sm);
  }

  .priority-matrix__title,
  .priority-matrix h4 {
    font-size: var(--fluid-text-sm);
  }

  .priority-matrix__cell {
    font-size: var(--fluid-text-sm);
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
  }

  .priority-questions {
    padding: var(--fluid-space-sm);
  }

  .priority-questions__title,
  .priority-questions h4 {
    font-size: var(--fluid-text-sm);
  }
}

@media (max-width: 500px) {
  .priority-matrix {
    padding: var(--fluid-space-xs);
  }

  .priority-matrix__cell {
    font-size: var(--fluid-text-xs);
    padding: var(--fluid-space-2xs) var(--fluid-space-xs);
  }

  .priority-questions {
    padding: var(--fluid-space-xs);
  }

  .priority-questions__item,
  .priority-questions__list li {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Project Type Card Component
 *
 * Card para tipos de projeto com escala fluida.
 * Usa tokens de tokens/scale.css e tokens/semantic.css
 */

.project-type-card {
  background: var(--color-bg-elevated);
  border: var(--fluid-stroke-md) solid var(--color-border);
  border-radius: var(--fluid-radius-md);
  padding: var(--fluid-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-xs);
  transition: all 0.2s ease;
}

.project-type-card:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

/* Variantes de cor */
.project-type-card--build { border-color: var(--color-build); }
.project-type-card--build:hover { background: var(--color-build-hover); }

.project-type-card--info { border-color: var(--color-info); }
.project-type-card--info:hover { background: var(--color-info-hover); }

.project-type-card--planning { border-color: var(--color-planning); }
.project-type-card--planning:hover { background: var(--color-planning-hover); }

.project-type-card--warning { border-color: var(--color-warning); }
.project-type-card--warning:hover { background: var(--color-warning-hover); }

/* Header */
.project-type-card__header {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-sm);
}

.project-type-card__icon {
  width: var(--fluid-size-sm);
  height: var(--fluid-size-sm);
  border-radius: var(--fluid-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fluid-text-lg);
  flex-shrink: 0;
}

.project-type-card--build .project-type-card__icon {
  background: var(--color-build-subtle);
  color: var(--color-build);
}

.project-type-card--info .project-type-card__icon {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

.project-type-card--planning .project-type-card__icon {
  background: var(--color-planning-subtle);
  color: var(--color-planning);
}

.project-type-card--warning .project-type-card__icon {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

/* Title */
.project-type-card__title {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fluid-text-sm);
  margin-bottom: var(--fluid-space-3xs);
}

.project-type-card__subtitle {
  font-size: var(--fluid-text-xs);
  color: var(--color-text-muted);
}

/* Description */
.project-type-card__desc {
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  font-size: var(--fluid-text-xs);
}

/* Requires box */
.project-type-card__requires {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: var(--fluid-space-2xs) var(--fluid-space-xs);
  border-radius: var(--fluid-radius-sm);
  margin-top: auto;
}

.project-type-card__requires-label {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: var(--fluid-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--fluid-space-3xs);
}

.project-type-card__requires-text {
  color: var(--color-text);
  font-size: var(--fluid-text-xs);
  line-height: 1.4;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .project-type-card {
    padding: var(--fluid-space-sm);
    gap: var(--fluid-space-sm);
  }

  .project-type-card__header {
    gap: var(--fluid-space-sm);
  }

  .project-type-card__icon {
    width: var(--fluid-size-md);
    height: var(--fluid-size-md);
    font-size: var(--fluid-text-xl);
  }

  .project-type-card__title {
    font-size: var(--fluid-text-md);
    margin-bottom: var(--fluid-space-3xs);
  }

  .project-type-card__subtitle {
    font-size: var(--fluid-text-sm);
  }

  .project-type-card__desc {
    font-size: var(--fluid-text-sm);
    line-height: 1.5;
  }

  .project-type-card__requires {
    padding: var(--fluid-space-sm);
    margin-top: var(--fluid-space-xs);
  }

  .project-type-card__requires-label {
    font-size: var(--fluid-text-xs);
    margin-bottom: var(--fluid-space-2xs);
  }

  .project-type-card__requires-text {
    font-size: var(--fluid-text-sm);
    line-height: 1.5;
  }
}

@media (max-width: 500px) {
  .project-type-card {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
    gap: var(--fluid-space-xs);
  }

  .project-type-card__icon {
    width: var(--fluid-size-sm);
    height: var(--fluid-size-sm);
    font-size: var(--fluid-text-lg);
  }

  .project-type-card__title {
    font-size: var(--fluid-text-sm);
  }

  .project-type-card__subtitle {
    font-size: var(--fluid-text-xs);
  }

  .project-type-card__desc {
    font-size: var(--fluid-text-xs);
  }

  .project-type-card__requires {
    padding: var(--fluid-space-xs);
  }

  .project-type-card__requires-text {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Responsibility Card Component
 * Usa tokens fluidos - sem media queries
 */

.responsibility-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
  transition: all 0.2s ease;
}

.responsibility-card:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

.responsibility-card--planning {
  border-left: 3px solid var(--color-planning);
}

.responsibility-card--planning:hover {
  background: var(--color-planning-hover);
}

.responsibility-card--build {
  border-left: 3px solid var(--color-build);
}

.responsibility-card--build:hover {
  background: var(--color-build-hover);
}

.responsibility-card--warning {
  border-left: 3px solid var(--color-warning);
}

.responsibility-card--warning:hover {
  background: var(--color-warning-hover);
}

/* BEM: .responsibility-card__title | Legacy: h4 */
.responsibility-card__title,
.responsibility-card h4 {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
  margin: 0 0 var(--fluid-space-sm) 0;
  color: var(--color-text);
  font-size: var(--fluid-text-sm);
  font-weight: 600;
}

.responsibility-card--planning .responsibility-card__title i,
.responsibility-card--planning h4 i {
  color: var(--color-planning);
}

.responsibility-card--build .responsibility-card__title i,
.responsibility-card--build h4 i {
  color: var(--color-build);
}

.responsibility-card--warning .responsibility-card__title i,
.responsibility-card--warning h4 i {
  color: var(--color-warning);
}

/* BEM: .responsibility-card__list | Legacy: ul */
.responsibility-card__list,
.responsibility-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-xs);
}

/* BEM: .responsibility-card__item | Legacy: li */
.responsibility-card__item,
.responsibility-card li {
  color: var(--color-text-muted);
  font-size: var(--fluid-text-xs);
  padding-left: var(--fluid-space-sm);
  position: relative;
  line-height: 1.5;
}

.responsibility-card li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

/* ============================================
   USE/SKIP CARD
   ============================================ */
.use-skip-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-lg);
  padding: var(--fluid-space-md);
  transition: all 0.2s ease;
}

.use-skip-card:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

.use-skip-card--use {
  border-left: 3px solid var(--color-success);
}

.use-skip-card--use:hover {
  background: var(--color-success-hover);
}

.use-skip-card--skip {
  border-left: 3px solid var(--color-text-muted);
}

/* BEM: .use-skip-card__title | Legacy: h4 */
.use-skip-card__title,
.use-skip-card h4 {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
  margin: 0 0 var(--fluid-space-sm) 0;
  color: var(--color-text);
  font-size: var(--fluid-text-sm);
  font-weight: 600;
}

.use-skip-card--use .use-skip-card__title i,
.use-skip-card--use h4 i {
  color: var(--color-success);
}

.use-skip-card--skip .use-skip-card__title i,
.use-skip-card--skip h4 i {
  color: var(--color-text-muted);
}

/* BEM: .use-skip-card__list | Legacy: ul */
.use-skip-card__list,
.use-skip-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-xs);
}

/* BEM: .use-skip-card__item | Legacy: li */
.use-skip-card__item,
.use-skip-card li {
  color: var(--color-text-muted);
  font-size: var(--fluid-text-xs);
  padding-left: var(--fluid-space-sm);
  position: relative;
  line-height: 1.5;
}

.use-skip-card--use li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
}

.use-skip-card--skip li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

/* ============================================
   INFO BOX
   ============================================ */
.info-box {
  background: var(--alert-info-bg);
  border: 1px solid var(--alert-info-border);
  border-radius: var(--fluid-radius-md);
  padding: var(--fluid-space-sm) var(--fluid-space-md);
  margin-top: var(--fluid-space-md);
}

/* BEM: .info-box__title | Legacy: h4 */
.info-box__title,
.info-box h4 {
  display: flex;
  align-items: center;
  gap: var(--fluid-gap-sm);
  margin: 0 0 var(--fluid-space-3xs) 0;
  color: var(--color-info);
  font-size: var(--fluid-text-sm);
  font-weight: 600;
}

/* BEM: .info-box__text | Legacy: p */
.info-box__text,
.info-box p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fluid-text-sm);
  line-height: 1.5;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .responsibility-card {
    padding: var(--fluid-space-sm);
  }

  .responsibility-card__title,
  .responsibility-card h4 {
    font-size: var(--fluid-text-xs);
    margin-bottom: var(--fluid-space-xs);
  }

  .use-skip-card {
    padding: var(--fluid-space-sm);
  }

  .use-skip-card__title,
  .use-skip-card h4 {
    font-size: var(--fluid-text-xs);
    margin-bottom: var(--fluid-space-xs);
  }

  .info-box {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
  }

  .info-box__title,
  .info-box h4 {
    font-size: var(--fluid-text-xs);
  }

  .info-box__text,
  .info-box p {
    font-size: var(--fluid-text-xs);
  }
}

@media (max-width: 500px) {
  .responsibility-card {
    padding: var(--fluid-space-xs);
  }

  .use-skip-card {
    padding: var(--fluid-space-xs);
  }

  .info-box {
    padding: var(--fluid-space-xs);
  }
}
/**
 * AMAI Design System - Stat Card Component
 * Usa tokens fluidos de tokens/components.css
 * Sem media queries - responsividade automática via clamp()
 */

.stat-card {
  background: var(--stat-card-bg);
  border: 1px solid var(--stat-card-border);
  border-radius: var(--stat-card-radius);
  padding: var(--stat-card-padding);
  display: flex;
  align-items: center;
  gap: var(--stat-card-gap);
}

.stat-card__icon {
  width: var(--stat-icon-size);
  height: var(--stat-icon-size);
  border-radius: var(--stat-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__icon i {
  font-size: var(--stat-icon-font-size);
}

.stat-card__content {
  flex: 1;
  min-width: 0;
}

.stat-card__value {
  font-size: var(--stat-value-size);
  font-weight: var(--stat-value-weight);
  line-height: 1;
}

.stat-card__label {
  font-size: var(--stat-label-size);
  color: var(--color-text-muted);
  margin-top: var(--stat-label-margin);
}

/* Icon color variants */
.stat-card__icon--planning {
  background: var(--color-planning-subtle);
  color: var(--color-planning);
}

.stat-card__icon--build {
  background: var(--color-build-subtle);
  color: var(--color-build);
}

.stat-card__icon--validation {
  background: var(--color-validation-subtle);
  color: var(--color-validation);
}

.stat-card__icon--done {
  background: var(--color-done-subtle);
  color: var(--color-done);
}

.stat-card__icon--primary {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .stat-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--fluid-space-sm);
    gap: var(--stat-card-mobile-gap);
  }

  .stat-card__icon {
    width: var(--fluid-size-sm);
    height: var(--fluid-size-sm);
  }

  .stat-card__icon i {
    font-size: var(--fluid-text-lg);
  }

  .stat-card__value {
    font-size: var(--fluid-text-xl);
  }

  .stat-card__label {
    font-size: var(--fluid-text-xs);
  }

  .stat-card__content {
    text-align: center;
  }
}

@media (max-width: 500px) {
  .stat-card {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
    gap: var(--stat-card-mobile-gap);
  }

  .stat-card__icon {
    width: var(--fluid-size-xs);
    height: var(--fluid-size-xs);
  }

  .stat-card__icon i {
    font-size: var(--fluid-text-md);
  }

  .stat-card__value {
    font-size: var(--fluid-text-lg);
  }

  .stat-card__label {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - State Card Component
 * Usa tokens fluidos de tokens/components.css
 * Sem media queries - responsividade automática via clamp()
 */

.state-card {
  background: var(--state-card-bg);
  border: var(--state-card-border-width) solid var(--state-card-border);
  border-radius: var(--state-card-radius);
  padding: var(--state-card-padding);
  text-align: center;
  transition: all 0.2s ease;
}

.state-card:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: var(--shadow-card-hover);
}

/* State variants */
.state-card--waiting { border-color: var(--color-waiting); }
.state-card--waiting:hover { background: var(--color-waiting-hover); }

.state-card--planning { border-color: var(--color-planning); }
.state-card--planning:hover { background: var(--color-planning-hover); }

.state-card--build { border-color: var(--color-build); }
.state-card--build:hover { background: var(--color-build-hover); }

.state-card--validation { border-color: var(--color-validation); }
.state-card--validation:hover { background: var(--color-validation-hover); }

.state-card--done { border-color: var(--color-done); }
.state-card--done:hover { background: var(--color-done-hover); }

.state-card__icon {
  width: var(--state-icon-size);
  height: var(--state-icon-size);
  border-radius: var(--state-icon-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--state-icon-margin);
  font-size: var(--state-icon-font-size);
}

.state-card--waiting .state-card__icon {
  background: var(--color-waiting-subtle);
  color: var(--color-waiting);
}

.state-card--planning .state-card__icon {
  background: var(--color-planning-subtle);
  color: var(--color-planning);
}

.state-card--build .state-card__icon {
  background: var(--color-build-subtle);
  color: var(--color-build);
}

.state-card--validation .state-card__icon {
  background: var(--color-validation-subtle);
  color: var(--color-validation);
}

.state-card--done .state-card__icon {
  background: var(--color-done-subtle);
  color: var(--color-done);
}

.state-card__name {
  font-weight: var(--state-name-weight);
  font-size: var(--state-name-size);
  margin-bottom: var(--state-name-margin);
}

.state-card__desc {
  font-size: var(--state-desc-size);
  color: var(--color-text-muted);
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .state-card {
    padding: var(--fluid-space-sm);
  }

  .state-card__icon {
    width: var(--fluid-size-sm);
    height: var(--fluid-size-sm);
    font-size: var(--fluid-text-lg);
    margin-bottom: var(--fluid-space-xs);
  }

  .state-card__name {
    font-size: var(--fluid-text-sm);
  }

  .state-card__desc {
    font-size: var(--fluid-text-xs);
  }
}

@media (max-width: 500px) {
  .state-card {
    padding: var(--fluid-space-xs);
  }

  .state-card__icon {
    width: var(--fluid-size-xs);
    height: var(--fluid-size-xs);
    font-size: var(--fluid-text-md);
  }

  .state-card__name {
    font-size: var(--fluid-text-xs);
  }
}
/**
 * AMAI Design System - Table Component
 *
 * Tabela com escala fluida.
 * Usa tokens de tokens/scale.css e tokens/components.css
 *
 * Suporta tanto seletores BEM quanto seletores de descendentes para compatibilidade.
 */

/* Container com scroll horizontal */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}

/* BEM: .table__header-cell, .table__cell | Legacy: th, td */
.table__header-cell,
.table__cell,
.table th,
.table td {
  padding: var(--fluid-space-xs) var(--fluid-space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

/* BEM: .table__header-cell | Legacy: th */
.table__header-cell,
.table th {
  background: var(--table-header-bg);
  font-weight: 600;
  font-size: var(--fluid-text-xs);
  color: var(--table-header-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* BEM: .table__cell | Legacy: td */
.table__cell,
.table td {
  font-size: var(--fluid-text-sm);
  color: var(--color-text);
}

/* BEM: .table__row:last-child .table__cell | Legacy: tr:last-child td */
.table__row:last-child .table__cell,
.table tr:last-child td {
  border-bottom: none;
}

/* BEM: .table__body .table__row | Legacy: tbody tr */
.table__body .table__row,
.table tbody tr {
  transition: background 0.2s ease;
}

.table__body .table__row:hover,
.table tbody tr:hover {
  background: var(--table-row-hover);
}

/* Highlight first columns - Legacy support */
.table__cell--highlight,
.table td:first-child,
.table td:nth-child(2) {
  font-weight: 600;
}

/* Variants */
.table--compact .table__header-cell,
.table--compact .table__cell,
.table--compact th,
.table--compact td {
  padding: var(--fluid-space-2xs) var(--fluid-space-sm);
}

.table--bordered {
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-md);
  overflow: hidden;
}

.table--striped .table__body .table__row:nth-child(even),
.table--striped tbody tr:nth-child(even) {
  background: var(--color-primary-subtle);
}

/* ============================================
   MOBILE RESPONSIVE - Scroll horizontal
   ============================================ */
@media (max-width: 768px) {
  .table-container {
    margin: 0 calc(-1 * var(--fluid-space-sm));
    padding: 0 var(--fluid-space-sm);
    width: calc(100% + 2 * var(--fluid-space-sm));
  }

  .table {
    min-width: max-content;
  }

  .table th,
  .table td {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
    font-size: var(--fluid-text-xs);
    white-space: nowrap;
  }

  /* Última coluna pode quebrar texto */
  .table th:last-child,
  .table td:last-child {
    white-space: normal;
    min-width: var(--table-last-col-min);
    max-width: var(--table-last-col-max);
  }

  .table th {
    font-size: var(--fluid-text-xs);
  }
}

@media (max-width: 500px) {
  .table-container {
    margin: 0 calc(-1 * var(--fluid-space-xs));
    padding: 0 var(--fluid-space-xs);
    width: calc(100% + 2 * var(--fluid-space-xs));
  }

  .table th,
  .table td {
    padding: var(--fluid-space-2xs) var(--fluid-space-xs);
  }
}
/**
 * AMAI Design System - Grid & Layout System
 * Usa tokens de tokens/components.css
 */

/* ============================================
   MAIN LAYOUT
   ============================================ */
.main {
  margin-left: var(--nav-width);
  min-height: 100vh;
}

.header {
  background: var(--header-bg);
  border-bottom: var(--header-border-width) solid var(--header-border);
  padding: var(--header-padding);
  position: sticky;
  top: 0;
  z-index: var(--primitive-z-100);
  display: flex;
  align-items: center;
  gap: var(--header-gap);
  min-height: var(--header-height);
  box-sizing: border-box;
}

.header__title {
  font-size: var(--header-title-size);
  font-weight: var(--header-title-weight);
  margin: 0;
}

.header__separator {
  color: var(--color-text-muted);
  font-size: var(--header-separator-size);
}

.header__subtitle {
  font-size: var(--header-subtitle-size);
  color: var(--color-text-muted);
  margin: 0;
}

.header__content {
  display: flex;
  align-items: center;
  gap: var(--header-gap);
}

.header__row {
  display: contents;
}

.content {
  padding: var(--content-padding);
  max-width: var(--content-max-width);
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
  display: none;
}

.section.active {
  display: block;
  animation: fadeIn var(--primitive-duration-slow) var(--primitive-easing-out);
}

/* ============================================
   GRID SYSTEM
   ============================================ */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stats-row-gap);
  margin-bottom: var(--stats-row-margin);
}

/* Stats row mobile override - ensure 2x2 grid */
@media (max-width: 768px) {
  .stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--fluid-space-md) !important;
  }
}

/* States grid */
.states-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--states-grid-gap);
}

/* Comparison row */
.comparison-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

/* ============================================
   FLEX UTILITIES
   ============================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ============================================
   SPACING UTILITIES
   ============================================ */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* ============================================
   RESPONSIVE
   ============================================ */

/* Extra large screens (2K+) - center content */
@media (min-width: 1800px) {
  .content {
    max-width: 1600px;
    margin: 0 auto;
  }
}

/* Large screens (1440px+) */
@media (min-width: 1440px) {
  .content {
    padding: var(--space-xl) var(--space-2xl);
  }
}

/* Notebook screens (1200-1439px) - common for 13" and 15" laptops */
@media (min-width: 1200px) and (max-width: 1439px) {
  .content {
    padding: var(--space-lg) var(--space-xl);
  }

  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}

/* Medium screens (1024-1199px) - smaller notebooks */
@media (min-width: 1024px) and (max-width: 1199px) {
  .content {
    padding: var(--space-lg) var(--space-lg);
  }

  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .states-grid { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets (769px - 1023px) */
@media (min-width: 769px) and (max-width: 1023px) {
  .content {
    padding: var(--space-md) var(--space-lg);
  }

  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .states-grid { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile landscape / small tablets */
@media (max-width: 768px) {
  .main {
    margin-left: 0;
  }

  .content {
    padding: var(--space-md);
  }

  .header {
    padding: var(--header-mobile-padding);
    min-height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--header-mobile-gap);
  }

  .header__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1;
  }

  .header__content {
    display: none;
  }

  .header__title {
    font-size: var(--header-mobile-title-size);
    font-weight: var(--header-title-weight);
    margin: 0;
    line-height: 1.2;
  }

  .header__separator {
    display: none;
  }

  .header__subtitle {
    font-size: var(--header-mobile-subtitle-size);
    margin: 0;
    opacity: var(--header-mobile-subtitle-opacity);
    line-height: 1.2;
  }

  .nav-toggle {
    position: static !important;
    flex-shrink: 0;
    width: var(--nav-toggle-size);
    height: var(--nav-toggle-size);
    font-size: var(--nav-toggle-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nav-toggle-radius);
  }

  .nav-toggle i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--fluid-space-md);
  }
  .states-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Centraliza o último item se estiver sozinho na linha (5 itens = 2+2+1) */
  .states-grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }

  .grid--2 { grid-template-columns: 1fr; }
  .grid--3,
  .grid--4,
  .grid--5 { grid-template-columns: 1fr; }
  .comparison-row { grid-template-columns: 1fr; }
}

/* Mobile portrait */
@media (max-width: 500px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--fluid-space-md) !important;
  }
  .states-grid { grid-template-columns: repeat(2, 1fr); }

  .content {
    padding: var(--space-sm);
  }

  .header__title {
    font-size: var(--fluid-text-md);
  }
}
/**
 * AMAI Design System - Layouts Index
 */

@import './nav.css';
@import './grid.css';
/**
 * AMAI Design System - Navigation Layout
 * Usa tokens de tokens/components.css
 */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--nav-width);
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  overflow-y: auto;
  z-index: var(--primitive-z-1000);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.nav__content {
  flex: 1;
  overflow-y: auto;
}

.nav__footer {
  margin-top: auto;
  font-size: var(--nav-footer-size);
  color: var(--color-text-muted);
  padding: var(--nav-footer-padding);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fluid-space-xs);
}

.nav__footer-info {
  text-align: left;
  white-space: nowrap;
}

.nav__footer-controls {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
}

/* Language Dropdown - Custom */
.lang-dropdown {
  position: relative;
}

.lang-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-2xs);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-sm);
  padding: var(--fluid-space-xs) var(--fluid-space-sm);
  font-size: var(--fluid-text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.lang-dropdown__trigger:hover {
  border-color: var(--color-primary);
}

.lang-dropdown__flag {
  font-size: 1.1em;
}

.lang-dropdown__code {
  min-width: 24px;
}

.lang-dropdown__arrow {
  font-size: 0.8em;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.lang-dropdown.open .lang-dropdown__arrow {
  transform: rotate(180deg);
}

.lang-dropdown__menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: var(--fluid-space-xs);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--fluid-radius-md);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: var(--fluid-space-xs);
  margin: 0;
  margin-bottom: var(--fluid-space-xs);
  min-width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.lang-dropdown.open .lang-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--fluid-space-xs);
  padding: var(--fluid-space-xs) var(--fluid-space-sm);
  border-radius: var(--fluid-radius-sm);
  cursor: pointer;
  font-size: var(--fluid-text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: background 0.15s ease;
}

.lang-dropdown__item:hover {
  background: var(--color-primary-subtle);
}

.lang-dropdown__item.active {
  background: var(--color-primary);
  color: white;
}

.lang-dropdown__item span {
  font-size: 1.2em;
}

/* Theme Toggle - Pill Style */
.theme-toggle {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.theme-toggle__track {
  position: relative;
  width: 56px;
  height: 28px;
  background: #1a1a2e;
  border-radius: 14px;
  transition: background 0.3s ease;
}

.theme-toggle__thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  background: #f8fafc;
  border-radius: 50%;
  transition: transform 0.3s ease, background 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle__icon {
  font-size: 11px;
  line-height: 1;
  transition: opacity 0.2s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Dark mode: show moon (dark icon inside white thumb) */
.theme-toggle__icon--moon {
  color: #1e293b;
  opacity: 1;
}

.theme-toggle__icon--sun {
  color: #f59e0b;
  opacity: 0;
}

/* Light theme toggle state */
[data-theme="light"] .theme-toggle__track {
  background: #cbd5e1;
}

[data-theme="light"] .theme-toggle__thumb {
  transform: translateX(28px);
  background: #1e293b;
}

/* Light mode: show sun (yellow icon inside dark thumb) */
[data-theme="light"] .theme-toggle__icon--moon {
  opacity: 0;
}

[data-theme="light"] .theme-toggle__icon--sun {
  opacity: 1;
}

/* Header */
.nav__header {
  padding: var(--nav-header-padding);
  border-bottom: var(--header-border-width) solid var(--nav-header-border);
  background: var(--nav-header-bg);
  cursor: pointer;
  transition: filter var(--transition-fast);
  height: var(--header-height);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav__header:hover {
  filter: brightness(1.1);
}

.nav__header h1 {
  font-size: var(--nav-header-title-size);
  font-weight: 700;
  color: var(--primitive-color-white);
  margin: 0;
}

.nav__header p {
  font-size: var(--nav-header-subtitle-size);
  opacity: 0.9;
  margin: var(--fluid-space-3xs) 0 0 0;
  white-space: nowrap;
  color: var(--primitive-color-white);
}

/* Section */
.nav-section {
  border-bottom: 1px solid var(--color-border);
}

.nav-section__header {
  padding: var(--nav-section-header-padding);
  font-size: var(--nav-section-header-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nav-section-header-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition-fast);
}

.nav-section__header:hover {
  background: var(--color-bg);
}

.nav-section__header .toggle-icon {
  transition: transform var(--transition-slow);
  font-size: var(--fluid-text-xs);
}

.nav-section__header.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.nav-section.active .nav-section__header {
  background: var(--color-planning-subtle);
  color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
}

/* Links container */
.nav-section__links {
  max-height: 500px;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.nav-section__links.collapsed {
  max-height: 0;
}

/* Link */
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
  padding: var(--nav-link-padding);
  color: var(--nav-link-text);
  text-decoration: none;
  font-size: var(--nav-link-size);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.nav-link:hover {
  background: var(--nav-link-bg-hover);
  color: var(--nav-link-text-hover);
}

.nav-link.active {
  background: var(--nav-link-bg-active);
  color: var(--nav-link-text-active);
  font-weight: 500;
  border-right: 3px solid var(--color-primary);
}

.nav-link i {
  font-size: var(--nav-link-size);
}

/* Mobile Toggle */
.nav-toggle {
  display: none;
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: calc(var(--primitive-z-1000) + 1);
  background: var(--color-primary);
  color: var(--primitive-color-white);
  border: none;
  border-radius: var(--primitive-border-radius-lg);
  padding: var(--primitive-spacing-3);
  cursor: pointer;
}

.nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-overlay);
  z-index: calc(var(--primitive-z-1000) - 1);
}

.nav-overlay.open {
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .nav {
    transform: translateX(-100%);
    width: 85%;
    max-width: 320px;
  }

  .nav.open {
    transform: translateX(0);
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    z-index: auto;
  }

  .nav__header {
    padding: 18px 20px;
    height: auto;
    min-height: 80px;
  }

  .nav__header h1 {
    font-size: 22px;
  }

  .nav__header p {
    font-size: 13px;
  }

  .nav__footer {
    padding: var(--fluid-space-sm);
    padding-bottom: calc(var(--fluid-space-sm) + env(safe-area-inset-bottom, 0px));
  }

  .nav__footer-controls {
    gap: var(--fluid-space-md);
  }

  .nav__footer-info {
    font-size: var(--fluid-text-xs);
  }

  .nav-section__header {
    padding: 14px 16px;
    font-size: 13px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .nav-link {
    padding: 14px 16px 14px 24px;
    font-size: 15px;
    min-height: 48px;
    box-sizing: border-box;
  }

  .nav-link i {
    font-size: 18px;
  }

  .theme-toggle__track {
    width: 48px;
    height: 24px;
  }

  .theme-toggle__thumb {
    width: 18px;
    height: 18px;
  }

  [data-theme="light"] .theme-toggle__thumb {
    transform: translateX(24px);
  }

  .theme-toggle__icon {
    font-size: 9px;
  }

  /* Language dropdown mobile */
  .lang-dropdown__trigger {
    padding: var(--fluid-space-xs) var(--fluid-space-sm);
    font-size: var(--fluid-text-sm);
  }

  .lang-dropdown__menu {
    min-width: 120px;
  }

  .lang-dropdown__item {
    padding: var(--fluid-space-sm) var(--fluid-space-md);
    font-size: var(--fluid-text-md);
  }
}