/*
 * Tokens de design do Social Plus. Fonte única de cores, tipografia, espaçamento,
 * raios, sombras, movimento e camadas. Os demais CSS só usam estas variáveis.
 *
 * Tema: o script do <head> define html[data-theme="light"|"dark"] a partir da
 * escolha salva ou de prefers-color-scheme. Pares texto/fundo validados em AA.
 */

:root {
  color-scheme: light;

  /* Superfícies */
  --color-bg: #f3f6fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-sunken: #e9eef4;
  --color-overlay: rgb(10 18 32 / 0.5);

  /* Bordas: --color-border separa blocos; --color-border-strong contorna controles (3:1) */
  --color-border: #dae2eb;
  --color-border-strong: #7f90a4;

  /* Texto */
  --color-text: #111c2b;
  --color-text-muted: #4b5b6e;
  --color-text-subtle: #5f7085;
  --color-heading: #123b74;

  /* Marca: azul do logo. --color-accent é decorativo (ícones), nunca texto */
  --color-primary: #1666c4;
  --color-primary-hover: #13519d;
  --color-primary-soft: #eaf3fe;
  --color-primary-border: #b6d7fc;
  --color-primary-text: #13519d;
  --color-on-primary: #ffffff;
  --color-accent: #3f99f3;
  --color-brand-navy: #123b74;
  --color-brand-green: #8acc68;

  /* Estados */
  --color-success: #17834a;
  --color-success-soft: #e7f6ed;
  --color-success-border: #a8e2bf;
  --color-success-text: #116a3c;
  --color-warning: #b86e00;
  --color-warning-soft: #fff4dc;
  --color-warning-border: #f2d38f;
  --color-warning-text: #7a4700;
  --color-danger: #c42b2b;
  --color-danger-soft: #fdecec;
  --color-danger-border: #f4b4b4;
  --color-danger-text: #a32020;
  --color-on-status: #ffffff;

  /* Superfície invertida (menu lateral, destaques escuros) */
  --color-inverse: #123b74;
  --color-inverse-strong: #0c274d;
  --color-on-inverse: #ffffff;
  --color-on-inverse-muted: #c9d8ec;
  --color-inverse-overlay: rgb(255 255 255 / 0.1);
  --color-inverse-border: rgb(255 255 255 / 0.16);

  --color-focus: #1666c4;

  /* Tipografia */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Espaçamento em escala de 4px */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Raios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-color: 16 28 43;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.06);
  --shadow-md: 0 4px 12px rgb(var(--shadow-color) / 0.08);
  --shadow-lg: 0 12px 32px rgb(var(--shadow-color) / 0.12);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);

  /* Movimento */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Camadas */
  --z-raised: 1;
  --z-sticky: 100;
  --z-banner: 800;
  --z-overlay: 900;
  --z-sidebar: 1000;
  --z-menu-toggle: 1100;
  --z-modal: 1300;

  /* Layout */
  --sidebar-width: 280px;
  --content-max: 1280px;
  --touch-target: 44px;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0a1220;
  --color-surface: #111c2b;
  --color-surface-muted: #16233a;
  --color-surface-sunken: #0d1726;
  --color-overlay: rgb(2 6 14 / 0.7);

  --color-border: #26364c;
  --color-border-strong: #5a6d85;

  --color-text: #e8eef6;
  --color-text-muted: #a9b6c7;
  --color-text-subtle: #8b9bb0;
  --color-heading: #f1f6fc;

  --color-primary-hover: #1f78dd;
  --color-primary-soft: #13294a;
  --color-primary-border: #2b4f7e;
  --color-primary-text: #8cc2f9;
  --color-accent: #5aa9f6;

  --color-success-soft: #10301f;
  --color-success-border: #24573a;
  --color-success-text: #7ddba5;
  --color-warning-soft: #33260a;
  --color-warning-border: #6b5012;
  --color-warning-text: #f5c451;
  --color-danger-soft: #3a1418;
  --color-danger-border: #6e2a2f;
  --color-danger-text: #f6a3a3;

  --color-inverse: #0f1a2c;
  --color-inverse-strong: #0a1220;
  --color-on-inverse: #e8eef6;
  --color-on-inverse-muted: #a9b6c7;
  --color-inverse-overlay: rgb(255 255 255 / 0.06);
  --color-inverse-border: rgb(255 255 255 / 0.1);

  --color-focus: #5aa9f6;

  --shadow-color: 0 0 0;
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.3);
  --shadow-md: 0 4px 12px rgb(var(--shadow-color) / 0.35);
  --shadow-lg: 0 12px 32px rgb(var(--shadow-color) / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}