/* ==========================================================================
   Comind Studio — design tokens (fonte: DESIGN.md)
   ========================================================================== */

/* fontes self-hosted (latin + latin-ext, woff2): sem render-block do Google,
   sem origem externa. Mulish é variable (400-700) num arquivo só. */
@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/philosopher-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Philosopher";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/philosopher-700-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/mulish-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* --- cor: famílias ocean / gold / earth --- */
  --color-primary: #1f476c;
  --color-secondary: #3f648c;
  --color-accent: #e6bc5a;
  --color-accent-dark: #d4a03e;
  --color-success: #10b981;
  --color-success-dark: #047857;

  /* canvas do mundo claro: papel quente, eco do light mode do Sinapse
     (review-paper #F8F5EF) adaptado para a Comind — o tinge é o hue do
     gold (86 em OKLCH) em chroma sussurro, então o papel é da casa e a
     tinta ocean ganha contraste de temperatura, não só de luz.
     Arco do dia: manhã → meio-dia → entardecer.
     Contraste sobre cada tom: ink ≥10.6:1, muted ≥6.3:1 (AAA). */
  --color-canvas: #f6f3ec;                       /* oklch(0.965 0.010 86) */
  --color-canvas-morning: var(--color-canvas);
  --color-canvas-noon: #f9f8f3;                  /* oklch(0.978 0.006 86) */
  --color-canvas-dusk: #ece7da;                  /* oklch(0.928 0.018 86) */
  --color-surface: #ffffff;
  --color-ink: #1d3249;
  --color-muted: #5f4f49;
  --color-border: #d6dee9;

  --color-dark-canvas: #0f1d2d;
  --color-dark-surface: #1d3249;
  --color-dark-text: #fefefe;
  --color-dark-muted: #c5d1de;
  --color-dark-border: #2b5178;

  /* --- tipografia --- */
  --font-display: "Philosopher", "Georgia", serif;
  --font-body: "Mulish", "Segoe UI", system-ui, sans-serif;

  /* escala fluida: ratio >= 1.25 entre degraus */
  --text-hero: clamp(2.5rem, 1.2rem + 5.2vw, 5.25rem);     /* Philosopher 700 */
  --text-h2: clamp(1.9rem, 1.1rem + 3vw, 3.25rem);          /* Philosopher 700 */
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);        /* Mulish 600 */
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);    /* Mulish 400 */
  --text-body: 1rem;                                        /* Mulish 400 */
  --text-small: 0.875rem;                                   /* Mulish 500 */

  --leading-display: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.65;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-caps: 0.08em;

  /* --- espaço: base 4pt, respiro fluido entre capítulos --- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 3rem + 4vw, 7rem);
  --space-chapter: clamp(6rem, 4rem + 10vw, 12rem);

  --measure: 62ch;
  --container: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* --- forma e elevação --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;
  --shadow-md: 0 8px 24px rgb(15 29 45 / 0.10);
  --shadow-lg: 0 16px 48px rgb(15 29 45 / 0.16);

  /* --- movimento --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-state: 250ms;
  --dur-layout: 400ms;
  --dur-entrance: 700ms;

  /* --- z-index semântico --- */
  --z-canvas: -1;
  --z-content: 1;
  --z-nav: 10;
  --z-overlay: 20;
}

/* telas baixas (celular em landscape): a escala display cede altura */
@media (max-height: 480px) {
  :root {
    --text-hero: clamp(2rem, 1rem + 4vw, 3rem);
    --text-h2: clamp(1.5rem, 1rem + 2.4vw, 2.25rem);
  }
}