/* ==========================================================================
   NO FIO DA NAVALHA — Design System v1.0 · Tokens
   Três camadas: primitivos → semânticos → componente.
   Origem de cada valor: [obs] observado em fiodanavalha.pt · [rsc] recurso
   da marca (logótipo, fotos) · [prop] proposta nova deste DS.
   Tema escuro é o principal; [data-theme="light"] ou .nfn-paper = "papel".
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..900&family=Fraunces:ital,opsz,wght@0,9..144,200..800;1,9..144,200..800&family=Inter:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Primitivos: carvão (preto quente) ---------- */
  --carbon-1000: #070706;  /* [prop] fundo de vídeo/foto */
  --carbon-950: #0d0d0d;   /* [obs] --color-bg do site */
  --carbon-900: #141312;   /* [obs] superfície 1 */
  --carbon-850: #1a1815;   /* [obs] superfície 2 */
  --carbon-800: #211f1b;   /* [prop] superfície 3 */
  --carbon-700: #2a2722;   /* [prop] hover em superfície */
  --carbon-600: #33302b;   /* [obs] borda forte */
  --carbon-500: #4a453e;   /* [prop] desativado */

  /* ---------- Primitivos: osso (papel/tinta) ---------- */
  --bone-0: #fffdf7;       /* [prop] cartão em papel */
  --bone-50: #f8f6f0;      /* [prop] fundo "papel" (Hagi's #F5F5F0 / Crisp #F5F4F1) */
  --bone-100: #f4f1ea;     /* [obs] --color-ink do site */
  --bone-200: #e8e3d8;     /* [prop] */
  --bone-300: #d4cdbf;     /* [prop] borda em papel */
  --bone-400: #a7a099;     /* [obs] texto secundário no escuro */
  --bone-500: #978d82;     /* [obs] texto atenuado (AA no escuro) */
  --bone-600: #6e665d;     /* [prop] texto atenuado no papel (AA sobre bone-50) */
  --bone-800: #3a352f;     /* [prop] */

  /* ---------- Primitivos: acentos ---------- */
  --gold-300: #dcc08f;     /* [prop] */
  --gold-500: #c9a063;     /* [obs] dourado da marca — cor de ação + logótipo */
  --gold-700: #8a6a3a;     /* [prop] dourado sobre papel (decorativo) */
  --coral-400: #e8928a;    /* [prop] */
  --coral-500: #e07a6c;    /* [obs] estado "Fechado" */
  --coral-700: #b24a3d;    /* [prop] erro sobre papel (AA) */
  --sage-400: #9cc3a5;     /* [prop] sucesso / "Aberto" */
  --sage-700: #3f7350;     /* [prop] sucesso sobre papel */
  --amber-400: #e2a26a;    /* [prop] aviso (laranja queimado, não dourado) */
  --amber-700: #9a5a22;    /* [prop] aviso sobre papel */
  --steel-400: #9db3c4;    /* [prop] informação */
  --steel-700: #44627a;    /* [prop] informação sobre papel */

  /* ---------- Tipografia ---------- */
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;  /* [prop] extendida, à Crisp */
  --font-serif: "Fraunces", "Playfair Display", Georgia, serif;     /* [obs] preços → [prop] voz ritual */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* [obs] */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* [prop] */

  --wdth-display: 125;     /* largura máxima do Archivo */
  --wdth-condensed: 72;

  /* escala fluida (min 375px → max 1440px) */
  --text-mega: clamp(3.25rem, 1.2rem + 9.2vw, 9.5rem);  /* títulos de capa */
  --text-d1: clamp(2.5rem, 1.4rem + 5vw, 6rem);
  --text-d2: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --text-h1: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --text-h2: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --text-h3: 1.25rem;
  --text-lg: 1.125rem;
  --text-md: 1rem;
  --text-sm: .875rem;
  --text-xs: .75rem;
  --text-2xs: .6875rem;   /* rótulos em maiúsculas [obs ≈11,2px] */

  --leading-tight: 0.92;
  --leading-snug: 1.15;
  --leading-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-label: 0.16em;  /* [obs] ≈2px em 11–12px */
  --tracking-wide: 0.08em;

  /* ---------- Espaço (base 4) ---------- */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --gutter: clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 9rem);
  --container: 1320px;

  /* ---------- Raios (concêntricos: exterior = interior + padding) ---------- */
  --radius-0: 0;          /* editorial: fotos de capa, tabela de preços, CTA "bloco" */
  --radius-xs: 6px;
  --radius-sm: 10px;      /* [obs] botões de ícone do cabeçalho */
  --radius-md: 16px;
  --radius-lg: 24px;      /* [obs 22px] cartões */
  --radius-xl: 32px;      /* contentores grandes, modais */
  --radius-pill: 999px;   /* [obs] */

  /* ---------- Linhas ---------- */
  --hairline: 1px;
  --rule: 1px;

  /* ---------- Movimento (Emil Kowalski) ---------- */
  --motion-scale: 1;  /* catálogo: 10 = lento ×10 */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --dur-1: calc(100ms * var(--motion-scale));  /* press, cor */
  --dur-2: calc(160ms * var(--motion-scale));  /* hover, tooltip */
  --dur-3: calc(220ms * var(--motion-scale));  /* popover, dropdown */
  --dur-4: calc(320ms * var(--motion-scale));  /* modal, toast */
  --dur-5: calc(450ms * var(--motion-scale));  /* drawer, página */
  --dur-6: calc(800ms * var(--motion-scale));  /* revelações editoriais */
  --press-scale: .97;

  /* ---------- Camadas ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 90;
  --z-dropdown: 200;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ==========================================================================
     Semânticos — tema escuro (principal)
     ========================================================================== */
  color-scheme: dark;
  --bg: var(--carbon-950);
  --bg-sunken: var(--carbon-1000);
  --surface-1: var(--carbon-900);
  --surface-2: var(--carbon-850);
  --surface-3: var(--carbon-800);
  --surface-hover: var(--carbon-700);
  --surface-inverse: var(--bone-100);

  --text: var(--bone-100);
  --text-2: var(--bone-400);
  --text-3: var(--bone-500);
  --text-inverse: var(--carbon-950);
  --text-disabled: var(--carbon-500);

  --border: rgba(244, 241, 234, .12);
  --border-strong: rgba(244, 241, 234, .24);
  --border-subtle: rgba(244, 241, 234, .06);
  --grid-line: rgba(244, 241, 234, .05);

  /* Ação: dourado do logótipo (decidido 2026-10-02, opção b). Seleção e foco ficam a tinta/osso. */
  --action: var(--gold-500);
  --action-hover: var(--gold-300);
  --action-text: var(--carbon-950);
  --action-2: transparent;
  --action-2-text: var(--gold-500);
  --action-2-border: rgba(201, 160, 99, .5);
  --action-2-hover: rgba(201, 160, 99, .1);
  --selected: var(--bone-100);
  --selected-text: var(--carbon-950);
  --focus: var(--bone-100);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* Decorativo */
  --ornament: var(--gold-500);
  --ornament-soft: rgba(201, 160, 99, .28);

  /* Feedback */
  --danger: var(--coral-500);
  --danger-bg: rgba(224, 122, 108, .12);
  --danger-border: rgba(224, 122, 108, .35);
  --danger-solid: #c4574a;
  --success: var(--sage-400);
  --success-bg: rgba(156, 195, 165, .12);
  --success-border: rgba(156, 195, 165, .32);
  --warning: var(--amber-400);
  --warning-bg: rgba(226, 162, 106, .12);
  --warning-border: rgba(226, 162, 106, .32);
  --info: var(--steel-400);
  --info-bg: rgba(157, 179, 196, .12);
  --info-border: rgba(157, 179, 196, .32);

  /* Elevação no escuro: luz de aresta + sombra profunda */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-1: var(--edge-light), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: var(--edge-light), 0 8px 24px -8px rgba(0, 0, 0, .6);
  --shadow-3: var(--edge-light), 0 24px 64px -16px rgba(0, 0, 0, .75);
  --shadow-pop: 0 0 0 1px var(--border), 0 16px 40px -12px rgba(0, 0, 0, .7);

  /* Materiais */
  --glass-bg: rgba(20, 19, 18, .55);
  --glass-bg-strong: rgba(20, 19, 18, .78);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --glass-blur: blur(22px) saturate(140%);
  --veil-bottom: linear-gradient(180deg, rgba(13,13,13,0) 35%, rgba(13,13,13,.55) 65%, rgba(13,13,13,.95) 100%);
  --veil-side: linear-gradient(90deg, rgba(13,13,13,.92) 0%, rgba(13,13,13,.55) 45%, rgba(13,13,13,0) 75%);
  --dots: radial-gradient(circle at center, rgba(244,241,234,.55) 0 .6px, transparent 1.1px);
  --dots-size: 4px 4px;
  --photo-filter: grayscale(1) contrast(1.08) brightness(.92);
  --photo-warm: sepia(.18) grayscale(.75) contrast(1.06);
}

