/* =====================================================================
   Design system HIC — tokens  (v1.0)
   Uma identidade para web e mobile: paleta pastel quente (claro e escuro)
   + vidro translúcido sobre um fundo vivo + tipografia Archivo / Source Sans 3.
   Docs: conhecimento/design-system/README.md

   Fontes (coloque no <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..100,500..800&family=Source+Sans+3:wght@400;600&display=swap">

   Tema: segue o sistema até a pessoa escolher; a escolha vai em
   <html data-theme="light|dark"> (salva em localStorage).
   Token novo de cor: declare nos TRÊS blocos (claro, escuro pelo sistema, escuro forçado).
   ===================================================================== */

:root {
  /* ---------- 1. Paleta (claro) ---------- */
  --sand: #EDE4D6;        /* fundo */
  --cream: #F8F3EA;       /* painel */
  --parchment: #EFE6D3;   /* caixa interna */
  --linen: #E0D3C0;       /* linha opaca */
  --cocoa: #3E3228;       /* texto */
  --taupe: #7D6C5C;       /* texto secundário */
  --umber: #5C4033;       /* cor de marca / ação */
  --umber-soft: #E6D8C6;
  --clay: #CDB89D;        /* barra secundária */
  --wheat: #C9A979;       /* atenção */
  --wheat-soft: #E6D3A3;
  --wheat-ink: #4A3A16;
  --olive: #71845A;       /* bom */
  --rust: #9C4F2E;        /* ruim / erro */
  /* paleta de dados, intercalada para fatias vizinhas se distinguirem */
  --p0: #3E3228; --p1: #C9A979; --p2: #71845A; --p3: #CDC8C2; --p4: #5E5852;
  --p5: #A9B693; --p6: #8E5F44; --p7: #948D85; --p8: #A67C5B;

  /* fundo vivo: gradiente + 3 luzes ambientes (o vidro só "aparece" com algo por trás) */
  --bg-gradient: linear-gradient(165deg, #F3ECE0 0%, #EDE4D6 45%, #E2D3BE 100%);
  /* no claro, as luzes precisam ser mais fortes: vidro bege sobre fundo bege some */
  --ambient-1: rgba(205, 160, 98, .55);   /* trigo, canto superior esquerdo */
  --ambient-2: rgba(113, 132, 90, .32);   /* oliva, esquerda embaixo (passa por trás da sidebar) */
  --ambient-3: rgba(166, 112, 76, .36);   /* argila, base */
  --ambient-4: rgba(201, 119, 95, .22);   /* terracota, direita */
  /* reflexo diagonal do vidro: é o que faz o vidro "ler" como vidro sobre fundo claro */
  --glass-sheen: linear-gradient(155deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .14) 35%, rgba(255, 255, 255, 0) 65%);

  /* ---------- 2. Papéis (o que os componentes usam) ---------- */
  --bg: var(--sand);
  --surface: rgba(248, 243, 234, .62);        /* vidro de cartão */
  --surface-solid: var(--cream);              /* sem transparência (fallback, impressão) */
  --surface-2: rgba(239, 230, 211, .72);      /* caixa dentro de cartão, segmentado */
  --surface-float: rgba(248, 243, 234, .80);  /* dock, folha, janela */
  --surface-nav: rgba(255, 251, 245, .28);    /* sidebar: vidro mais aberto e mais branco que o fundo */
  --field: rgba(237, 228, 214, .85);          /* campo "afundado" */
  --line: rgba(255, 255, 255, .70);           /* borda de vidro (reflexo) */
  --line-strong: var(--linen);                /* borda opaca: campos, botões */
  --sep: rgba(62, 50, 40, .10);               /* separador entre linhas */
  --track: rgba(62, 50, 40, .10);             /* trilho de barra e medidor */
  --ink: var(--cocoa);
  --ink-2: var(--taupe);
  --primary: var(--umber);
  --on-primary: var(--cream);
  --primary-soft: rgba(92, 64, 51, .10);
  --primary-hover: color-mix(in srgb, var(--umber) 85%, var(--cocoa));
  --link: var(--umber);
  --focus: var(--umber);
  --positive: var(--olive);
  --positive-soft: rgba(113, 132, 90, .18);
  --on-positive: var(--cream);
  --warning: var(--wheat);
  --warning-soft: rgba(201, 169, 121, .30);
  --on-warning: var(--wheat-ink);
  --danger: var(--rust);
  --danger-soft: rgba(156, 79, 46, .14);
  --danger-text: var(--rust);
  --on-danger: var(--cream);
  --tooltip-bg: var(--cocoa);
  --tooltip-ink: var(--cream);
  --data-1: var(--umber); --data-2: var(--clay); --data-3: var(--p2); --data-4: var(--p1);
  --data-5: var(--p6); --data-6: var(--p5); --data-7: var(--p4); --data-8: var(--p8);

  /* ---------- vidro ---------- */
  --blur: blur(20px) saturate(140%);
  --blur-strong: blur(32px) saturate(170%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .75);

  /* ---------- tipografia ---------- */
  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --stretch-num: 78%;
  --stretch-title: 85%;
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 22px; --fs-2xl: 30px; --fs-title: 32px; --fs-hero: 52px;

  /* ---------- espaço, forma, sombra ---------- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 18px; --space-6: 22px; --space-7: 26px;
  --radius-xs: 4px; --radius-sm: 8px; --radius: 12px; --radius-card: 18px; --radius-sheet: 22px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(62, 50, 40, .04), 0 6px 20px rgba(62, 50, 40, .05);
  --shadow-float: 0 8px 30px rgba(62, 50, 40, .16);
  --shadow-dialog: 0 18px 50px rgba(30, 25, 20, .28);
  --backdrop: rgba(30, 25, 20, .35);

  /* ---------- layout ---------- */
  --page-max: 1520px;
  --app-max: 430px;   /* coluna de app no celular */
  --sidebar-w: 240px;
  --sidebar-w-min: 72px; /* recolhida: só ícones */
  --gutter: 20px;
  --touch: 44px;
  --sab: env(safe-area-inset-bottom, 0px);

  /* ---------- movimento ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: .15s; --t: .25s; --t-slow: .6s;

  color-scheme: light;
}

/* Celular: corpo 16px (evita zoom do iOS), margens menores, títulos e herói menores */
@media (max-width: 720px) {
  :root { --gutter: 16px; --fs-md: 16px; --fs-title: 30px; --fs-hero: 44px; }
}

/* ---------- Escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #1E1914; --cream: #2A231C; --parchment: #332B22; --linen: #3D3429;
    --cocoa: #EDE3D3; --taupe: #A99A87;
    --umber: #A88468; --umber-soft: #3F3226;
    --clay: #6E5D4A; --wheat: #C9A97E; --wheat-soft: #C9B07A; --wheat-ink: #E0CBA8;
    --olive: #A3B585; --rust: #E39A72;
    --p0: #EDE3D3; --p1: #7A6A58; --p2: #A3B585; --p3: #C9A97E; --p4: #5B6E48;
    --p5: #B8B0A6; --p6: #8C5E44; --p7: #E0CBA8; --p8: #77736E;
    --bg-gradient: linear-gradient(165deg, #261F18 0%, #1E1914 50%, #16110D 100%);
    --ambient-1: rgba(168, 132, 104, .26);
    --ambient-2: rgba(163, 181, 133, .10);
    --ambient-3: rgba(201, 169, 126, .14);
    --ambient-4: rgba(140, 94, 68, .16);
    --glass-sheen: linear-gradient(155deg, rgba(237, 227, 211, .07) 0%, rgba(237, 227, 211, 0) 50%);
    --surface: rgba(42, 35, 28, .58);
    --surface-2: rgba(51, 43, 34, .65);
    --surface-float: rgba(32, 26, 21, .78);
    --surface-nav: rgba(32, 26, 21, .40);
    --field: rgba(30, 25, 20, .70);
    --line: rgba(237, 227, 211, .10);
    --sep: rgba(237, 227, 211, .08);
    --track: rgba(237, 227, 211, .12);
    --primary-soft: rgba(168, 132, 104, .18);
    --on-primary: #1E1914; --on-positive: #1E1914; --on-danger: #1E1914;
    --positive-soft: rgba(163, 181, 133, .16);
    --warning-soft: rgba(201, 169, 126, .18);
    --danger-soft: rgba(227, 154, 114, .16);
    --glass-highlight: inset 0 1px 0 rgba(237, 227, 211, .06);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 20px rgba(0, 0, 0, .18);
    --shadow-float: 0 8px 30px rgba(0, 0, 0, .40);
    --shadow-dialog: 0 18px 50px rgba(0, 0, 0, .5);
    --backdrop: rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sand: #1E1914; --cream: #2A231C; --parchment: #332B22; --linen: #3D3429;
  --cocoa: #EDE3D3; --taupe: #A99A87;
  --umber: #A88468; --umber-soft: #3F3226;
  --clay: #6E5D4A; --wheat: #C9A97E; --wheat-soft: #C9B07A; --wheat-ink: #E0CBA8;
  --olive: #A3B585; --rust: #E39A72;
  --p0: #EDE3D3; --p1: #7A6A58; --p2: #A3B585; --p3: #C9A97E; --p4: #5B6E48;
  --p5: #B8B0A6; --p6: #8C5E44; --p7: #E0CBA8; --p8: #77736E;
  --bg-gradient: linear-gradient(165deg, #261F18 0%, #1E1914 50%, #16110D 100%);
  --ambient-1: rgba(168, 132, 104, .26);
  --ambient-2: rgba(163, 181, 133, .10);
  --ambient-3: rgba(201, 169, 126, .14);
  --ambient-4: rgba(140, 94, 68, .16);
  --glass-sheen: linear-gradient(155deg, rgba(237, 227, 211, .07) 0%, rgba(237, 227, 211, 0) 50%);
  --surface: rgba(42, 35, 28, .58);
  --surface-2: rgba(51, 43, 34, .65);
  --surface-float: rgba(32, 26, 21, .78);
  --surface-nav: rgba(32, 26, 21, .40);
  --field: rgba(30, 25, 20, .70);
  --line: rgba(237, 227, 211, .10);
  --sep: rgba(237, 227, 211, .08);
  --track: rgba(237, 227, 211, .12);
  --primary-soft: rgba(168, 132, 104, .18);
  --on-primary: #1E1914; --on-positive: #1E1914; --on-danger: #1E1914;
  --positive-soft: rgba(163, 181, 133, .16);
  --warning-soft: rgba(201, 169, 126, .18);
  --danger-soft: rgba(227, 154, 114, .16);
  --glass-highlight: inset 0 1px 0 rgba(237, 227, 211, .06);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .2), 0 6px 20px rgba(0, 0, 0, .18);
  --shadow-float: 0 8px 30px rgba(0, 0, 0, .40);
  --shadow-dialog: 0 18px 50px rgba(0, 0, 0, .5);
  --backdrop: rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Sem suporte a desfoque, ou pessoa pediu menos transparência: vidro vira painel opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --surface: var(--cream); --surface-2: var(--parchment); --surface-float: var(--cream); --surface-nav: var(--cream); --line: var(--linen); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --surface: var(--cream); --surface-2: var(--parchment); --surface-float: var(--cream); --surface-nav: var(--cream); --line: var(--linen);
    --ambient-1: transparent; --ambient-2: transparent; --ambient-3: transparent; --ambient-4: transparent;
    --glass-sheen: linear-gradient(transparent, transparent); }
}