/* ============================================================
   NUNN&SANDER DESIGN SYSTEM
   Versão 1.1 — Filosofia: Praxeologia aplicada ao design visual
   Arquétipo: O Explorador Sábio
   Tipografia: Playfair Display · Archivo · Archivo Expanded · Chivo Mono
   ============================================================ */

/* ============================================================
   1. COLOR PRIMITIVES — A Matéria-Prima
   ============================================================ */
:root {

   /* --- THE STONE SCALE — Neutros & Pedras --- */
   --stone-50: #fafaf9;
   --stone-100: #f5f5f4;
   --stone-200: #e7e5e4;
   --stone-300: #d6d3d1;
   --stone-400: #a8a29e;
   --stone-500: #78716c;
   --stone-600: #57534e;
   --stone-700: #44403c;
   --stone-800: #292524;
   --stone-900: #1c1917;
   --stone-950: #0c0a09;

   /* --- THE METAL SCALE — Metais & Nobres --- */
   --gold-300: #d97706;
   --gold-400: #c46a0a;
   --gold-500: #b45309;
   --gold-600: #92400e;
   --gold-700: #78350f;
   --copper: #B48E55;
   --copper-dark: #8a6a38;
   --iron: #6b7280;

   /* --- THE SEA SCALE — Abissal --- */
   --blue-800: #1e3a5f;
   --blue-900: #0F1E32;
   --blue-950: #080f1a;

   /* --- THE PAPER SCALE — Papel & Pergaminho --- */
   --paper: #FDFBF7;
   --paper-dark: #F5F2EA;
   --paper-aged: #EDE8DC;
   --text-gray: #4A4A4A;

   /* ============================================================
     2. SEMANTIC TOKENS — Cores com Propósito
     Regra: Na prática, use SEMPRE os tokens semânticos.
     Nunca referencie primitivas diretamente no código de componentes.
     ============================================================ */

   /* --- SURFACES (Fundos) --- */
   --bg-primary: var(--paper);
   --bg-secondary: var(--paper-dark);
   --bg-tertiary: var(--paper-aged);
   --bg-inverse: var(--stone-900);
   --bg-inverse-alt: var(--blue-900);
   --bg-inverse-hover: var(--stone-800);
   --bg-overlay: rgba(28, 25, 23, 0.72);

   /* --- TYPOGRAPHY (Textos) --- */
   --text-primary: var(--stone-900);
   --text-secondary: var(--text-gray);
   --text-tertiary: var(--stone-500);
   --text-inverse: var(--paper);
   --text-inverse-muted: var(--stone-400);
   --text-accent: var(--gold-500);
   --text-authority: var(--blue-900);
   --text-link: var(--gold-500);
   --text-link-hover: var(--gold-600);

   /* --- ACCENTS (Ação & Destaque) --- */
   --accent-primary: var(--gold-500);
   --accent-primary-hover: var(--gold-600);
   --accent-primary-muted: rgba(180, 83, 9, 0.15);
   --accent-secondary: var(--blue-900);
   --accent-copper: var(--copper);

   /* --- BORDERS (Bordas & Divisores) --- */
   --border-subtle: var(--stone-200);
   --border-medium: var(--stone-300);
   --border-strong: var(--gold-500);
   --border-inverse: var(--stone-700);
   --border-focus: var(--gold-400);

   /* --- FEEDBACK (Estados de Sistema) --- */
   --state-success: #15803d;
   --state-success-bg: #f0fdf4;
   --state-warning: var(--gold-500);
   --state-warning-bg: #fff7ed;
   --state-error: #b91c1c;
   --state-error-bg: #fef2f2;
   --state-info: var(--blue-900);
   --state-info-bg: #eff6ff;
   --state-disabled-bg: var(--stone-100);
   --state-disabled-text: var(--stone-400);

   /* ============================================================
     3. TYPOGRAPHY — A Voz
     ============================================================ */

   /* Famílias */
   --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
   --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
   --font-expanded: 'Archivo Expanded', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
   --font-mono: 'Chivo Mono', 'Courier New', Courier, monospace;

   /* Escala Tipográfica — Ratio 1.250 (Major Third) */
   --text-xs: 0.64rem;
   /* 10.24px — Notas de rodapé, labels mínimos */
   --text-sm: 0.8rem;
   /* 12.8px  — Legendas, tags */
   --text-base: 1rem;
   /* 16px    — Corpo principal */
   --text-md: 1.25rem;
   /* 20px    — Lead, intro */
   --text-lg: 1.563rem;
   /* 25px    — H4 / subseções */
   --text-xl: 1.953rem;
   /* 31px    — H3 */
   --text-2xl: 2.441rem;
   /* 39px    — H2 */
   --text-3xl: 3.052rem;
   /* 49px    — H1 */
   --text-4xl: 3.815rem;
   /* 61px    — Display / Hero */
   --text-5xl: 4.768rem;
   /* 76px    — Display XL */

   /* Pesos */
   --weight-light: 300;
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;
   --weight-bold: 700;
   --weight-black: 900;

   /* Line-heights */
   --leading-tight: 1.15;
   --leading-snug: 1.3;
   --leading-normal: 1.5;
   --leading-relaxed: 1.7;
   --leading-loose: 1.9;

   /* Letter-spacings */
   --tracking-tight: -0.03em;
   --tracking-normal: 0em;
   --tracking-wide: 0.05em;
   --tracking-wider: 0.08em;
   --tracking-widest: 0.15em;

   /* ============================================================
     4. SPACING — A Proporção
     Base 8px (regra do Grid de 8)
     ============================================================ */
   --space-1: 0.25rem;
   /*  4px */
   --space-2: 0.5rem;
   /*  8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-32: 8rem;
   /* 128px */

   /* ============================================================
     5. BORDER RADIUS — A Forma
     ============================================================ */
   --radius-none: 0px;
   --radius-sm: 2px;
   /* Quase reto — cantoneira de baú */
   --radius-base: 4px;
   /* Padrão institucional */
   --radius-md: 6px;
   --radius-lg: 8px;
   --radius-xl: 12px;
   --radius-full: 9999px;
   /* Badges e pills */

   /* ============================================================
     6. SHADOWS — A Elevação
     ============================================================ */
   --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.08);
   --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.12), 0 1px 2px rgba(28, 25, 23, 0.08);
   --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.10), 0 2px 4px rgba(28, 25, 23, 0.08);
   --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.12), 0 4px 6px rgba(28, 25, 23, 0.08);
   --shadow-xl: 0 20px 25px rgba(28, 25, 23, 0.15), 0 8px 10px rgba(28, 25, 23, 0.08);
   --shadow-inner: inset 0 2px 4px rgba(28, 25, 23, 0.08);
   --shadow-gold: 0 4px 14px rgba(180, 83, 9, 0.25);

   /* ============================================================
     7. MOTION — O Tempo
     ============================================================ */
   --duration-instant: 50ms;
   --duration-fast: 150ms;
   --duration-base: 250ms;
   --duration-slow: 400ms;
   --duration-slower: 600ms;
   --duration-slowest: 900ms;

   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);

   /* ============================================================
     8. Z-INDEX — A Estratificação
     ============================================================ */
   --z-below: -1;
   --z-base: 0;
   --z-raised: 10;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-overlay: 300;
   --z-modal: 400;
   --z-toast: 500;
   --z-tooltip: 600;
}

