/* O2D brand tokens — the only source of colours and fonts for showcases.
   Source of truth: the live website https://o2d.es/ (read 2026-10-01).
   The 2023 PDF (Branding-Propuesta-02-B.pdf) is where the palette started;
   where the two differ, the website wins. See brand/README.md. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Comfortaa:wght@300;400;700&display=swap");

:root {
  /* Palette (website) */
  --o2d-navy: #16354a;        /* headings, dark backgrounds */
  --o2d-slate: #4b6070;       /* body text */
  --o2d-periwinkle: #797ef6;  /* logo circle, accents */
  --o2d-cyan: #00c4cc;        /* highlights, active menu item */
  --o2d-cobalt: #0c4da2;      /* buttons */
  --o2d-sky: #7dd6f6;         /* soft fills, orbs */
  --o2d-turquoise: #4adede;   /* chips, orbs */
  --o2d-teal: #0084a3;        /* solid accent, dark end of gradients */
  --o2d-mist: #f5f7f9;        /* light section background */
  --o2d-white: #ffffff;

  /* Translucent dots (~50 %) */
  --o2d-turquoise-soft: rgb(74 222 222 / 0.5);
  --o2d-periwinkle-soft: rgb(121 126 246 / 0.5);
  --o2d-sky-soft: rgb(125 214 246 / 0.5);

  /* Gradients */
  --o2d-grad-teal: linear-gradient(90deg, var(--o2d-turquoise), var(--o2d-teal));
  --o2d-grad-violet: linear-gradient(135deg, var(--o2d-periwinkle), var(--o2d-sky));
  --o2d-grad-deep: linear-gradient(90deg, var(--o2d-navy), var(--o2d-teal));

  /* Type (website): Open Sans bold for headings, Comfortaa for body and logo */
  --o2d-font-title: "Open Sans", system-ui, sans-serif;
  --o2d-font-body: "Comfortaa", system-ui, sans-serif;
  --o2d-font-logo: "Comfortaa", system-ui, sans-serif;

  /* Semantic defaults */
  --o2d-bg: var(--o2d-white);
  --o2d-ink: var(--o2d-navy);
  --o2d-text: var(--o2d-slate);
  --o2d-accent: var(--o2d-cyan);
  --o2d-cta: var(--o2d-cobalt);
  --o2d-chip: var(--o2d-turquoise);
  --o2d-chip-alt: var(--o2d-periwinkle);
}