/*
  PaskalCPP™ Programming Language

  Copyright © 2026-present tinyBigGAMES™ LLC
  All Rights Reserved.

  https://paskalcpp.org

  SPDX-License-Identifier: MPL-2.0

  This Source Code Form is subject to the terms of the
  Mozilla Public License, v. 2.0. If a copy of the MPL
  was not distributed with this file, You can obtain one
  at https://mozilla.org/MPL/2.0/.

  ---

  Design system: tokens. Every color, font, size and effect the site and the docs use. Taken from
  media/social.jpg (deep navy night, electric blue to cyan, a violet edge) and
  media/logo.png (a heavy serif "Paskal", a geometric sans "CPP" in blue).
  Dark is the default (the brand's own look); light follows the OS unless the
  page sets data-theme on <html>. Static only: no font or file is fetched.
*/

:root {
  color-scheme: dark;

  /* Surfaces, dark (default) */
  --ds-bg: #040920;
  --ds-bg-2: #070f2e;
  --ds-surface: #0b1640;
  --ds-surface-2: #102052;
  --ds-surface-3: #16296a;
  --ds-line: rgba(70, 150, 255, 0.18);
  --ds-line-strong: rgba(70, 170, 255, 0.40);

  /* Text */
  --ds-text: #eef3ff;
  --ds-muted: #a8b6e2;
  --ds-muted-2: #7c8cc4;
  --ds-on-accent: #031033;

  /* Brand */
  --ds-blue: #1f8bff;
  --ds-cyan: #2fd3ff;
  --ds-violet: #8b5cff;
  --ds-magenta: #c050ff;
  --ds-link: #5cc0ff;
  --ds-link-hover: #9fe0ff;

  /* State */
  --ds-ok: #36d99a;
  --ds-warn: #ffb547;
  --ds-err: #ff5c74;
  --ds-hint: #8fa6ff;

  /* Code */
  --ds-code-bg: #050c26;
  --ds-code-text: #dfe8ff;
  --ds-tk-keyword: #5cc0ff;
  --ds-tk-type: #b79bff;
  --ds-tk-string: #ffd479;
  --ds-tk-number: #ff9e7a;
  --ds-tk-comment: #6f80b8;
  --ds-tk-directive: #3fe0c0;
  --ds-tk-cpp-bg: rgba(139, 92, 255, 0.10);
  /* Output lines (pass / fail / summary): the code box is dark in both themes, so light
     mode never redefines these, as the tk-* colors */
  --ds-out-ok: #36d99a;
  --ds-out-err: #ff5c74;
  --ds-out-info: #2fd3ff;

  /* Gradients and glow */
  --ds-brand: linear-gradient(90deg, #2fd3ff 0%, #1f8bff 48%, #8b5cff 100%);
  --ds-brand-soft: linear-gradient(135deg, rgba(31, 139, 255, 0.22), rgba(139, 92, 255, 0.18));
  --ds-glow: 0 0 28px rgba(47, 211, 255, 0.35);
  --ds-glow-strong: 0 0 44px rgba(47, 211, 255, 0.55);
  --ds-shadow: 0 24px 70px rgba(0, 0, 0, 0.50);

  /* Stage: the hero is always dark in both themes. logo.png is drawn for a
     dark backdrop (white lettering, glow), as social.jpg shows it. Light mode
     never redefines these. */
  --ds-stage-bg: #040920;
  --ds-stage-text: #eef3ff;
  --ds-stage-muted: #a8b6e2;
  --ds-stage-line: rgba(70, 150, 255, 0.18);
  --ds-stage-line-strong: rgba(70, 170, 255, 0.40);
  --ds-stage-surface-2: #102052;

  /* Type: system stacks only (offline, no download). Display = the logo's
     heavy serif; UI = a geometric sans like its "CPP"; code = a mono. */
  --ds-serif: "Rockwell", "Roboto Slab", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ds-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-mono: "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;

  --ds-fs-xs: 0.78rem;
  --ds-fs-sm: 0.9rem;
  --ds-fs-md: 1rem;
  --ds-fs-lg: 1.15rem;
  --ds-fs-xl: clamp(1.35rem, 2.2vw, 1.6rem);
  --ds-fs-2xl: clamp(1.7rem, 3.2vw, 2.25rem);
  --ds-fs-3xl: clamp(2.2rem, 5vw, 3.4rem);
  --ds-fs-hero: clamp(2.6rem, 7.5vw, 5.4rem);
  --ds-lh: 1.65;
  --ds-lh-tight: 1.12;

  /* Space, radius, layout */
  --ds-sp-1: 4px;
  --ds-sp-2: 8px;
  --ds-sp-3: 12px;
  --ds-sp-4: 16px;
  --ds-sp-5: 24px;
  --ds-sp-6: 32px;
  --ds-sp-7: 48px;
  --ds-sp-8: 72px;
  --ds-sp-9: 112px;
  --ds-radius-sm: 6px;
  --ds-radius: 12px;
  --ds-radius-lg: 20px;
  --ds-max: 1180px;
  --ds-max-text: 760px;
  --ds-gutter: 16px;
  --ds-nav-h: 64px;
  --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Light: follows the OS unless the page says data-theme="dark" */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ds-bg: #f4f7ff;
    --ds-bg-2: #e9eefc;
    --ds-surface: #ffffff;
    --ds-surface-2: #f0f4ff;
    --ds-surface-3: #e3eafc;
    --ds-line: rgba(20, 60, 160, 0.14);
    --ds-line-strong: rgba(20, 90, 220, 0.34);
    --ds-text: #0a1233;
    --ds-muted: #44527c;
    --ds-muted-2: #66739c;
    --ds-on-accent: #ffffff;
    --ds-blue: #0b6fe0;
    --ds-cyan: #0090c4;
    --ds-violet: #6a3ff0;
    --ds-magenta: #9a2fd8;
    --ds-link: #0a64d0;
    --ds-link-hover: #053f8a;
    --ds-ok: #0f9a63;
    --ds-warn: #b86e00;
    --ds-err: #d02a46;
    --ds-hint: #4157c9;
    --ds-code-bg: #0b1640;
    --ds-code-text: #e6edff;
    --ds-brand: linear-gradient(90deg, #0090c4 0%, #0b6fe0 48%, #6a3ff0 100%);
    --ds-brand-soft: linear-gradient(135deg, rgba(11, 111, 224, 0.10), rgba(106, 63, 240, 0.08));
    --ds-glow: 0 0 22px rgba(11, 111, 224, 0.18);
    --ds-glow-strong: 0 0 36px rgba(11, 111, 224, 0.28);
    --ds-shadow: 0 18px 50px rgba(20, 40, 100, 0.14);
  }
}

/* Light chosen by the page (theme toggle) */
:root[data-theme="light"] {
  color-scheme: light;
  --ds-bg: #f4f7ff;
  --ds-bg-2: #e9eefc;
  --ds-surface: #ffffff;
  --ds-surface-2: #f0f4ff;
  --ds-surface-3: #e3eafc;
  --ds-line: rgba(20, 60, 160, 0.14);
  --ds-line-strong: rgba(20, 90, 220, 0.34);
  --ds-text: #0a1233;
  --ds-muted: #44527c;
  --ds-muted-2: #66739c;
  --ds-on-accent: #ffffff;
  --ds-blue: #0b6fe0;
  --ds-cyan: #0090c4;
  --ds-violet: #6a3ff0;
  --ds-magenta: #9a2fd8;
  --ds-link: #0a64d0;
  --ds-link-hover: #053f8a;
  --ds-ok: #0f9a63;
  --ds-warn: #b86e00;
  --ds-err: #d02a46;
  --ds-hint: #4157c9;
  --ds-code-bg: #0b1640;
  --ds-code-text: #e6edff;
  --ds-brand: linear-gradient(90deg, #0090c4 0%, #0b6fe0 48%, #6a3ff0 100%);
  --ds-brand-soft: linear-gradient(135deg, rgba(11, 111, 224, 0.10), rgba(106, 63, 240, 0.08));
  --ds-glow: 0 0 22px rgba(11, 111, 224, 0.18);
  --ds-glow-strong: 0 0 36px rgba(11, 111, 224, 0.28);
  --ds-shadow: 0 18px 50px rgba(20, 40, 100, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-ease: linear;
  }
}