/* ==========================================================================
   tokens.css — Design tokens do Estúdio Lata de Leite
   Ordem de carregamento: 1/7
   Toda decisão visual (cor, tipografia, espaço, sombra) nasce aqui.
   ========================================================================== */

/* Tipografia oficial ------------------------------------------------------ */
@font-face {
  font-family: "Sansation";
  src: url("../fonts/sansation-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sansation";
  src: url("../fonts/sansation-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sansation";
  src: url("../fonts/sansation-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sansation";
  src: url("../fonts/sansation-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sansation";
  src: url("../fonts/sansation-regular-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sansation";
  src: url("../fonts/sansation-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Tokens ------------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Paleta oficial -------------------------------------------------------- */
  --ink: #090b31;
  --ink-deep: #05061a;
  --ink-soft: #0d1040;
  --blue: #101a85;
  --paper: #f5f5ff;
  --paper-2: #ededf9;
  --white: #ffffff;

  --coral: #f2745e;
  --coral-bright: #ff8e79;
  --coral-deep: #b6402c;
  --coral-soft: #fdece7;

  --text-light: #f5f5ff;
  --text-muted-dark: rgba(238, 238, 255, 0.64);
  --text-muted-light: #5d5f7c;
  --line-dark: rgba(245, 245, 255, 0.12);
  --line-light: rgba(9, 11, 49, 0.11);

  /* Derivados ------------------------------------------------------------- */
  --ink-08: rgba(9, 11, 49, 0.08);
  --ink-16: rgba(9, 11, 49, 0.16);
  --coral-12: rgba(242, 116, 94, 0.12);
  --coral-20: rgba(242, 116, 94, 0.2);
  --coral-40: rgba(242, 116, 94, 0.4);
  --blue-soft: #e7e8ff;

  --grad-coral: linear-gradient(112deg, #ff9d89 0%, #f2745e 36%, #d95743 68%, #ff8e79 100%);
  --grad-coral-strong: linear-gradient(112deg, #c94d38 0%, #b8422e 40%, #a13424 70%, #b9412d 100%);
  --grad-ink: linear-gradient(145deg, #141a6e 0%, #090b31 52%, #101a85 100%);
  --grad-paper: linear-gradient(155deg, #ffffff 0%, #ededf9 100%);
  --grad-glass-dark: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));

  /* Tipografia ------------------------------------------------------------ */
  --font-sans: "Sansation", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --h3: clamp(1.22rem, 1.08rem + 0.55vw, 1.55rem);
  --h2: clamp(2rem, 1.55rem + 1.9vw, 3.4rem);
  --h1: clamp(2.55rem, 1.45rem + 3.8vw, 4.4rem);

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-normal: 1.65;

  --tracking-tight: -0.035em;
  --tracking-wide: 0.16em;

  /* Espaçamento (base 4px) ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 4.5vw, 3.25rem);
  --container: 1240px;
  --header-h: 5rem;

  /* Formas e sombras ------------------------------------------------------ */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 24px 50px -34px rgba(9, 11, 49, 0.35);
  --shadow-card-hover: 0 32px 70px -40px rgba(9, 11, 49, 0.45);
  --shadow-dark: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
  --glow-coral: 0 18px 55px -22px rgba(242, 116, 94, 0.65);

  /* Movimento ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 300ms;
  --duration-slow: 750ms;

  /* Camadas --------------------------------------------------------------- */
  --z-base: 1;
  --z-float: 80;
  --z-menu: 90;
  --z-header: 100;
}

/* Escopos de seção -------------------------------------------------------- */
.section--light {
  color-scheme: light;
  --bg: var(--paper);
  --text: var(--ink);
  --text-soft: #26284a;
  --muted: var(--text-muted-light);
  --line: var(--line-light);
  --surface: var(--white);
  --surface-2: var(--paper-2);
  --accent: var(--coral);
  --accent-text: var(--coral-deep);
  --on-accent: var(--ink);
}

.section--dark {
  color-scheme: dark;
  --bg: var(--ink);
  --text: var(--paper);
  --text-soft: #dadcf2;
  --muted: var(--text-muted-dark);
  --line: var(--line-dark);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --accent: var(--coral);
  --accent-text: var(--coral);
  --on-accent: var(--ink);
}

.section--paper-2 {
  --bg: var(--paper-2);
}