/* ATOMIC color tokens.
   Base values are EXACT from the Figma file (Frame 4 / Frame 15).
   Tints are derived (oklch-mixed) to support the "blue ocean /
   прозрачность" direction — marked DERIVED. */
:root {
  /* — base, from Figma — */
  --atomic-cream: #F8F3E0;      /* rgb(248,243,224) фон */
  --atomic-navy: #131E5F;       /* rgb(19,30,95) логотип, основной текст */
  --atomic-teal: #94BEBE;       /* rgb(148,190,190) блоки */
  --atomic-sea: #156479;        /* rgb(21,100,121) блоки */
  --atomic-deep: #184153;       /* rgb(24,65,83) текст на светлом */
  --atomic-ember: #DA501C;      /* rgb(218,80,28) акцент — новый оранжевый */
  --atomic-gray: #D9D9D9;       /* rgb(217,217,217) */
  --atomic-white: #FFFFFF;
  --atomic-sea-64: rgba(21, 100, 121, 0.64); /* полупрозрачный блок, Frame 14 */

  /* — derived light tints (blue ocean) — DERIVED — */
  --atomic-ice: #EDF4F3;        /* teal 12% на белом */
  --atomic-mist: #DBE9E8;       /* teal 28% на белом */
  --atomic-foam: #F3F7F1;       /* cream×teal свет */
  --atomic-teal-24: rgba(148, 190, 190, 0.24);
  --atomic-teal-48: rgba(148, 190, 190, 0.48);
  --atomic-navy-08: rgba(19, 30, 95, 0.08);
  --atomic-navy-16: rgba(19, 30, 95, 0.16);
  --atomic-navy-84: rgba(19, 30, 95, 0.84); /* тёмно-синяя «глубина» в слоях океана */

  /* — semantic — */
  --surface-page: var(--atomic-cream);
  --surface-panel: var(--atomic-teal);
  --surface-deep: var(--atomic-navy);
  --surface-card: var(--atomic-white);
  --text-primary: var(--atomic-navy);
  --text-body: var(--atomic-deep);
  --text-inverse: var(--atomic-cream);
  --text-accent: var(--atomic-ember);
  --border-hairline: var(--atomic-navy-16);
  --line-circuit: var(--atomic-navy);
}