/* ============================================================
   ALVERAMANA — Colors & Type
   Outsourcing Comercial
   ============================================================ */

/* --- Webfont imports ----------------------------------------
   Brand fonts (real files supplied):
   - Display: ROCKETWILDNESS  →  fonts/ROCKET_WILDNESS.ttf
   - Body: Open Sans Italic (variable wdth+wght) →
     fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf
   Open Sans (upright/regular) is also pulled from Google Fonts
   for non-italic UI labels.
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Rocketwildness';
  src: url('../fonts/ROCKET_WILDNESS.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('../fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  --brand-green: #59B890;       /* primary — apex / signature */
  --brand-green-700: #3F9A75;   /* hover / pressed */
  --brand-green-300: #9BD4BA;   /* tints, accents */
  --brand-green-100: #E4F3EC;   /* surfaces, backgrounds */

  --brand-ink: #1D1D1B;         /* almost-black, headlines */
  --brand-ink-700: #3A3A37;
  --brand-ink-500: #6B6B68;
  --brand-ink-300: #B5B5B2;
  --brand-ink-100: #E6E6E3;

  /* Surfaces — warm off-white (the "fondo blanco claro") */
  --bg-base:    #F8F7F4;        /* page background */
  --bg-surface: #FFFFFF;        /* cards, panels */
  --bg-muted:   #F1F0EC;        /* alt rows, subtle fills */

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --fg-1: var(--brand-ink);          /* primary text */
  --fg-2: var(--brand-ink-700);      /* secondary text */
  --fg-3: var(--brand-ink-500);      /* tertiary / captions */
  --fg-disabled: var(--brand-ink-300);
  --fg-on-brand: #FFFFFF;            /* text on green */

  --border-subtle: rgba(29, 29, 27, 0.08);
  --border-default: rgba(29, 29, 27, 0.16);
  --border-strong: rgba(29, 29, 27, 0.32);

  --accent: var(--brand-green);
  --accent-hover: var(--brand-green-700);
  --accent-soft: var(--brand-green-100);

  --success: #59B890;
  --warning: #D4A24C;
  --danger:  #C2453A;
  --info:    #4A7BB7;

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-display: 'Rocketwildness', 'Michroma', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ============================================================
     TYPE — Scale (1.25 — major third)
     ============================================================ */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --tracking-display: 0.18em;     /* very wide — matches logo */
  --tracking-eyebrow: 0.24em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ============================================================
     RADII — small. Brand reads architectural / sharp.
     ============================================================ */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — restrained, cool, never bloomy
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(29, 29, 27, 0.06);
  --shadow-2: 0 2px 8px rgba(29, 29, 27, 0.08);
  --shadow-3: 0 8px 24px rgba(29, 29, 27, 0.10);
  --shadow-4: 0 16px 48px rgba(29, 29, 27, 0.14);
  --shadow-focus: 0 0 0 3px rgba(89, 184, 144, 0.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
html, body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;          /* Open Sans Light Italic — body default */
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
}

/* Headings — display face, all caps, very wide tracking */
h1, h2, h3, .display, .h1, .h2, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h1, .h1 { font-size: var(--fs-72); }
h2, .h2 { font-size: var(--fs-40); letter-spacing: 0.16em; }
h3, .h3 { font-size: var(--fs-24); letter-spacing: 0.20em; }

/* Subheads / labels still use display face but smaller */
h4, .h4, .eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-12);
  color: var(--fg-3);
  margin: 0 0 var(--sp-3);
}

/* Body */
p, .body {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-20);
  font-weight: 300;
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.caption {
  font-size: var(--fs-12);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

a {
  color: var(--brand-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-green);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--brand-green-700); border-color: var(--brand-green-700); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-style: normal;
}