/* Design tokens of the "Planta" identity (docs/specs/02.1-visual.md).
   The only file where a colour literal may appear; test/constitution checks
   that, and the WCAG AA contrast of every text token in both themes. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Light: "papel vegetal". */
  --bg: #EEF0F6;
  --surface: #FFFFFF;
  --line: #D4D8E6;
  --ink: #10121C;
  --muted: #555B73;
  --brand: #1F1FE6;
  --danger: #C0262D;
  --ctx-construction: #8A5A00;
  --ctx-personal: #1D7A52;
  --ctx-company: #A3236E;

  /* The same in both themes: flat areas and what is written on them. */
  --brand-fill: #1F1FE6;
  --on-brand: #EEF0F6;
  --ctx-fill-construction: #FFC62E;
  --ctx-fill-personal: #5ED6A0;
  --ctx-fill-company: #F7A8D8;
  --on-fill: #10121C;

  --f-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Small radii, as in a technical drawing. Spacing on a 4px scale. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --tap: 44px;
  --grid: 24px;
  --grid-sheet: 32px;
  --tabbar-h: 68px;
}

@media (prefers-color-scheme: dark) {
  /* Dark: "noite". */
  :root {
    --bg: #0B0C12;
    --surface: #151724;
    --line: #262A3D;
    --ink: #E9EBF5;
    --muted: #9097B0;
    --brand: #9095FF;
    --danger: #FF7B7B;
    --ctx-construction: #FFC62E;
    --ctx-personal: #5ED6A0;
    --ctx-company: #F7A8D8;
  }
}

/* The same two themes by class, so the styleguide can show both at once.
   test/constitution fails if they drift from the values above. */
.theme-light {
  color-scheme: light;
  --bg: #EEF0F6;
  --surface: #FFFFFF;
  --line: #D4D8E6;
  --ink: #10121C;
  --muted: #555B73;
  --brand: #1F1FE6;
  --danger: #C0262D;
  --ctx-construction: #8A5A00;
  --ctx-personal: #1D7A52;
  --ctx-company: #A3236E;
}
.theme-dark {
  color-scheme: dark;
  --bg: #0B0C12;
  --surface: #151724;
  --line: #262A3D;
  --ink: #E9EBF5;
  --muted: #9097B0;
  --brand: #9095FF;
  --danger: #FF7B7B;
  --ctx-construction: #FFC62E;
  --ctx-personal: #5ED6A0;
  --ctx-company: #F7A8D8;
}