/* =============================================================
   tokens.css — Design System: Xnova
   Extraído de: https://themetick.com/xnova/
   Estética: Modern minimalist com acento terracota/burnt orange
   ============================================================= */

:root {
  /* === PALETA (cores de referência) === */
  --color-palette-black: #000000;
  --color-palette-blue: #114753;
  --color-palette-dark: #171717;
  --color-palette-slate: #5D7591;
  --color-palette-gray: #BFBFBF;
  --color-palette-warm: #F0E3CB;
  --color-palette-off-white: #FAFAFA;

  /* === CORES BASE === */
  --color-background: var(--color-palette-off-white);
  --color-foreground: #262936;

  /* === CARD / SUPERFÍCIE === */
  --color-card: #ffffff;
  --color-card-foreground: #262936;

  /* === PRIMARY (Royal Blue) === */
  --color-primary: var(--color-palette-blue);
  --color-primary-foreground: #ffffff;
  --color-primary-50: #EEF5F6;
  --color-primary-100: #C8E5E9;
  --color-primary-200: #91CBD3;
  --color-primary-300: #52A8B5;
  --color-primary-400: #238696;
  --color-primary-500: var(--color-palette-blue);
  --color-primary-600: #0D3A45;
  --color-primary-700: #0A2E37;
  --color-primary-800: #072229;
  --color-primary-900: #04151A;

  /* === SECONDARY === */
  --color-secondary: var(--color-palette-off-white);
  --color-secondary-foreground: var(--color-palette-dark);

  /* === MUTED === */
  --color-muted: #F5F6F7;
  --color-muted-foreground: #666F76;

  /* === SEMANTIC === */
  --color-success: #22A05B;
  --color-success-foreground: #ffffff;
  --color-warning: #E8A020;
  --color-warning-foreground: #19191B;
  --color-destructive: #D93025;
  --color-destructive-foreground: #ffffff;
  --color-info: #1A73E8;
  --color-info-foreground: #ffffff;

  /* === BRAND / ACCENT === */
  --color-warm-surface: #F0E3CB;
  --color-instagram-bg: var(--color-warm-surface);
  --color-categories-bg: var(--color-warm-surface);

  /* === BORDER & INPUT === */
  --color-border: #E8EAEC;
  --color-input: #D0D4D8;
  --color-ring: #4A5E74;

  /* === SIDEBAR === */
  --color-sidebar: #262936;
  --color-sidebar-foreground: #F5F6F7;
  --color-sidebar-accent: rgba(255, 255, 255, 0.08);

  /* === NEUTRAL SCALE (base #5D7591) === */
  --color-neutral-50: #F2F5F9;
  --color-neutral-100: #E5EBF8;
  --color-neutral-200: #CBD7F0;
  --color-neutral-300: #A8BDE3;
  --color-neutral-400: #7E9AC6;
  --color-neutral-500: #5D7591;
  --color-neutral-600: #4A5E74;
  --color-neutral-700: #394857;
  --color-neutral-800: #28323B;
  --color-neutral-900: #171D1F;

  /* === TIPOGRAFIA === */
  --font-display: 'Montserrat', sans-serif;
  --font-family: 'Lato', sans-serif;
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */
  --font-size-5xl: 3rem;
  /* 48px */

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

  /* === BORDER RADIUS === */
  --radius-none: 0px;
  --radius-sm: 0.25rem;
  /* 4px */
  --radius: 0.5rem;
  /* 8px */
  --radius-md: 0.75rem;
  /* 12px */
  --radius-lg: 1rem;
  /* 16px */
  --radius-xl: 1.875rem;
  /* 30px */
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-crisp: 6px 6px 0px rgba(0, 0, 0, 1);
  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.20);
  --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.40);

  /* === TRANSIÇÕES === */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ========================
   DARK MODE
   ======================== */
.dark {
  --color-background: #19191B;
  --color-foreground: #F5F6F7;

  --color-card: #272D32;
  --color-card-foreground: #F5F6F7;

  --color-primary: #52A8B5;
  --color-primary-foreground: #ffffff;

  --color-secondary: #272D32;
  --color-secondary-foreground: #F5F6F7;

  --color-muted: #272D32;
  --color-muted-foreground: #8D969E;

  --color-border: #3B4349;
  --color-input: #4E5860;
  --color-ring: #3A51E9;

  --color-sidebar: #111113;
  --color-sidebar-foreground: #CFCFCF;
  --color-sidebar-accent: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.50), 0 4px 6px rgba(0, 0, 0, 0.30);
}