/* SEMAI — Color System (Brandbook v1.0 §03)
   Dark-mode premium is the chosen surface (SEMAI Black #0B0B0E is a brand
   neutral for "tła premium, high contrast"). ONE chromatic voice: the SEMAI
   violet ramp, anchored on the three official hexes. No second accent, no
   cyan, no bluish-purple. Historical #8A2BE2 is forbidden. */

:root {
  /* ---- OFFICIAL BRAND COLORS ---- */
  --semai-black: #0B0B0E;      /* SEM in logo, main text, premium bg */
  --technical-black: #000000;  /* production/technical */
  --violet-dark: #6B2DD9;      /* gradient start, CTA, strategic accent */
  --violet-core: #AB65D6;      /* main brand violet, gradient end (AI) */
  --violet-light: #D1A6FF;     /* gradient end (sygnet), glows, subtle bg */
  --off-white: #F7F7F8;        /* document/section/card bg (light) */
  --line-light: #E7E2EE;       /* lines, borders, grid (light) */
  --text-light-bg: #16161A;    /* body text on light */
  --muted-brand: #6F6F78;      /* metadata, secondary (light) */

  /* ---- Neutral graphite ramp (dark-mode surfaces, anchored on #0B0B0E) ---- */
  --graphite-950: #0B0B0E;   /* SEMAI Black — page base */
  --graphite-925: #0E0E12;
  --graphite-900: #111116;   /* app canvas */
  --graphite-875: #16161A;   /* brand --text on-light == elevated dark base */
  --graphite-850: #191920;   /* card / surface */
  --graphite-800: #20202A;   /* elevated surface */
  --graphite-750: #292933;   /* hover surface */
  --graphite-700: #333340;   /* strong border / divider */
  --graphite-600: #43434F;
  --graphite-500: #5C5C68;
  --graphite-400: #7A7A86;   /* faint text */
  --graphite-300: #9E9EAC;   /* muted text */
  --graphite-200: #C6C6D2;
  --graphite-100: #E6E6ED;   /* body text on dark */
  --graphite-050: #F7F7F8;   /* Off White — highest contrast text */
  --white: #FFFFFF;

  /* ---- SEMAI Violet ramp (built around the 3 official anchors) ---- */
  --violet-050: #F4ECFF;
  --violet-100: #E7D6FF;
  --violet-200: #D1A6FF;   /* ★ Violet Light (official) */
  --violet-300: #C08CEC;
  --violet-400: #AB65D6;   /* ★ Violet Core (official) — main brand violet */
  --violet-500: #8C3FD4;   /* interpolated primary */
  --violet-600: #6B2DD9;   /* ★ Violet Dark (official) — CTA / strategic */
  --violet-700: #571FB0;
  --violet-800: #421887;
  --violet-900: #2B1259;

  /* ---- Semantic states (muted, functional; used sparingly) ---- */
  --green-400: #3ECF8E;    /* positive / live / success + Performance accent */
  --green-900: #0E2A22;
  --amber-400: #E8B23A;    /* caution / readiness */
  --amber-900: #2E2410;
  --red-400: #F0603E;      /* risk / error */
  --red-900: #2E140F;

  /* ---- SEMAI Performance product color (Brandbook v1.1 §03.2) ----
     Green is the PRODUCT accent for SEM/Performance ONLY. Never in the logo,
     never mixed with violet in one gradient. Homepage: max 3-5% (bridge
     section only). /performance: 10-15%, may be the main accent. */
  --perf-accent: #3ECF8E;
  --perf-accent-hover: #5BD9A0;
  --perf-accent-press: #2FB87A;
  --perf-deep: #0E2A22;
  --perf-tint: rgba(62, 207, 142, 0.12);
  --perf-tint-strong: rgba(62, 207, 142, 0.20);
  --perf-border: rgba(62, 207, 142, 0.30);
  --perf-glow: rgba(62, 207, 142, 0.24);
  --perf-text: #7BE3B6;

  /* =========================================================
     SEMANTIC ALIASES — reference these in components/screens
     ========================================================= */

  /* Backgrounds & surfaces (dark premium) */
  --bg-base: var(--graphite-950);
  --bg-canvas: var(--graphite-900);
  --surface-1: var(--graphite-850);
  --surface-2: var(--graphite-800);
  --surface-3: var(--graphite-750);
  --surface-hover: var(--graphite-750);
  --surface-inset: var(--graphite-925);

  /* Text */
  --text-strong: var(--graphite-050);
  --text-body: var(--graphite-100);
  --text-muted: var(--graphite-300);
  --text-faint: var(--graphite-400);
  --text-on-accent: var(--white);
  --text-accent: var(--violet-300);

  /* Borders & lines (thin, low-contrast — a core SEMAI motif) */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(107, 45, 217, 0.60);
  --hairline: rgba(255, 255, 255, 0.08);

  /* Accent surfaces — CTA = Violet Dark #6B2DD9 (per brandbook) */
  --accent: var(--violet-600);
  --accent-hover: var(--violet-500);
  --accent-press: var(--violet-700);
  --accent-core: var(--violet-400);
  --accent-tint: rgba(107, 45, 217, 0.14);
  --accent-tint-strong: rgba(139, 63, 212, 0.24);
  --accent-glow: rgba(139, 63, 212, 0.38);

  /* Focus */
  --focus-ring: rgba(171, 101, 214, 0.55);

  /* Semantic mapping */
  --positive: var(--green-400);
  --caution: var(--amber-400);
  --risk: var(--red-400);
  --data: var(--violet-200);   /* data highlight stays within the violet palette */

  /* Performance product gradient + spotlight (green, /performance only) */
  --grad-perf: linear-gradient(25deg, #2FB87A 0%, #3ECF8E 100%);   /* @kind color */
  --grad-perf-spotlight: radial-gradient(60% 60% at 50% 0%, rgba(62,207,142,0.20), rgba(62,207,142,0) 70%);   /* @kind color */
}