/* ================================================================
   GASTROGEST — Design Tokens (CSS Custom Properties)
   Arquivo: assets/css/tokens.css
   ================================================================ */

:root {

  /* ================================================================
     PALETA DE CORES
     ================================================================ */

  /* Primária — Vermelho Restaurante */
  --color-primary:          #C0392B;
  --color-primary-dark:     #A93226;
  --color-primary-darker:   #922B21;
  --color-primary-light:    #E74C3C;
  --color-primary-alpha-10: rgba(192, 57, 43, 0.10);
  --color-primary-alpha-20: rgba(192, 57, 43, 0.20);

  /* Sidebar */
  --color-sidebar-bg:       #1A1A1A;
  --color-sidebar-border:   #2C2C2C;
  --color-sidebar-text:     #D4D4D4;
  --color-sidebar-muted:    #636366;
  --color-sidebar-hover:    rgba(255,255,255,0.06);
  --color-sidebar-active-bg: #C0392B;
  --color-sidebar-active-text: #FFFFFF;

  /* Superfícies */
  --color-bg:               #F0EFE8;
  --color-bg-alt:           #E8E7E0;
  --color-surface:          #FFFFFF;
  --color-surface-raised:   #FAFAF8;
  --color-surface-sunken:   #F5F4EE;

  /* Texto */
  --color-text-primary:     #1A1A1A;
  --color-text-secondary:   #555558;
  --color-text-muted:       #909094;
  --color-text-placeholder: #B0B0B4;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        #C0392B;

  /* Bordas */
  --color-border:           #E2E1DA;
  --color-border-strong:    #C8C7C0;
  --color-border-focus:     #C0392B;

  /* Semânticas */
  --color-success:          #1A7A44;
  --color-success-mid:      #27AE60;
  --color-success-light:    #2ECC71;
  --color-success-bg:       #E8F8F1;
  --color-success-border:   #A9DFBF;

  --color-warning:          #B7770D;
  --color-warning-mid:      #D68910;
  --color-warning-light:    #F39C12;
  --color-warning-bg:       #FEF9E7;
  --color-warning-border:   #FDEBD0;

  --color-danger:           #C0392B;
  --color-danger-mid:       #E74C3C;
  --color-danger-bg:        #FDEDEC;
  --color-danger-border:    #FADBD8;

  --color-info:             #1A5276;
  --color-info-mid:         #2471A3;
  --color-info-light:       #2E86C1;
  --color-info-bg:          #EBF5FB;
  --color-info-border:      #AED6F1;

  /* ================================================================
     ESPAÇAMENTO
     ================================================================ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* ================================================================
     TIPOGRAFIA
     ================================================================ */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-base:    1.5;
  --lh-relaxed: 1.625;

  --ls-tight:  -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.05em;
  --ls-wider:   0.08em;
  --ls-widest:  0.12em;

  /* ================================================================
     BORDER RADIUS
     ================================================================ */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-base: 8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ================================================================
     SOMBRAS
     ================================================================ */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-base:  0 2px 8px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.06);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.07);
  --shadow-modal: 0 24px 64px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.10);

  /* ================================================================
     LAYOUT
     ================================================================ */
  --sidebar-width:   260px;
  --topbar-height:    60px;
  --content-padding:  20px;
  --content-max:    1440px;

  /* ================================================================
     TRANSIÇÕES
     ================================================================ */
  --t-fast:   80ms ease;
  --t-base:  150ms ease;
  --t-slow:  250ms ease;
  --t-xslow: 350ms ease;

  /* ================================================================
     Z-INDEX
     ================================================================ */
  --z-base:     1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;
}