/**
 * Copyright (c) 2026 KDTech
 * Author: david@KDTech
 * All rights reserved.
 *
 * KDTechGroup website — design tokens ("Prism")
 *
 * The group's look: near-black surfaces and a four-colour prism (cyan,
 * indigo, pink, orange) that spans the palettes of the products it makes,
 * from Tilefold's cool aurora to the Social Network's warm orange and pink. The
 * site is dark by design; the canvas and glow effects are tuned for it.
 */

:root {
  color-scheme: dark;

  /* Surfaces, darkest to lightest. */
  --ink-0: #050508;
  --ink-1: #08080d;
  --ink-2: #0e0e15;
  --ink-3: #15151f;
  --ink-4: #1d1d2a;
  --ink-5: #2a2a3b;

  /* Text. */
  --text-1: #f5f5fa;
  --text-2: #b4b6c9;
  --text-3: #7a7d93;

  /* The prism. Names kept generic so section styles read naturally. */
  --cyan: #22d3ee;
  --violet: #6366f1;
  --pink: #ec4899;
  --amber: #f97316;
  --prism: linear-gradient(110deg, var(--cyan), var(--violet) 35%, var(--pink) 68%, var(--amber));
  --prism-soft: linear-gradient(
    110deg,
    rgb(34 211 238 / 0.16),
    rgb(99 102 241 / 0.2) 35%,
    rgb(236 72 153 / 0.18) 68%,
    rgb(249 115 22 / 0.16)
  );

  /* Status colours (product stages). */
  --ok: #34d399;
  --err: #fb7185;
  --warn: #fbbf24;
  --run: #22d3ee;

  /* Page roles. */
  --bg: var(--ink-1);
  --surface: var(--ink-2);
  --surface-2: var(--ink-3);
  --line: rgb(255 255 255 / 0.07);
  --line-strong: rgb(255 255 255 / 0.13);
  --highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --glass: rgb(14 14 21 / 0.62);
  --shadow-lg: 0 40px 120px -30px rgb(0 0 0 / 0.8), 0 12px 40px -12px rgb(0 0 0 / 0.6);

  /* Type. */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Shape. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* Motion. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emph: cubic-bezier(0.3, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout. */
  --page-max: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 68px;
}