/* Cogentric colour tokens. Dark theme is the default (source: uploads/image.png "Dark Theme color codes").
   A light scope (.cg-light) is provided for white panels such as the on-light logo board. */
:root{
/* ---- Theme neutrals (verbatim from the theme sheet) ---- */
--background:#09090B;
--surface:#18181B;
--card:#212125;
--popout:#16161A;
--divider:#5B5B5C;
--disabled:#5D5D5D;
--white:#FFFFFF;
--black:#000000;

/* ---- Light backgrounds (for light sections, print, on-light panels) ---- */
--bg-white:#FFFFFF;
--bg-light-grey:#F4F4F2;

/* ---- Derived neutral steps (between card and divider) ---- */
--neutral-750:#26262B;
--neutral-700:#2E2E34;
--neutral-650:#36363C;
--neutral-400:#A1A1AA;
--neutral-500:#71717A;
--neutral-100:#F4F4F5;

/* ---- Brand (verbatim) ---- */
--red:#EB010E;
--magenta:#D62ACE;
--blue:#0002D0;

/* ---- Brand steps ---- */
/* Interactive red: brand red pulled toward magenta (as in the mark's top rays) so buttons, focus, selection read warm rather than hot. */
--interactive:#E3175A;
--interactive-hover:#C4124C;
--interactive-400:#FF5A8C;
--primary:var(--interactive);
--primary-700:var(--interactive-hover);
--primary-400:var(--interactive-400);
--primary-200:color-mix(in oklch,var(--interactive) 45%,var(--card));
--primary-050:color-mix(in oklch,var(--interactive) 14%,var(--surface));
--secondary:var(--blue);
--secondary-700:#0001A6;
--secondary-400:#5B63FF;
--secondary-050:color-mix(in oklch,var(--blue) 22%,var(--surface));
--accent:var(--magenta);
--accent-700:#B01FA9;
--accent-400:#E86AE2;
--accent-200:color-mix(in oklch,var(--magenta) 45%,var(--card));
--accent-050:color-mix(in oklch,var(--magenta) 14%,var(--surface));

/* ---- Semantic status (not in the theme sheet; chosen to sit apart from brand red) ---- */
--positive:#2FBF71;
--positive-400:#5ED99A;
--positive-050:color-mix(in oklch,#2FBF71 14%,var(--surface));
--positive-200:color-mix(in oklch,#2FBF71 40%,var(--card));
--warning:#E8A317;
--warning-400:#F5C04F;
--warning-050:color-mix(in oklch,#E8A317 14%,var(--surface));
--warning-200:color-mix(in oklch,#E8A317 40%,var(--card));
--critical:#FF5A36;
--critical-400:#FF8466;
--critical-050:color-mix(in oklch,#FF5A36 14%,var(--surface));
--critical-200:color-mix(in oklch,#FF5A36 40%,var(--card));
--info:var(--secondary-400);

/* ---- Signal gradient (theme sheet: left to right, red + magenta + blue) ---- */
--gradient-brand:linear-gradient(90deg,#EB010E 0%,#D62ACE 50%,#0002D0 100%); /* @kind color */
--gradient-brand-diag:linear-gradient(135deg,#EB010E 0%,#D62ACE 50%,#0002D0 100%); /* @kind color */
--gradient-ink:linear-gradient(180deg,#18181B 0%,#09090B 100%); /* @kind color */

/* ---- Semantic aliases ---- */
--surface-page:var(--background);
--surface-frame:var(--surface);
--surface-card:var(--card);
--surface-popout:var(--popout);
--surface-sunken:var(--popout);
--surface-hover:var(--neutral-750);
--surface-active:var(--neutral-700);
--surface-inverse:var(--black);
--surface-inverse-card:var(--popout);
--surface-accent-soft:var(--primary-050);

--text-primary:#FAFAFA;
--text-secondary:var(--neutral-400);
--text-muted:var(--neutral-500);
--text-disabled:var(--disabled);
--text-accent:var(--primary-400);
--text-on-accent:var(--white);
--text-on-inverse:var(--white);
--text-on-inverse-secondary:var(--neutral-400);

--border-subtle:#2A2A2F;
--border-default:var(--neutral-650);
--border-strong:var(--divider);
--border-accent:var(--primary);
--border-inverse:#26262B;

--focus-ring:color-mix(in oklch,var(--interactive) 50%,transparent);
--overlay-scrim:color-mix(in oklch,var(--black) 70%,transparent);
}

/* Light scope — white panels (e.g. on-light logo board, print). */
.cg-light{
--surface-page:#FFFFFF;
--surface-frame:var(--bg-light-grey);
--surface-card:#FFFFFF;
--surface-popout:#FFFFFF;
--surface-sunken:#FAFAFA;
--surface-hover:#F4F4F5;
--surface-active:#E4E4E7;
--surface-accent-soft:#FDECED;
--text-primary:#09090B;
--text-secondary:#52525B;
--text-muted:#71717A;
--text-accent:#C4124C;
--border-subtle:#E4E4E7;
--border-default:#D4D4D8;
--border-strong:#A1A1AA;
--primary-400:#C4124C;
--primary-050:#FDEBF1;
--primary-200:#F6B9CD;
--accent-400:#A61C9F;
--accent-050:#FBEAFA;
--accent-200:#EDB4E9;
--secondary-400:#2F37D9;
--secondary-050:#ECEDFF;
--positive-400:#17804A;
--positive-050:#E6F6ED;
--positive-200:#B5E4C9;
--warning-400:#8F6305;
--warning-050:#FDF3DF;
--warning-200:#F2D79A;
--critical-400:#B8361A;
--critical-050:#FDECE7;
--critical-200:#F6C2B4;
--border-inverse:#E4E4E7;
--surface-inverse:#FFFFFF;
--text-on-inverse:#09090B;
--text-on-inverse-secondary:#52525B;
color:var(--text-primary);
}