/* YAMI Guard Design System – Tokens
   Übernommen aus tokens/colors.css, typography.css, spacing.css, effects.css und base.css.
   Schriften werden in index.html geladen, nicht hier. */

:root{
  /* Base – neutrals */
  --yg-black:#05090D;
  --yg-ink-900:#070C11;
  --yg-ink-850:#0A1117;
  --yg-ink-800:#0E171F;
  --yg-ink-700:#142029;
  --yg-ink-600:#1B2A35;
  --yg-ink-500:#263844;
  --yg-ink-400:#3A4E5B;
  --yg-gray-400:#6B7D89;
  --yg-gray-300:#8C9CA7;
  --yg-gray-200:#B4C1CA;
  --yg-gray-100:#DCE4E9;
  --yg-white:#FFFFFF;
  /* Base – turquoise (brand) */
  --yg-teal-50:#E6FDFE;
  --yg-teal-200:#9BF5FA;
  --yg-teal-300:#5FEEF6;
  --yg-teal-400:#22E6F2;
  --yg-teal-500:#0FB8CC;
  --yg-teal-600:#0A8FA0;
  --yg-teal-700:#086572;
  --yg-teal-900:#06262C;
  /* Base – status */
  --yg-red-400:#FF5C63;
  --yg-red-900:#2A0E12;
  --yg-amber-400:#FFB84A;
  --yg-amber-900:#2A1E0B;
  --yg-green-400:#3EE39B;
  --yg-green-900:#0B2519;

  /* Semantic – surfaces */
  --surface-page:var(--yg-black);
  --surface-sunken:#03060A;
  --surface-card:var(--yg-ink-850);
  --surface-raised:var(--yg-ink-800);
  --surface-hover:var(--yg-ink-700);
  --surface-input:var(--yg-ink-900);
  --surface-overlay:rgba(3,6,10,.72);
  --surface-accent-tint:rgba(34,230,242,.08);
  --surface-accent-tint-strong:rgba(34,230,242,.14);
  /* Semantic – text */
  --text-strong:var(--yg-white);
  --text-body:var(--yg-gray-100);
  --text-muted:var(--yg-gray-300);
  --text-subtle:var(--yg-gray-400);
  --text-accent:var(--yg-teal-400);
  --text-on-accent:var(--yg-black);
  /* Semantic – borders */
  --border-subtle:var(--yg-ink-600);
  --border-default:var(--yg-ink-500);
  --border-strong:var(--yg-ink-400);
  --border-accent:var(--yg-teal-400);
  --border-accent-soft:rgba(34,230,242,.35);
  /* Semantic – accent */
  --accent:var(--yg-teal-400);
  --accent-hover:var(--yg-teal-300);
  --accent-press:var(--yg-teal-500);
  --accent-deep:var(--yg-teal-500);
  /* Semantic – status */
  --status-danger:var(--yg-red-400);
  --status-danger-bg:var(--yg-red-900);
  --status-warning:var(--yg-amber-400);
  --status-warning-bg:var(--yg-amber-900);
  --status-success:var(--yg-green-400);
  --status-success-bg:var(--yg-green-900);
  --status-info:var(--yg-teal-400);
  --status-info-bg:var(--yg-teal-900);
  --focus-ring:0 0 0 2px var(--yg-black),0 0 0 4px var(--yg-teal-400);

  /* Typography */
  --font-display:'Russo One','Exo 2',system-ui,sans-serif;
  --font-heading:'Exo 2',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-display-xl:72px;
  --fs-display-lg:56px;
  --fs-display-md:40px;
  --fs-h1:32px;
  --fs-h2:24px;
  --fs-h3:20px;
  --fs-h4:17px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:12px;
  --fs-overline:12px;
  --lh-tight:1.05;
  --lh-heading:1.2;
  --lh-body:1.6;
  --lh-snug:1.4;
  --ls-display:.01em;
  --ls-overline:.14em;

  /* Spacing, radii, layout */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
  --radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
  --container-max:1200px;--container-narrow:760px;--gutter:24px;
  --control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px;

  /* Glow – sparsam: Primär-Button, Logo, ein Schlüsselelement pro Ansicht */
  --glow-sm:0 0 10px rgba(34,230,242,.35);
  --glow-md:0 0 18px rgba(34,230,242,.45),0 0 2px rgba(34,230,242,.9);
  --glow-lg:0 0 40px rgba(34,230,242,.35),0 0 12px rgba(34,230,242,.5);
  --glow-text:0 0 18px rgba(34,230,242,.55);
  --glow-danger:0 0 16px rgba(255,92,99,.35);
  /* Elevation */
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px rgba(0,0,0,.6);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.04);
  /* Backdrops */
  --bg-halo:radial-gradient(60% 50% at 50% 0%,rgba(34,230,242,.12) 0%,rgba(34,230,242,0) 70%);
  --bg-grid:linear-gradient(rgba(34,230,242,.04) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(34,230,242,.04) 1px,transparent 1px) 0 0/48px 48px;
  /* Motion */
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:360ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.6,0,.3,1);
}

html,body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;}
a{color:var(--text-accent);text-decoration:none;}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px;}
::selection{background:rgba(34,230,242,.3);color:#fff;}