/* ============================================
   FindParts — Design Tokens
   Identidade visual: Azul Tech Moderno
   Paleta aprovada: Primary #2563EB / Accent #06B6D4
   ============================================ */

:root {

  /* ═══════════════════════════════════════════
     CORES PRIMÁRIAS
  ═══════════════════════════════════════════ */
  --color-primary:          #2563EB;
  --color-primary-hover:    #1D4ED8;
  --color-primary-active:   #1E40AF;
  --color-primary-light:    #DBEAFE;
  --color-primary-lighter:  #EFF6FF;
  --color-primary-muted:    rgba(37, 99, 235, 0.15);
  --color-primary-text:     #1E40AF;

  /* ═══════════════════════════════════════════
     COR ACCENT (ciano tech)
  ═══════════════════════════════════════════ */
  --color-accent:           #06B6D4;
  --color-accent-hover:     #0891B2;
  --color-accent-light:     #CFFAFE;
  --color-accent-text:      #155E75;

  /* ═══════════════════════════════════════════
     CORES SEMÂNTICAS
  ═══════════════════════════════════════════ */
  --color-success:          #16A34A;
  --color-success-hover:    #15803D;
  --color-success-light:    #DCFCE7;
  --color-success-muted:    rgba(22, 163, 74, 0.15);
  --color-success-text:     #166534;

  --color-warning:          #F59E0B;
  --color-warning-hover:    #D97706;
  --color-warning-light:    #FEF3C7;
  --color-warning-muted:    rgba(245, 158, 11, 0.15);
  --color-warning-text:     #92400E;

  --color-danger:           #DC2626;
  --color-danger-hover:     #B91C1C;
  --color-danger-light:     #FEE2E2;
  --color-danger-muted:     rgba(220, 38, 38, 0.15);
  --color-danger-text:      #991B1B;

  --color-info:             #2563EB;
  --color-info-light:       #DBEAFE;
  --color-info-text:        #1E40AF;

  /* ═══════════════════════════════════════════
     NEUTROS — Backgrounds e Superfícies
  ═══════════════════════════════════════════ */
  --color-bg:               #FFFFFF;
  --color-bg-body:          #FFFFFF;
  --color-bg-surface:       #F8FAFC;
  --color-bg-elevated:      #FFFFFF;
  --color-bg-hover:         #F1F5F9;
  --color-bg-active:        #E2E8F0;
  --color-bg-overlay:       rgba(15, 23, 42, 0.5);

  --color-surface:          #FFFFFF;
  --color-surface-2:        #F8FAFC;
  --color-surface-3:        #F1F5F9;

  --color-border:           #E2E8F0;
  --color-border-strong:    #CBD5E1;
  --color-border-hover:     #CBD5E1;
  --color-border-focus:     #2563EB;
  --color-border-light:     #F1F5F9;

  /* ═══════════════════════════════════════════
     NEUTROS — Textos
  ═══════════════════════════════════════════ */
  --color-text-primary:     #0F172A;
  --color-text-secondary:   #475569;
  --color-text-tertiary:    #94A3B8;
  --color-text-muted:       #94A3B8;
  --color-text-disabled:    #CBD5E1;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        #2563EB;
  --color-text-link-hover:  #1D4ED8;

  /* ═══════════════════════════════════════════
     NAVBAR
  ═══════════════════════════════════════════ */
  --navbar-bg:              #FFFFFF;
  --navbar-border:          #E2E8F0;
  --navbar-shadow:          0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --navbar-height:          64px;


  /* ═══════════════════════════════════════════
     TIPOGRAFIA
  ═══════════════════════════════════════════ */
  --font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --font-size-2xs:          10px;
  --font-size-xs:           11px;
  --font-size-sm:           12px;
  --font-size-base:         14px;
  --font-size-md:           15px;
  --font-size-lg:           17px;
  --font-size-xl:           20px;
  --font-size-2xl:          24px;
  --font-size-3xl:          30px;
  --font-size-4xl:          36px;

  --font-weight-regular:    400;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --line-height-tight:      1.25;
  --line-height-snug:       1.375;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.625;

  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-caps:    0.08em;

  /* ═══════════════════════════════════════════
     ESPAÇAMENTOS — Escala base 4px
  ═══════════════════════════════════════════ */
  --space-0:    0px;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* Aliases semânticos (usados no template do usuário) */
  --spacing-xs:   var(--space-1);     /* 4px */
  --spacing-sm:   var(--space-2);     /* 8px */
  --spacing-md:   var(--space-3);     /* 12px */
  --spacing-lg:   var(--space-4);     /* 16px */
  --spacing-xl:   var(--space-6);     /* 24px */
  --spacing-2xl:  var(--space-8);     /* 32px */
  --spacing-3xl:  var(--space-12);    /* 48px */
  --spacing-4xl:  var(--space-16);    /* 64px */

  /* ═══════════════════════════════════════════
     BORDAS E RAIOS
  ═══════════════════════════════════════════ */
  --radius-none:  0px;
  --radius-xs:    3px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-full:  9999px;

  --border-width:       1px;
  --border-width-2:     2px;
  --border-style:       solid;

  /* ═══════════════════════════════════════════
     SOMBRAS
  ═══════════════════════════════════════════ */
  --shadow-xs:          0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:          0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:          0 4px 6px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:          0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04);
  --shadow-xl:          0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04);
  --shadow-2xl:         0 25px 50px rgba(15, 23, 42, 0.12);
  --shadow-inner:       inset 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-focus:       0 0 0 3px rgba(37, 99, 235, 0.20);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.20);

  /* ═══════════════════════════════════════════
     TRANSIÇÕES E ANIMAÇÕES
  ═══════════════════════════════════════════ */
  --transition-fast:    100ms ease;
  --transition-base:    200ms ease;
  --transition-normal:  200ms ease;
  --transition-slow:    350ms ease;
  --transition-bounce:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ═══════════════════════════════════════════
     Z-INDEX — Camadas da UI
  ═══════════════════════════════════════════ */
  --z-base:             1;
  --z-dropdown:         100;
  --z-sticky:           200;
  --z-fixed:            300;
  --z-navbar:           300;
  --z-overlay:          400;
  --z-modal-backdrop:   400;
  --z-modal:            500;
  --z-toast:            600;
  --z-tooltip:          700;

  /* ═══════════════════════════════════════════
     LAYOUT — Dimensões do sistema
  ═══════════════════════════════════════════ */
  --header-height:      64px;
  --page-padding:       var(--space-6);
  --page-max-width:     1400px;
  --max-width-content:  1200px;
  --max-width-form:     640px;
  --card-padding:       var(--space-5);
  --modal-max-width:    560px;
  --modal-max-width-lg: 860px;

  /* ═══════════════════════════════════════════
     COMPONENTES — Valores de componente
  ═══════════════════════════════════════════ */

  /* ── Inputs ── */
  --input-height:       40px;
  --input-height-sm:    32px;
  --input-height-lg:    48px;
  --input-padding-x:    var(--space-3);
  --input-bg:           var(--color-surface);
  --input-border:       var(--color-border);
  --input-border-focus: var(--color-border-focus);
  --input-text:         var(--color-text-primary);
  --input-placeholder:  var(--color-text-muted);
  --input-radius:       var(--radius-lg);
  --input-shadow-focus: var(--shadow-focus);

  /* ── Botões ── */
  --btn-height:         40px;
  --btn-height-sm:      32px;
  --btn-height-lg:      48px;
  --btn-padding-x:      var(--space-4);
  --btn-radius:         var(--radius-lg);
  --btn-font-size:      var(--font-size-base);
  --btn-font-weight:    var(--font-weight-medium);

  --btn-primary-bg:         var(--color-primary);
  --btn-primary-bg-hover:   var(--color-primary-hover);
  --btn-primary-text:       var(--color-text-inverse);
  --btn-primary-shadow:     var(--shadow-xs);

  --btn-secondary-bg:       var(--color-surface-2);
  --btn-secondary-bg-hover: var(--color-bg-hover);
  --btn-secondary-text:     var(--color-text-primary);
  --btn-secondary-border:   var(--color-border);

  --btn-danger-bg:          var(--color-danger);
  --btn-danger-bg-hover:    var(--color-danger-hover);
  --btn-danger-text:        var(--color-text-inverse);

  /* ── Badges ── */
  --badge-height:       22px;
  --badge-radius:       var(--radius-full);
  --badge-padding-y:    2px;
  --badge-padding-x:    var(--space-2);
  --badge-font-size:    var(--font-size-xs);
  --badge-font-weight:  var(--font-weight-medium);

  /* ── Cards ── */
  --card-bg:            var(--color-surface);
  --card-border:        var(--color-border);
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-md);
  --card-radius:        var(--radius-xl);

  /* ── Toast ── */
  --toast-bg:           var(--color-surface);
  --toast-border:       var(--color-border);
  --toast-shadow:       var(--shadow-lg);
  --toast-radius:       var(--radius-xl);

  /* ── Modal ── */
  --modal-bg:           var(--color-surface);
  --modal-shadow:       var(--shadow-xl);
  --modal-radius:       var(--radius-2xl);
  --modal-backdrop:     var(--color-bg-overlay);

  /* ── Avatars ── */
  --avatar-size-sm:     28px;
  --avatar-size-md:     36px;
  --avatar-size-lg:     48px;

  /* ═══════════════════════════════════════════
     FINDPARTS — Tokens específicos
  ═══════════════════════════════════════════ */

  /* TTL / Expiração de cotações */
  --color-ttl-safe:     var(--color-success);
  --color-ttl-warning:  var(--color-warning);
  --color-ttl-danger:   var(--color-danger);
  --color-ttl-expired:  var(--color-text-muted);
}