/* ============================================================
   BASE RESET & GLOBALS
   ============================================================ */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   background-color: var(--bg-primary);
   color: var(--text-primary);
   font-family: var(--font-sans);
   font-weight: var(--weight-light);
   line-height: var(--leading-relaxed);
   font-size: var(--text-base);
   /* Ruído do papel — retira o aspecto "plástico" das telas */
   position: relative;
}

body::before {
   content: '';
   position: fixed;
   inset: 0;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
   opacity: 0.04;
   pointer-events: none;
   z-index: var(--z-overlay);
   mix-blend-mode: multiply;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-serif);
   font-weight: var(--weight-bold);
   line-height: var(--leading-tight);
   color: var(--text-authority);
}

::selection {
   background: var(--accent-primary);
   color: var(--text-inverse);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
   font-family: var(--font-expanded);
   font-size: var(--text-xs);
   font-weight: var(--weight-semibold);
   letter-spacing: var(--tracking-wider);
   text-transform: uppercase;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-3) var(--space-6);
   border-radius: var(--radius-sm);
   border: 1px solid transparent;
   cursor: pointer;
   transition: all var(--duration-base) var(--ease-standard);
   line-height: 1;
}

.btn-primary {
   background: var(--accent-primary);
   color: var(--text-inverse);
   border-color: var(--accent-primary);
   box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
   background: var(--accent-primary-hover);
   border-color: var(--accent-primary-hover);
   box-shadow: var(--shadow-gold);
   transform: translateY(-1px);
}

.btn-secondary {
   background: transparent;
   color: var(--accent-primary);
   border-color: var(--accent-primary);
}

.btn-secondary:hover {
   background: var(--accent-primary-muted);
}

.btn-ghost {
   background: transparent;
   color: var(--text-secondary);
   border-color: var(--border-medium);
}

.btn-ghost:hover {
   background: var(--bg-secondary);
   color: var(--text-primary);
   border-color: var(--border-strong);
}

.btn-inverse {
   background: var(--bg-inverse);
   color: var(--text-inverse);
   border-color: var(--bg-inverse);
}

.btn-inverse:hover {
   background: var(--bg-inverse-hover);
}

.btn-sm {
   padding: var(--space-2) var(--space-4);
   font-size: var(--text-xs);
}

.btn-lg {
   padding: var(--space-4) var(--space-10);
   font-size: var(--text-base);
}

/* ============================================================
   CALLOUTS / NOTICES
   ============================================================ */
.callout {
   display: flex;
   gap: var(--space-4);
   padding: var(--space-4) var(--space-5);
   border-radius: var(--radius-base);
   border-left: 4px solid var(--border-subtle);
   background: var(--bg-secondary);
   color: var(--text-primary);
   margin: var(--space-6) 0;
   font-family: var(--font-sans);
   font-size: var(--text-sm);
   line-height: var(--leading-relaxed);
}

.callout p {
   margin: 0;
}

.callout-info {
   background: var(--state-info-bg);
   border-left-color: var(--state-info);
   color: var(--blue-900);
}

.callout-warning {
   background: var(--state-warning-bg);
   border-left-color: var(--state-warning);
   color: var(--gold-700);
}