/* ==========================================================================
   Landora — Design Tokens v1.0
   Importe uma vez no root do app:  import "./brand/tokens/tokens.css";
   Tema: claro por padrão; escuro via [data-theme="dark"] ou preferência do SO.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Paleta base ---------- */

  /* Azul Elétrico — cor primária */
  --ld-blue-50: #EEF4FF;
  --ld-blue-100: #DCE7FF;
  --ld-blue-200: #BCD0FF;
  --ld-blue-300: #8EAFFF;
  --ld-blue-400: #5C88FF;
  --ld-blue-500: #2E69FF; /* brand */
  --ld-blue-600: #1F52EB;
  --ld-blue-700: #1A41C2;
  --ld-blue-800: #1B389A;
  --ld-blue-900: #1C3379;
  --ld-blue-950: #131F47;

  /* Verde Neon — cor de destaque */
  --ld-mint-50: #EAFFF6;
  --ld-mint-100: #CBFDE8;
  --ld-mint-200: #9CF8D6;
  --ld-mint-300: #5EEFC0;
  --ld-mint-400: #22E5A0; /* brand */
  --ld-mint-500: #0BCB8A;
  --ld-mint-600: #00A572;
  --ld-mint-700: #02845E;
  --ld-mint-800: #07684C;
  --ld-mint-900: #085641;
  --ld-mint-950: #003124;

  /* Ciano — ponte do gradiente */
  --ld-cyan-50: #ECFCFF;
  --ld-cyan-100: #CFF6FF;
  --ld-cyan-200: #A5EEFF;
  --ld-cyan-300: #5CDCFF;
  --ld-cyan-400: #00C2FF; /* brand */
  --ld-cyan-500: #00A3E0;
  --ld-cyan-600: #0081B8;
  --ld-cyan-700: #066795;
  --ld-cyan-800: #0E5579;
  --ld-cyan-900: #104766;
  --ld-cyan-950: #082D44;

  /* Ink — neutros com leve tom azul-noite */
  --ld-ink-0: #FFFFFF;
  --ld-ink-50: #F6F8FC;
  --ld-ink-100: #EDF0F7;
  --ld-ink-200: #DDE2EE;
  --ld-ink-300: #C2C9DA;
  --ld-ink-400: #8F99B3;
  --ld-ink-500: #66718F;
  --ld-ink-600: #4A5470;
  --ld-ink-700: #353E57;
  --ld-ink-800: #1F2740;
  --ld-ink-900: #121829;
  --ld-ink-950: #0A0F1E; /* brand */

  /* Status */
  --ld-success-500: #00A572;
  --ld-success-700: #02845E;
  --ld-warning-500: #FFB020;
  --ld-warning-700: #9A5B00;
  --ld-danger-500: #FF4D5E;
  --ld-danger-600: #D91E32;
  --ld-info-500: #00A3E0;

  /* ---------- Gradientes ---------- */
  --ld-gradient-flow: linear-gradient(135deg, #22E5A0 0%, #00C2FF 50%, #2E69FF 100%);
  --ld-gradient-flow-h: linear-gradient(90deg, #22E5A0 0%, #00C2FF 50%, #2E69FF 100%);
  /* CTA: verde→ciano, garante contraste AA com texto Ink */
  --ld-gradient-cta: linear-gradient(135deg, #22E5A0 0%, #00C2FF 100%);
  --ld-gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(0, 194, 255, 0.28) 0%, rgba(46, 105, 255, 0) 100%);
  --ld-gradient-night: linear-gradient(180deg, #121829 0%, #0A0F1E 100%);

  /* ---------- Tipografia ---------- */
  --ld-font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ld-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ld-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ld-text-xs: 0.75rem;     /* 12 */
  --ld-text-sm: 0.875rem;    /* 14 */
  --ld-text-base: 1rem;      /* 16 */
  --ld-text-lg: 1.125rem;    /* 18 */
  --ld-text-xl: 1.25rem;     /* 20 */
  --ld-text-2xl: 1.5rem;     /* 24 */
  --ld-text-3xl: 1.875rem;   /* 30 */
  --ld-text-4xl: 2.25rem;    /* 36 */
  --ld-text-5xl: 3rem;       /* 48 */
  --ld-text-6xl: 3.75rem;    /* 60 */
  --ld-text-7xl: 4.5rem;     /* 72 */

  --ld-leading-tight: 1.05;
  --ld-leading-snug: 1.25;
  --ld-leading-normal: 1.5;
  --ld-leading-relaxed: 1.65;

  --ld-tracking-display: -0.035em;
  --ld-tracking-heading: -0.02em;
  --ld-tracking-normal: 0;
  --ld-tracking-label: 0.08em;

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

  /* ---------- Espaçamento (base 4px) ---------- */
  --ld-space-0: 0;
  --ld-space-1: 0.25rem;  /* 4 */
  --ld-space-2: 0.5rem;   /* 8 */
  --ld-space-3: 0.75rem;  /* 12 */
  --ld-space-4: 1rem;     /* 16 */
  --ld-space-5: 1.25rem;  /* 20 */
  --ld-space-6: 1.5rem;   /* 24 */
  --ld-space-8: 2rem;     /* 32 */
  --ld-space-10: 2.5rem;  /* 40 */
  --ld-space-12: 3rem;    /* 48 */
  --ld-space-16: 4rem;    /* 64 */
  --ld-space-20: 5rem;    /* 80 */
  --ld-space-24: 6rem;    /* 96 */
  --ld-space-32: 8rem;    /* 128 */

  /* ---------- Raios (ecoam o tile do logo: 16/64 = 25%) ---------- */
  --ld-radius-xs: 6px;
  --ld-radius-sm: 8px;
  --ld-radius-md: 12px;
  --ld-radius-lg: 16px;
  --ld-radius-xl: 24px;
  --ld-radius-2xl: 32px;
  --ld-radius-full: 9999px;

  /* ---------- Sombras ---------- */
  --ld-shadow-xs: 0 1px 2px rgba(10, 15, 30, 0.06);
  --ld-shadow-sm: 0 1px 3px rgba(10, 15, 30, 0.08), 0 1px 2px rgba(10, 15, 30, 0.04);
  --ld-shadow-md: 0 6px 16px -4px rgba(10, 15, 30, 0.10), 0 2px 4px rgba(10, 15, 30, 0.04);
  --ld-shadow-lg: 0 16px 40px -12px rgba(10, 15, 30, 0.18);
  --ld-shadow-glow: 0 10px 32px -8px rgba(46, 105, 255, 0.55);
  --ld-shadow-glow-mint: 0 10px 32px -8px rgba(34, 229, 160, 0.5);
  --ld-ring: 0 0 0 2px var(--ld-bg, #FFFFFF), 0 0 0 4px #2E69FF; /* anel sólido com respiro */

  /* ---------- Movimento ---------- */
  --ld-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ld-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ld-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ld-duration-fast: 120ms;
  --ld-duration-base: 200ms;
  --ld-duration-slow: 320ms;

  /* ---------- Layout ---------- */
  --ld-container: 1200px;
  --ld-container-wide: 1400px;
  --ld-z-dropdown: 1000;
  --ld-z-sticky: 1100;
  --ld-z-modal: 1300;
  --ld-z-toast: 1400;

  /* ======================================================================
     Tokens semânticos — TEMA CLARO (use estes nos componentes)
     ====================================================================== */
  color-scheme: light;
  --ld-bg: var(--ld-ink-0);
  --ld-bg-subtle: var(--ld-ink-50);
  --ld-bg-muted: var(--ld-ink-100);
  --ld-surface: var(--ld-ink-0);
  --ld-surface-raised: var(--ld-ink-0);
  --ld-surface-inverse: var(--ld-ink-950);

  --ld-border: var(--ld-ink-200);
  --ld-border-strong: var(--ld-ink-300);

  --ld-text: var(--ld-ink-950);
  --ld-text-secondary: var(--ld-ink-600);
  --ld-text-muted: var(--ld-ink-500);
  --ld-text-inverse: var(--ld-ink-0);
  --ld-link: var(--ld-blue-600);

  --ld-primary: var(--ld-blue-500);
  --ld-primary-hover: var(--ld-blue-600);
  --ld-primary-active: var(--ld-blue-700);
  --ld-primary-soft: var(--ld-blue-50);
  --ld-primary-soft-text: var(--ld-blue-700);
  --ld-on-primary: #FFFFFF;

  --ld-accent: var(--ld-mint-400);
  --ld-accent-hover: var(--ld-mint-300);
  --ld-accent-soft: var(--ld-mint-50);
  --ld-accent-soft-text: var(--ld-mint-800);
  --ld-on-accent: var(--ld-ink-950);

  --ld-success: var(--ld-success-700);
  --ld-success-soft: var(--ld-mint-50);
  --ld-warning: var(--ld-warning-700);
  --ld-warning-soft: #FFF6E5;
  --ld-danger: var(--ld-danger-600);
  --ld-danger-soft: #FFEEF0;
  --ld-info: var(--ld-cyan-700);
  --ld-info-soft: var(--ld-cyan-50);

  --ld-focus-ring: var(--ld-ring);
}

/* ======================================================================
   TEMA ESCURO
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ld-bg: var(--ld-ink-950);
    --ld-bg-subtle: var(--ld-ink-900);
    --ld-bg-muted: var(--ld-ink-800);
    --ld-surface: var(--ld-ink-900);
    --ld-surface-raised: var(--ld-ink-800);
    --ld-surface-inverse: var(--ld-ink-0);
    --ld-border: var(--ld-ink-800);
    --ld-border-strong: var(--ld-ink-700);
    --ld-text: var(--ld-ink-50);
    --ld-text-secondary: var(--ld-ink-300);
    --ld-text-muted: var(--ld-ink-400);
    --ld-text-inverse: var(--ld-ink-950);
    --ld-link: var(--ld-blue-300);
    --ld-primary: var(--ld-blue-500);
    --ld-primary-hover: var(--ld-blue-400);
    --ld-primary-active: var(--ld-blue-600);
    --ld-primary-soft: rgba(46, 105, 255, 0.16);
    --ld-primary-soft-text: var(--ld-blue-200);
    --ld-accent-soft: rgba(34, 229, 160, 0.14);
    --ld-accent-soft-text: var(--ld-mint-200);
    --ld-success: var(--ld-mint-400);
    --ld-success-soft: rgba(34, 229, 160, 0.14);
    --ld-warning: var(--ld-warning-500);
    --ld-warning-soft: rgba(255, 176, 32, 0.14);
    --ld-danger: var(--ld-danger-500);
    --ld-danger-soft: rgba(255, 77, 94, 0.14);
    --ld-info: var(--ld-cyan-300);
    --ld-info-soft: rgba(0, 194, 255, 0.14);
    --ld-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --ld-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ld-bg: var(--ld-ink-950);
  --ld-bg-subtle: var(--ld-ink-900);
  --ld-bg-muted: var(--ld-ink-800);
  --ld-surface: var(--ld-ink-900);
  --ld-surface-raised: var(--ld-ink-800);
  --ld-surface-inverse: var(--ld-ink-0);
  --ld-border: var(--ld-ink-800);
  --ld-border-strong: var(--ld-ink-700);
  --ld-text: var(--ld-ink-50);
  --ld-text-secondary: var(--ld-ink-300);
  --ld-text-muted: var(--ld-ink-400);
  --ld-text-inverse: var(--ld-ink-950);
  --ld-link: var(--ld-blue-300);
  --ld-primary: var(--ld-blue-500);
  --ld-primary-hover: var(--ld-blue-400);
  --ld-primary-active: var(--ld-blue-600);
  --ld-primary-soft: rgba(46, 105, 255, 0.16);
  --ld-primary-soft-text: var(--ld-blue-200);
  --ld-accent-soft: rgba(34, 229, 160, 0.14);
  --ld-accent-soft-text: var(--ld-mint-200);
  --ld-success: var(--ld-mint-400);
  --ld-success-soft: rgba(34, 229, 160, 0.14);
  --ld-warning: var(--ld-warning-500);
  --ld-warning-soft: rgba(255, 176, 32, 0.14);
  --ld-danger: var(--ld-danger-500);
  --ld-danger-soft: rgba(255, 77, 94, 0.14);
  --ld-info: var(--ld-cyan-300);
  --ld-info-soft: rgba(0, 194, 255, 0.14);
  --ld-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --ld-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}