/* Oction Labs — colour system
   "Dark by default. One point of colour."
   Ink is home (60-70% of any composition). Coral is the only structural colour,
   capped at 5% of any layout outside the mark. No gradients, no tints of coral,
   no additional accent hues. Values are non-negotiable — reproduce exactly. */

:root {
  /* ---- Base palette (exact brand values) ---- */
  --ink: #0A0A0B;        /* primary surface & primary text on light. 60-70% of a composition */
  --carbon: #17191D;     /* elevated dark surfaces, cards on ink */
  --graphite: #4A4D52;   /* secondary text on light surfaces */
  --steel: #9CA0A8;      /* tertiary text on ink, hairlines, disabled */
  --mist: #ECEDEF;       /* light surfaces, dividers on white */
  --white: #FFFFFF;      /* reversed mark and text on ink */
  --coral: #FF4B26;      /* the core dot, plus rules/buttons. <=5% outside the mark */
  --coral-deep: #C2330F; /* coral for small text on light surfaces (WCAG AA-safe) */

  /* ---- Semantic surfaces ---- */
  --surface-base: var(--ink);        /* the brand's home stage */
  --surface-elevated: var(--carbon); /* cards / panels on ink */
  --surface-light: var(--white);     /* documents & dense reading */
  --surface-subtle: var(--mist);     /* light fills, table zebra, dividers on white */

  /* ---- Semantic text (on dark surfaces) ---- */
  --text-on-dark: var(--white);
  --text-on-dark-secondary: var(--steel);
  --text-on-dark-tertiary: #6B6F77;  /* derived: dimmer steel for captions on ink */

  /* ---- Semantic text (on light surfaces) ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--graphite);
  --text-tertiary: var(--steel);

  /* ---- Accent (the one coral gesture) ---- */
  --accent: var(--coral);
  --accent-press: var(--coral-deep);
  --accent-text-on-light: var(--coral-deep); /* coral text < 18px must use coral-deep */
  --accent-on-accent: var(--white);          /* text/icons sitting on a coral fill */

  /* ---- Lines & dividers ---- */
  --hairline-on-dark: #232529;     /* derived from carbon, used for nav / card borders on ink */
  --hairline-on-light: var(--mist);
  --rule-strong-on-light: var(--ink); /* the dossier 1.6px structural rule */

  /* ---- Focus ---- */
  --focus-ring: var(--coral);

  /* ---- Disabled ---- */
  --disabled-on-dark: var(--steel);
  --disabled-on-light: var(--steel);
}