/*
 * Meonata brand system
 * Machine-readable source of truth for public website and internal brand tools.
 */

:root {
  color-scheme: dark;

  /* Typography */
  --font-logo: "Wallpoet", ui-sans-serif, sans-serif;
  --font-heading: "Space Grotesk", "Segoe UI", ui-sans-serif, sans-serif;
  --font-body: "Inter", "Segoe UI", ui-sans-serif, sans-serif;
  --font-nav: var(--font-body);
  --font-tech: "IBM Plex Mono", "Cascadia Mono", ui-monospace, monospace;
  --font-mono: var(--font-tech);

  --type-label: 0.75rem;
  --type-small: 0.875rem;
  --type-body: 1rem;
  --type-body-large: 1.125rem;
  --type-heading-3: clamp(1.25rem, 1.8vw, 1.5rem);
  --type-heading-2: clamp(1.75rem, 3vw, 2.5rem);
  --type-heading-1: clamp(2rem, 4vw, 3rem);
  --type-display: clamp(2.35rem, 4.8vw, 4rem);
  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.68;
  --tracking-heading: -0.025em;
  --tracking-label: 0.12em;
  --measure-body: 70ch;
  --measure-hero: 42ch;

  /* Four-pixel spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* Shape, line and elevation */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-round: 999px;
  --border-1: 1px;
  --border-2: 2px;
  --max-w: 1040px;
  --brand-shadow-sm: 0 8px 24px var(--brand-shadow-color);
  --brand-shadow-md: 0 18px 48px var(--brand-shadow-color);
  --brand-shadow-lg: 0 28px 72px var(--brand-shadow-color);
  --brand-focus-shadow: 0 0 0 3px var(--brand-focus-ring);
  --brand-card-surface: color-mix(in srgb, var(--brand-surface-0) 78%, transparent);
  --brand-card-backdrop: blur(14px) saturate(125%);
  --brand-scene-grid-minor-alpha: 0.092;
  --brand-scene-grid-major-alpha: 0.145;
  --brand-scene-grid-scroll-boost: 1.35;
  --brand-scene-mask-floor: 0.28;

  /* Functional and official mark colors */
  --brand-danger: #ffb4b4;
  --brand-linkedin: #0a66c2;
  --mark-de-black: #111827;
  --mark-de-red: #dc2626;
  --mark-de-gold: #facc15;
  --mark-eu-blue: #1d4ed8;
  --mark-eu-gold: #facc15;
}

/* Signal Cyan is the public default and the fallback without data-theme. */
:root,
:root[data-theme="signal-cyan"] {
  --brand-bg-canvas: #050b14;
  --brand-bg-deep: #071827;
  --brand-surface-0: #0b1a28;
  --brand-surface-1: #102638;
  --brand-text-primary: #f2f8fc;
  --brand-text-secondary: #adc1cd;
  --brand-text-inverse: #031018;
  --brand-accent: #2cd5e4;
  --brand-accent-strong: #72e7ef;
  --brand-accent-hover: #55e0eb;
  --brand-accent-soft: rgba(44, 213, 228, 0.14);
  --brand-depth-accent: #4c7dff;
  --brand-depth-accent-strong: #86a9ff;
  --brand-depth-accent-soft: rgba(76, 125, 255, 0.16);
  --brand-line-soft: rgba(173, 193, 205, 0.2);
  --brand-line-strong: rgba(242, 248, 252, 0.32);
  --brand-focus-ring: rgba(114, 231, 239, 0.5);
  --brand-shadow-color: rgba(0, 5, 12, 0.42);
  --brand-shadow-strong-color: rgba(0, 5, 12, 0.62);
  --brand-overlay: rgba(3, 16, 24, 0.72);
  --brand-page-gradient: linear-gradient(180deg, #050b14 0%, #071827 100%);
  --brand-ambient-glow: radial-gradient(circle at 16% 4%, rgba(44, 213, 228, 0.14) 0%, rgba(44, 213, 228, 0) 56%);
  --brand-neural-line: rgba(72, 204, 219, 0.32);
  --brand-neural-glow: rgba(114, 231, 239, 0.52);
  --brand-neural-node: rgba(196, 248, 252, 0.82);
}

:root[data-theme="electric-blue"] {
  --brand-bg-canvas: #080a0f;
  --brand-bg-deep: #0d1119;
  --brand-surface-0: #121824;
  --brand-surface-1: #192438;
  --brand-text-primary: #f1f5fb;
  --brand-text-secondary: #b5c0cf;
  --brand-text-inverse: #050914;
  --brand-accent: #4c7dff;
  --brand-accent-strong: #86a9ff;
  --brand-accent-hover: #6e96ff;
  --brand-accent-soft: rgba(76, 125, 255, 0.16);
  --brand-depth-accent: #2cd5e4;
  --brand-depth-accent-strong: #72e7ef;
  --brand-depth-accent-soft: rgba(44, 213, 228, 0.14);
  --brand-line-soft: rgba(181, 192, 207, 0.2);
  --brand-line-strong: rgba(241, 245, 251, 0.32);
  --brand-focus-ring: rgba(134, 169, 255, 0.52);
  --brand-shadow-color: rgba(0, 2, 8, 0.46);
  --brand-shadow-strong-color: rgba(0, 2, 8, 0.64);
  --brand-overlay: rgba(5, 9, 20, 0.74);
  --brand-page-gradient: linear-gradient(180deg, #080a0f 0%, #0d1119 100%);
  --brand-ambient-glow: radial-gradient(circle at 16% 4%, rgba(76, 125, 255, 0.16) 0%, rgba(76, 125, 255, 0) 56%);
  --brand-neural-line: rgba(102, 143, 255, 0.32);
  --brand-neural-glow: rgba(134, 169, 255, 0.54);
  --brand-neural-node: rgba(211, 222, 255, 0.84);
}