/* ==========================================================================
   Semânticos — tema "papel" (osso claro), à Hagi's/Crisp
   ========================================================================== */
[data-theme="light"],
.nfn-paper {
  color-scheme: light;
  --bg: var(--bone-50);
  --bg-sunken: var(--bone-200);
  --surface-1: var(--bone-0);
  --surface-2: #f1ede4;
  --surface-3: var(--bone-200);
  --surface-hover: #ebe6db;
  --surface-inverse: var(--carbon-950);

  --text: #151413;          /* Hagi's #151515 / Crisp #0A090C */
  --text-2: #4b453e;
  --text-3: var(--bone-600);
  --text-inverse: var(--bone-100);
  --text-disabled: #b3ab9f;

  --border: rgba(21, 20, 19, .14);
  --border-strong: rgba(21, 20, 19, .32);
  --border-subtle: rgba(21, 20, 19, .07);
  --grid-line: rgba(21, 20, 19, .06);

  --action: var(--gold-500);
  --action-hover: #b98f52;
  --action-text: var(--carbon-950);
  --action-2-text: var(--gold-700);
  --action-2-border: rgba(138, 106, 58, .45);
  --action-2-hover: rgba(138, 106, 58, .08);
  --selected: #151413;
  --selected-text: var(--bone-100);
  --focus: #151413;

  --ornament: var(--gold-700);
  --ornament-soft: rgba(138, 106, 58, .25);

  --danger: var(--coral-700);
  --danger-bg: rgba(178, 74, 61, .08);
  --danger-border: rgba(178, 74, 61, .3);
  --danger-solid: #b24a3d;
  --success: var(--sage-700);
  --success-bg: rgba(63, 115, 80, .09);
  --success-border: rgba(63, 115, 80, .3);
  --warning: var(--amber-700);
  --warning-bg: rgba(154, 90, 34, .09);
  --warning-border: rgba(154, 90, 34, .3);
  --info: var(--steel-700);
  --info-bg: rgba(68, 98, 122, .09);
  --info-border: rgba(68, 98, 122, .3);

  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .7);
  --shadow-1: 0 1px 2px rgba(21, 20, 19, .06);
  --shadow-2: 0 10px 28px -12px rgba(21, 20, 19, .22);
  --shadow-3: 0 28px 64px -20px rgba(21, 20, 19, .3);
  --shadow-pop: 0 0 0 1px var(--border), 0 18px 40px -14px rgba(21, 20, 19, .28);

  --glass-bg: rgba(255, 253, 247, .6);
  --glass-bg-strong: rgba(255, 253, 247, .82);
  --glass-border: rgba(21, 20, 19, .1);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .9);
  --dots: radial-gradient(circle at center, rgba(21,20,19,.5) 0 .6px, transparent 1.1px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 1; }
}
:root[data-motion="slow"] { --motion-scale: 10; }