/* ==========================================================================
   Assessoria Estética — Colors & Type
   ==========================================================================
   Imports from Fontshare (hosted by Indian Type Foundry).
   If local font files are preferred, drop .woff2 into /fonts and replace the
   @import with @font-face rules.
   ========================================================================== */

/* ==========================================================================
   Poppins — Local @font-face (vendored)
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

/* Inter fallback from Google Fonts (no local files provided) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Inter — Local @font-face (vendored)
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Thin-BETA.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-ThinItalic-BETA.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-ExtraLight-BETA.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-ExtraLightItalic-BETA.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Light-BETA.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-LightItalic-BETA.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-ExtraBoldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

:root {
  /* ---------- Brand palette ---------- */
  --brand-violet:       #400DA6;   /* primary accent — the only non-neutral */
  --brand-violet-700:   #33088A;   /* press / deep */
  --brand-violet-500:   #5B2DC4;   /* hover */
  --brand-violet-300:   #8F6BE0;   /* supporting */
  --brand-violet-100:   #E5DCF8;   /* tint surface */
  --brand-violet-50:    #F4EFFE;   /* whisper surface */

  /* ---------- Neutrals (warm-cool balanced) ---------- */
  --ink-000:            #000000;
  --ink-900:            #0B0B0E;
  --ink-800:            #1A1A1F;
  --ink-700:            #2B2B33;
  --ink-600:            #4A4A55;
  --ink-500:            #6B6B78;
  --ink-400:            #9A9AA6;
  --ink-300:            #C6C6CE;
  --ink-200:            #E4E4E8;
  --ink-100:            #F1F1F3;
  --ink-050:            #F8F8F9;
  --ink-white:          #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --bg-canvas:          var(--ink-white);
  --bg-subtle:          var(--ink-050);
  --bg-raised:          var(--ink-white);
  --bg-inverse:         var(--ink-900);
  --bg-accent:          var(--brand-violet);
  --bg-accent-soft:     var(--brand-violet-50);

  /* ---------- Semantic foreground ---------- */
  --fg-primary:         var(--ink-900);
  --fg-secondary:       var(--ink-600);
  --fg-tertiary:        var(--ink-500);
  --fg-muted:           var(--ink-400);
  --fg-on-accent:       var(--ink-white);
  --fg-on-inverse:      var(--ink-white);
  --fg-accent:          var(--brand-violet);

  /* ---------- Borders ---------- */
  --border-subtle:      var(--ink-200);
  --border-default:     var(--ink-300);
  --border-strong:      var(--ink-700);
  --border-accent:      var(--brand-violet);

  /* ---------- Status ---------- */
  --status-success:     #1F8F5C;
  --status-warning:     #C78A1F;
  --status-danger:      #B5341F;
  --status-info:        var(--brand-violet);

  /* ---------- Type families ---------- */
  --font-display:       "Poppins", system-ui, sans-serif;
  --font-body:          "Inter", system-ui, sans-serif;
  --font-mono:          ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (fluid but stable) ---------- */
  --fs-display-xl: 72px;    --lh-display-xl: 1.02;   --ls-display-xl: -0.02em;
  --fs-display-lg: 56px;    --lh-display-lg: 1.04;   --ls-display-lg: -0.02em;
  --fs-display-md: 44px;    --lh-display-md: 1.08;   --ls-display-md: -0.015em;
  --fs-h1:         36px;    --lh-h1:         1.12;   --ls-h1:         -0.015em;
  --fs-h2:         28px;    --lh-h2:         1.2;    --ls-h2:         -0.01em;
  --fs-h3:         22px;    --lh-h3:         1.28;   --ls-h3:         -0.005em;
  --fs-h4:         18px;    --lh-h4:         1.35;   --ls-h4:          0em;
  --fs-body-lg:    18px;    --lh-body-lg:    1.55;
  --fs-body:       16px;    --lh-body:       1.6;
  --fs-body-sm:    14px;    --lh-body-sm:    1.55;
  --fs-caption:    12px;    --lh-caption:    1.45;   --ls-caption:     0.02em;
  --fs-eyebrow:    12px;    --lh-eyebrow:    1.2;    --ls-eyebrow:     0.16em;

  /* ---------- Spacing (4pt base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* ---------- Shadows (soft, editorial) ---------- */
  --shadow-xs:   0 1px 2px rgba(11,11,14,0.04);
  --shadow-sm:   0 2px 6px rgba(11,11,14,0.06), 0 1px 2px rgba(11,11,14,0.04);
  --shadow-md:   0 8px 24px rgba(11,11,14,0.08), 0 2px 6px rgba(11,11,14,0.04);
  --shadow-lg:   0 24px 60px rgba(11,11,14,0.12), 0 8px 20px rgba(11,11,14,0.06);
  --shadow-accent: 0 12px 32px rgba(64,13,166,0.28);

  /* ---------- Motion ---------- */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis:  cubic-bezier(0.3, 0, 0, 1);
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       360ms;
}

/* ==========================================================================
   Base element styles (semantic defaults — override per layout)
   ========================================================================== */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

p  { margin: 0 0 var(--space-4); color: var(--fg-secondary); }

.display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }
.display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--ls-display-lg); }
.display-md { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-md); line-height: var(--lh-display-md); letter-spacing: var(--ls-display-md); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  color: var(--fg-tertiary);
}

code, pre { font-family: var(--font-mono); font-size: 0.92em; }