/* The brand kit's tokens (docs/design/blisk-brand/tokens/tokens.css), as the dashboard,
   the sign-in pages and the product's own pages load them. One change from the kit: no
   @import from Google Fonts; the fonts are self-hosted (fonts/blisk.css, pipeline/fetch_fonts.py),
   so no visitor's address reaches Google. Keep the values in step with the kit. Guest pages
   never load this: the event's branding leads there (site.css). */

/* Blisk brand tokens — K1 "Mono".
   Black and white for the brand; a muted film palette for colour wherever a surface needs it.
   Functional colours (error / success / warning) are for UI states only, never for branding. */

:root {
  /* Brand */
  --blisk-black: #0E0E0F;
  --blisk-white: #F2F1EC;

  /* Neutrals */
  --blisk-grey-900: #1A1A1C;  /* raised surface on black */
  --blisk-grey-800: #262628;  /* hairlines on black */
  --blisk-grey-700: #3A3A3D;  /* borders on black */
  --blisk-grey-500: #8D8C87;  /* secondary text on black (5.7:1); decorative only on white (3.0:1) */
  --blisk-grey-400: #A3A29C;  /* body-secondary on black (7.5:1) */
  --blisk-grey-600: #55544F;  /* secondary text on white (6.7:1) */
  --blisk-grey-200: #DCDBD5;  /* borders on white */

  /* Film palette (secondary): muted photo tones. Use whenever a surface needs colour;
     never in the logo, never for primary buttons or error/success states.
     Base: white text (all >= 4.5:1 except Ochre 4.2:1, large/bold text only).
     Soft: tint for light surfaces, black text (13:1). */
  --blisk-clay: #6B5A4E;   --blisk-clay-soft: #DAD6D0;
  --blisk-slate: #3F5A6B;  --blisk-slate-soft: #D2D6D5;
  --blisk-ochre: #8A6F4D;  --blisk-ochre-soft: #DFDACF;
  --blisk-moss: #4E6B55;   --blisk-moss-soft: #D4D9D1;
  --blisk-plum: #5C4A5E;   --blisk-plum-soft: #D7D3D2;
  --blisk-olive: #6B6B5A;  --blisk-olive-soft: #DAD9D2;

  /* Type */
  --blisk-font: "Archivo", "Onest", system-ui, sans-serif;   /* Onest supplies Cyrillic (Macedonian) */
  --blisk-font-cyrillic: "Onest", system-ui, sans-serif;     /* use for whole pages in mk */
  --blisk-weight-regular: 400;
  --blisk-weight-medium: 500;
  --blisk-weight-bold: 700;
  --blisk-weight-black: 800;

  /* Type scale (px) */
  --blisk-size-display: 64px;   /* 800, tracking -0.035em, line-height 0.95 */
  --blisk-size-h1: 40px;        /* 800, tracking -0.03em, line-height 1.05 */
  --blisk-size-h2: 28px;        /* 700, tracking -0.02em, line-height 1.15 */
  --blisk-size-h3: 20px;        /* 700, line-height 1.25 */
  --blisk-size-body: 16px;      /* 400, line-height 1.5 */
  --blisk-size-small: 13px;     /* 500, line-height 1.4 */
  --blisk-size-label: 12px;     /* 500, uppercase, tracking 0.14em */

  /* Shape */
  --blisk-radius-sm: 6px;
  --blisk-radius-md: 12px;
  --blisk-radius-lg: 22px;      /* app-icon-like tiles */
  --blisk-radius-pill: 999px;
}

/* Light surface (dashboard default, documents, QR cards) */
.blisk-light, :root {
  --bg: var(--blisk-white);
  --surface: #FFFFFF;
  --text: var(--blisk-black);
  --text-secondary: var(--blisk-grey-600);
  --border: var(--blisk-grey-200);
  --action-bg: var(--blisk-black);
  --action-text: var(--blisk-white);
  --error: #B23A2C;    /* 5.3:1 on white */
  --success: #2A7348;  /* 5.1:1 */
  --warning: #8A5F00;  /* 5.0:1 */
}

/* Dark surface (guest gallery, venue wall, marketing) */
.blisk-dark {
  --bg: var(--blisk-black);
  --surface: var(--blisk-grey-900);
  --text: var(--blisk-white);
  --text-secondary: var(--blisk-grey-400);
  --border: var(--blisk-grey-700);
  --action-bg: var(--blisk-white);
  --action-text: var(--blisk-black);
  --error: #E8695A;    /* 6.1:1 on black */
  --success: #5FBF86;  /* 8.5:1 */
  --warning: #E0A830;  /* 9.0:1 */
}