/* =============================================================
   AIRLUSO Film Productions — Colors & Type
   Premium dark UI · cinematic · B2B video production
   ============================================================= */

/* ---------- Fonts ---------- */
/* Google Fonts fallback first — for weights we don't have locally (100, 500, 700, 900) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500;700;900&display=swap");

/* Alfarn — Display / Title (ALWAYS UPPERCASE) */
@font-face {
  font-family: "Alfarn";
  src: url("../fonts/Alfarn-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Montserrat — Body. Only declare weights for which we have local files,
   to avoid silent 404s on every page load. Other weights fall through to
   the Google Fonts import above. */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

/* =============================================================
   TOKENS
   ============================================================= */

:root {
  /* ---------- Brand core ---------- */
  --airluso-white:        #FFFFFF;
  --airluso-nero:         #1C1C1C;   /* Nero Grey — base dark */
  --airluso-teal:         #579F9F;   /* Brand accent (turquesa/teal) */

  /* ---------- Neutrals (warm-cool dark scale) ---------- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F6F7F7;
  --neutral-100:  #ECEDED;
  --neutral-200:  #D6D8D8;
  --neutral-300:  #B0B3B3;
  --neutral-400:  #7E8181;
  --neutral-500:  #595B5B;
  --neutral-600:  #3D3F3F;
  --neutral-700:  #2A2C2C;
  --neutral-800:  #1C1C1C;   /* Nero */
  --neutral-900:  #131414;
  --neutral-950:  #0A0B0B;   /* near-black background */

  /* ---------- Teal scale (accent) ---------- */
  --teal-50:   #EAF4F4;
  --teal-100:  #CFE5E5;
  --teal-200:  #A8CFCF;
  --teal-300:  #84B9B9;
  --teal-400:  #6CACAC;
  --teal-500:  #579F9F;   /* brand */
  --teal-600:  #468585;
  --teal-700:  #386B6B;
  --teal-800:  #2B5252;
  --teal-900:  #1F3D3D;

  /* ---------- Semantic surfaces (dark-first) ---------- */
  --bg:           var(--neutral-950);
  --bg-elevated:  var(--neutral-900);
  --bg-card:      var(--neutral-800);
  --bg-card-hover:#232525;
  --bg-inverse:   var(--neutral-0);

  /* Foreground / text */
  --fg:           var(--neutral-0);          /* primary on dark */
  --fg-muted:     #B7BABA;                    /* secondary text */
  --fg-subtle:    #7E8181;                    /* tertiary / captions */
  --fg-disabled:  #4A4C4C;
  --fg-inverse:   var(--neutral-900);         /* text on light surfaces */
  --fg-accent:    var(--airluso-teal);

  /* Borders & dividers */
  --border:           rgba(255,255,255,0.08);
  --border-strong:    rgba(255,255,255,0.16);
  --border-subtle:    rgba(255,255,255,0.04);
  --border-accent:    var(--airluso-teal);

  /* Semantic (status) — kept tight, cinematic */
  --success: #5FB58A;
  --warning: #E0B056;
  --danger:  #D9624C;
  --info:    var(--airluso-teal);

  /* ---------- Type families ---------- */
  --font-display: "Alfarn", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (rem-based, 16px root) ---------- */
  --fs-12: 0.75rem;     /* 12 — micro / caption */
  --fs-14: 0.875rem;    /* 14 — small body / labels */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — body lg */
  --fs-20: 1.25rem;     /* 20 — sub */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-32: 2rem;        /* 32 — h3 */
  --fs-44: 2.75rem;     /* 44 — h2 */
  --fs-60: 3.75rem;     /* 60 — h1 */
  --fs-80: 5rem;        /* 80 — display */
  --fs-112: 7rem;       /* 112 — hero display */

  /* ---------- Line heights ---------- */
  --lh-tight: 1.02;     /* display headlines */
  --lh-snug:  1.12;     /* h1-h3 */
  --lh-base:  1.5;      /* body */
  --lh-loose: 1.7;      /* long-form */

  /* ---------- Letter-spacing ---------- */
  --ls-display:  -0.02em;   /* big Alfarn caps */
  --ls-headline: -0.01em;
  --ls-body:     0em;
  --ls-eyebrow:  0.18em;    /* small caps labels */
  --ls-caps:     0.04em;    /* button caps */

  /* ---------- Weights ---------- */
  --fw-thin:    100;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-xbold:   800;
  --fw-black:   900;

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

  /* ---------- Radii — restrained, modern ---------- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Shadows — dark UI; mostly subtle ---------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.50);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow-teal: 0 0 0 1px rgba(87,159,159,0.35), 0 8px 28px rgba(87,159,159,0.18);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.6, 0, 0.84, 0);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
  --dur-cinema: 700ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-px: clamp(20px, 4vw, 48px);
}

/* =============================================================
   BASE / RESET-LIGHT
   ============================================================= */

html {
  -webkit-text-size-adjust: 100%; /* impede iOS de aumentar texto em landscape */
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;              /* previne scroll horizontal sem bloquear o vertical em iOS */
  position: relative;            /* contexto de stacking para o overflow-x funcionar */
}

::selection { background: var(--airluso-teal); color: var(--neutral-900); }

/* =============================================================
   SEMANTIC TYPOGRAPHY
   Use these utility classes OR copy the rules into element styles.
   ============================================================= */

.display-xl,
.display-lg,
.display-md,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);  /* Alfarn ships as one weight */
  text-transform: uppercase;        /* Alfarn rule: ALWAYS CAPS */
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
}

/* Display sizes */
.display-xl { font-size: clamp(64px, 9vw, 112px); }
.display-lg { font-size: clamp(48px, 6.5vw, 80px); }
.display-md { font-size: clamp(36px, 4.5vw, 60px); }

h1 { font-size: var(--fs-60); }
h2 { font-size: var(--fs-44); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-32); line-height: var(--lh-snug); }

/* Sub-headlines & body headings — Montserrat, sentence/UPPER mix allowed */
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  color: var(--fg);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Body */
p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-muted);
  margin: 0;
}
.body-lg { font-size: var(--fs-18); line-height: var(--lh-base); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-base); }

/* Eyebrow / micro-label */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--airluso-teal);
}

.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  color: var(--fg-subtle);
}

/* Button text */
.btn-text {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg-muted);
}

/* Helpers */
.text-fg       { color: var(--fg); }
.text-muted    { color: var(--fg-muted); }
.text-subtle   { color: var(--fg-subtle); }
.text-accent   { color: var(--airluso-teal); }
.text-inverse  { color: var(--fg-inverse); }