/* ============================================================
   Rhivo Clinic — Design System Tokens
   ============================================================
   Arquivo central de variáveis CSS customizadas.
   Define paleta, tipografia, espaçamento, sombras e suporte
   a light/dark mode via data-bs-theme.

   USO: <link rel="stylesheet" href="/assets/css/rhivo-design-tokens.css">
   ============================================================ */

/* ─── Google Fonts: Inter ────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── Design Tokens (Light Mode - default) ───────────────── */
:root {
  /* ▸ Paleta da Marca ─────────────────────────────────────── */
  --rhivo-navy:   #010A29;
  --rhivo-blue:   #0078C6;
  --rhivo-teal:   #009AC2;
  --rhivo-aqua:   #079FAD;
  --rhivo-ice:    #FAFAFA;
  --rhivo-slate:  #9B9DA8;

  /* Degradê principal */
  --rhivo-gradient: linear-gradient(135deg, #0078C6, #009AC2, #079FAD);

  /* ▸ Cores de Texto ──────────────────────────────────────── */
  --rhivo-text-primary:   #010A29;
  --rhivo-text-secondary: #9B9DA8;

  /* ▸ Cores de Fundo ──────────────────────────────────────── */
  --rhivo-bg:          #FAFAFA;
  --rhivo-surface:     #ffffff;
  --rhivo-bg-subtle:   #f0f1f3;

  /* ▸ Cores de Borda ──────────────────────────────────────── */
  --rhivo-border:      #e9ecef;

  /* ▸ Tipografia ──────────────────────────────────────────── */
  --rhivo-font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rhivo-font-mono:   'SF Mono', 'Fira Code', 'Fira Mono',
                       'Roboto Mono', monospace;

  --rhivo-text-h1:     2rem;
  --rhivo-text-h2:     1.5rem;
  --rhivo-text-h3:     1.25rem;
  --rhivo-text-body:   0.875rem;
  --rhivo-text-small:  0.75rem;

  /* ▸ Aliases de conveniência (compatibilidade) ─────────────── */
  --rhivo-text-xs:     0.7rem;
  --rhivo-text-sm:     0.75rem;
  --rhivo-text-base:   1rem;
  --rhivo-text-lg:     1.125rem;
  --rhivo-text-xl:     1.25rem;
  --rhivo-text-2xl:    1.5rem;
  --rhivo-text-3xl:    1.875rem;

  /* ▸ Espaçamento ─────────────────────────────────────────── */
  --rhivo-space-xs:    0.25rem;
  --rhivo-space-sm:    0.5rem;
  --rhivo-space-md:    1rem;
  --rhivo-space-lg:    1.5rem;
  --rhivo-space-xl:    2rem;

  /* ▸ Arredondamento ──────────────────────────────────────── */
  --rhivo-radius-sm:   4px;
  --rhivo-radius-md:   6px;
  --rhivo-radius-lg:   8px;

  /* ▸ Sombras ─────────────────────────────────────────────── */
  --rhivo-shadow-sm:   0 1px 3px rgba(1, 10, 41, 0.06);
  --rhivo-shadow-md:   0 4px 12px rgba(1, 10, 41, 0.08);
  --rhivo-shadow-lg:   0 8px 24px rgba(1, 10, 41, 0.12);

  /* ▸ Transições ──────────────────────────────────────────── */
  --rhivo-transition-fast:   0.15s ease-in-out;
  --rhivo-transition-normal: 0.2s ease-in-out;
  --rhivo-transition-slow:   0.3s ease-in-out;

  /* ▸ Cores Semânticas ────────────────────────────────────── */
  --rhivo-danger:       #d63939;
  --rhivo-danger-hover: #c0392b;
  --rhivo-success:      #22c55e;
  --rhivo-success-hover: #16a34a;
  --rhivo-warning:      #f59e0b;
  --rhivo-warning-hover: #d97706;
  --rhivo-blue-hover:   #0062a8;
}

/* ─── Dark Mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --rhivo-text-primary:   #e4e6f0;
  --rhivo-text-secondary: #7a7f99;

  --rhivo-bg:             #0a0e1a;
  --rhivo-surface:        #111625;
  --rhivo-bg-subtle:      #1a2035;

  --rhivo-border:         #1a2035;

  --rhivo-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.2);
  --rhivo-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.25);
  --rhivo-shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ─── Reset Global ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--rhivo-font-family);
  font-size: var(--rhivo-text-body);
  line-height: 1.5;
  color: var(--rhivo-text-primary);
  background-color: var(--rhivo-bg);
  margin: 0;
  transition:
    background-color var(--rhivo-transition-normal),
    color var(--rhivo-transition-normal);
}

/* ▸ Tipografia baseada em variáveis ──────────────────────── */
h1, .rhivo-h1 {
  font-size: var(--rhivo-text-h1);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--rhivo-space-md);
}

h2, .rhivo-h2 {
  font-size: var(--rhivo-text-h2);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--rhivo-space-sm);
}

h3, .rhivo-h3 {
  font-size: var(--rhivo-text-h3);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--rhivo-space-sm);
}

small, .rhivo-small {
  font-size: var(--rhivo-text-small);
  font-weight: 400;
}

/* ▸ Links ──────────────────────────────────────────────────── */
a {
  color: var(--rhivo-blue);
  text-decoration: none;
  transition: color var(--rhivo-transition-fast);
}

a:hover {
  color: #0062a8;
  text-decoration: underline;
}

/* ▸ Scrollbar customizada ────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--rhivo-slate);
  border-radius: var(--rhivo-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: #7a7f99;
}

/* ▸ Seleção de texto ─────────────────────────────────────── */
::selection {
  background: rgba(0, 120, 198, 0.2);
  color: var(--rhivo-text-primary);
}