/*
 * Dr. Mais Vida — design tokens.
 * The one source for color, type, spacing, radius, shadow and fonts.
 * Every product page loads this file before its own stylesheet.
 * Catalogue and usage rules: design-system/index.html.
 */

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

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/montserrat-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2");
}

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

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/montserrat-latin-800-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/montserrat-latin-500-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/montserrat-latin-600-italic.woff2") format("woff2");
}

:root {
  /* 11 colors */
  --bg: #eef3fa;
  --surface: #ffffff;
  --line: #e6eef6;
  --text: #12284a;
  --muted: #4b607a;
  --blue: #2e69fc;
  --blue-text: #1d4ed8;
  --on-blue: #ffffff;
  --good: #127a39;
  --warn: #b93d0b;
  --scrim: rgba(18, 40, 74, 0.35);
  --shadow: 0 16px 40px rgba(20, 40, 80, 0.14);

  /* tints: a color over the surface, never chosen on their own */
  --blue-soft: color-mix(in srgb, var(--blue) 10%, var(--surface));
  --good-soft: color-mix(in srgb, var(--good) 10%, var(--surface));
  --warn-soft: color-mix(in srgb, var(--warn) 10%, var(--surface));

  /* 5 text sizes; weights are 500 text, 700 emphasis, 800 titles */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 18px;
  --fs-lg: 24px;
  --fs-xl: 32px;

  /* 4 spaces */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;

  /* 2 radii */
  --radius: 16px;
  --round: 999px;

  --sidebar: 268px;
  --rail: 76px;
  --tabbar: 64px;
  --shell: 1120px;

  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1424;
    --surface: #121e33;
    --line: #24344f;
    --text: #eef3fb;
    --muted: #b0bed3;
    --blue-text: #93b4ff;
    --good: #4ade80;
    --warn: #fb923c;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0b1424;
  --surface: #121e33;
  --line: #24344f;
  --text: #eef3fb;
  --muted: #b0bed3;
  --blue-text: #93b4ff;
  --good: #4ade80;
  --warn: #fb923c;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}