/* Oction UI tokens: the design system of the Oction tools (Publish portal and Studio).

   The DGTL Group admin-tool kit (black surface ladder, Manrope, 7 px controls, 16 px panels,
   pill badges, quiet borders, glassy bars) with the Oction Agency brand (guidelines v1.0,
   October 2026) in place of DGTL's: the Oction Agency logo, and Signal teal as the one accent.

   Signal #02CCB6 is 9.7:1 on ink, so on dark it fills (the primary button, rails, counts,
   meters, markers) and draws small text. On white it is 2.0:1, graphic only: small teal text on
   light is Signal deep #007A6D (5.2:1), and the primary button is ink, so teal is spent on the
   active marker. Text on a Signal fill is ink. The guidelines forbid tints of teal, so selected
   and active states take a neutral tint with the teal rail and teal text.

   Dark is the default. Light comes from the system (prefers-color-scheme) unless the person
   chose one: the pages' theme.js sets data-theme="light" or "dark" on <html>.

   This is the canonical copy. studio/public/assets/ui-tokens.css and portal/public/ui-tokens.css
   are exact copies (their tests compare them). Pages load Manrope from Google Fonts. */

:root{
  color-scheme:dark;

  /* surfaces: black, with elevation from borders and shadow rather than grey fills */
  --bg:#000000;
  --surface-1:#0a0a0a;
  --surface-2:#111111;
  --surface-3:#1a1a1a;
  --surface-hover:#0f0f0f;
  --surface-card:rgba(0,0,0,0.45);

  /* text */
  --text:#F0F0F0;
  --text-strong:#FFFFFF;
  --text-muted:#D0D0D0;
  --text-dim:#8a8a8a;
  --text-ghost:#5a5a56;
  --placeholder:#6a6a6a;
  --white:#FFFFFF;
  --black:#000000;

  /* the accent: Oction Agency Signal where the DGTL kit has gold */
  --accent:#02CCB6;
  --accent-strong:#007A6D;
  --on-accent:#0A0A0B;
  --on-accent-strong:#FFFFFF;
  --accent-text:#02CCB6;
  --accent-tint:rgba(255,255,255,0.06);
  --accent-tint-strong:rgba(255,255,255,0.10);
  --accent-line:#3a3a3a;
  --kicker:#9CA0A8;

  /* the primary button (Signal on dark, ink on light), a pressed filter tab, the logo */
  --primary:#02CCB6;
  --on-primary:#0A0A0B;
  --primary-strong:#007A6D;
  --on-primary-strong:#FFFFFF;
  --selected-bg:#FFFFFF;
  --on-selected:#000000;
  --logo:#FFFFFF;

  /* borders */
  --border:#2a2a2a;
  --border-hover:#3a3a3a;
  --border-row:#1c1c1c;
  --border-subtle:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.4);

  /* states: a tint and a text colour, always with a word */
  --success:#7BC47F;
  --success-tint:rgba(123,196,127,0.10);
  --warning:#E8A33D;
  --warning-tint:rgba(232,163,61,0.10);
  --danger:#E5484D;
  --danger-tint:rgba(229,72,77,0.10);
  --danger-line:rgba(229,72,77,0.4);
  --info:#6E9FDB;
  --info-tint:rgba(110,159,219,0.10);

  /* geometry */
  --r-control:7px;
  --r-card:16px;
  --r-toast:10px;
  --r-chip:4px;
  --r-pill:9999px;
  --sidebar:248px;
  --gutter:24px;
  --maxw:1120px;
  --topbar:60px;      /* the top bar on phones (Studio below 900 px, the portal below 560 px) */
  --gutter-phone:16px;

  /* effects; the vignette is the guidelines' one gradient, the Signal bloom, on dark only */
  --shadow-card:0 6px 6px rgba(0,0,0,.3), 0 0 20px rgba(0,0,0,.15);
  --shadow-pop:0 18px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,0.04);
  --focus-ring:0 0 0 2px #000000, 0 0 0 4px #02CCB6;
  --input-ring:0 0 0 1px #02CCB6;
  --glass-bg:rgba(0,0,0,0.45);
  --glass-blur:blur(8px) saturate(1.8);
  --overlay:rgba(0,0,0,0.7);
  --vignette:radial-gradient(ellipse 70% 55% at 85% 0%, rgba(2,204,182,0.10), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255,255,255,0.03), transparent 70%);
  --shimmer:linear-gradient(90deg, #111111 0%, #1a1a1a 50%, #111111 100%);
  --select-arrow:linear-gradient(45deg, transparent 50%, #8a8a8a 50%), linear-gradient(135deg, #8a8a8a 50%, transparent 50%);

  /* type */
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:.18s ease;
}

/* Light: white ground, Mist surfaces, ink text, Graphite secondary text (the guidelines' light
   palette). The same values twice: once for the system setting, once for the person's choice. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#FFFFFF;
    --surface-1:#F7F7F8;
    --surface-2:#ECEDEF;
    --surface-3:#E2E3E6;
    --surface-hover:#F2F3F4;
    --surface-card:rgba(255,255,255,0.72);
    --text:#0A0A0B;
    --text-strong:#0A0A0B;
    --text-muted:#4A4D52;
    --text-dim:#62656B;
    --text-ghost:#6E7178;
    --placeholder:#7A7D84;
    --accent-text:#007A6D;
    --accent-tint:#F1F2F3;
    --accent-tint-strong:#ECEDEF;
    --accent-line:#C4C7CC;
    --kicker:#4A4D52;
    --primary:#0A0A0B;
    --on-primary:#FFFFFF;
    --primary-strong:#17191D;
    --on-primary-strong:#FFFFFF;
    --selected-bg:#0A0A0B;
    --on-selected:#FFFFFF;
    --logo:#0A0A0B;
    --border:#DEDFE3;
    --border-hover:#C4C7CC;
    --border-row:#ECEDEF;
    --border-subtle:rgba(10,10,11,0.08);
    --border-strong:rgba(10,10,11,0.42);
    --success:#186A34;
    --success-tint:rgba(24,106,52,0.09);
    --warning:#94570A;
    --warning-tint:rgba(148,87,10,0.10);
    --danger:#C42B30;
    --danger-tint:rgba(196,43,48,0.08);
    --danger-line:rgba(196,43,48,0.4);
    --info:#2D64A8;
    --info-tint:rgba(45,100,168,0.10);
    --shadow-card:0 1px 2px rgba(10,10,11,.06), 0 4px 14px rgba(10,10,11,.05);
    --shadow-pop:0 18px 48px rgba(10,10,11,.16), 0 0 0 1px rgba(10,10,11,.06);
    --focus-ring:0 0 0 2px #FFFFFF, 0 0 0 4px #007A6D;
    --input-ring:0 0 0 1px #007A6D;
    --glass-bg:rgba(255,255,255,0.72);
    --overlay:rgba(10,10,11,0.48);
    --vignette:none;
    --shimmer:linear-gradient(90deg, #F2F3F4 0%, #E6E7EA 50%, #F2F3F4 100%);
    --select-arrow:linear-gradient(45deg, transparent 50%, #62656B 50%), linear-gradient(135deg, #62656B 50%, transparent 50%);
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF;
  --surface-1:#F7F7F8;
  --surface-2:#ECEDEF;
  --surface-3:#E2E3E6;
  --surface-hover:#F2F3F4;
  --surface-card:rgba(255,255,255,0.72);
  --text:#0A0A0B;
  --text-strong:#0A0A0B;
  --text-muted:#4A4D52;
  --text-dim:#62656B;
  --text-ghost:#6E7178;
  --placeholder:#7A7D84;
  --accent-text:#007A6D;
  --accent-tint:#F1F2F3;
  --accent-tint-strong:#ECEDEF;
  --accent-line:#C4C7CC;
  --kicker:#4A4D52;
  --primary:#0A0A0B;
  --on-primary:#FFFFFF;
  --primary-strong:#17191D;
  --on-primary-strong:#FFFFFF;
  --selected-bg:#0A0A0B;
  --on-selected:#FFFFFF;
  --logo:#0A0A0B;
  --border:#DEDFE3;
  --border-hover:#C4C7CC;
  --border-row:#ECEDEF;
  --border-subtle:rgba(10,10,11,0.08);
  --border-strong:rgba(10,10,11,0.42);
  --success:#186A34;
  --success-tint:rgba(24,106,52,0.09);
  --warning:#94570A;
  --warning-tint:rgba(148,87,10,0.10);
  --danger:#C42B30;
  --danger-tint:rgba(196,43,48,0.08);
  --danger-line:rgba(196,43,48,0.4);
  --info:#2D64A8;
  --info-tint:rgba(45,100,168,0.10);
  --shadow-card:0 1px 2px rgba(10,10,11,.06), 0 4px 14px rgba(10,10,11,.05);
  --shadow-pop:0 18px 48px rgba(10,10,11,.16), 0 0 0 1px rgba(10,10,11,.06);
  --focus-ring:0 0 0 2px #FFFFFF, 0 0 0 4px #007A6D;
  --input-ring:0 0 0 1px #007A6D;
  --glass-bg:rgba(255,255,255,0.72);
  --overlay:rgba(10,10,11,0.48);
  --vignette:none;
  --shimmer:linear-gradient(90deg, #F2F3F4 0%, #E6E7EA 50%, #F2F3F4 100%);
  --select-arrow:linear-gradient(45deg, transparent 50%, #62656B 50%), linear-gradient(135deg, #62656B 50%, transparent 50%);
}