/* Recomp Yourself - Design-Tokens.
   Quelle der Wahrheit: Recomp OS, recomp_planer_theme.dart ("Luxury Dark Mode").
   Nur hier Farben, Schriften, Radien, Abstaende definieren. Sektionen und Mockups
   verwenden ausschliesslich diese Variablen. */

@font-face{font-family:'Lora Fallback';src:local('Georgia');size-adjust:104%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  /* Grund */
  --bg:#14161B;
  --bg-2:#1E222D;        /* Verlauf Start (oben links) */
  --bg-3:#0A0C11;        /* Verlauf Ende (unten rechts) */
  --surface:#26282E;     /* Karten */
  --surface-2:#2E3138;   /* Inputs, erhoehte Flaechen */

  /* Gold - selten und verdient */
  --gold:#EED49E;
  --gold-light:#F7E6C4;
  --gold-muted:#B8A67E;
  --on-gold:#14161B;

  /* Text */
  --text:#F3F4F6;
  --text-2:#B8BDCA;
  --text-3:#6B7280;

  /* Linien */
  --line:#2A2E36;
  --line-2:rgba(255,255,255,.08);
  --line-gold:rgba(238,212,158,.3);

  /* Status und Feature-Akzente ("rooms in the same house") */
  --success:#4ADE80;
  --success-surface:#1D3D2E;
  --warning:#F97316;
  --danger:#EF4444;
  --amber:#F59E0B;
  --teal:#26A69A;        /* Training */
  --blue:#8AABCC;        /* Community, Classroom, Notizen */
  --aurora-blue:#3B82F6;
  --aurora-purple:#8B5CF6;

  /* Glas - nur Nav und Chevron-Kreise */
  --glass:rgba(255,255,255,.05);
  --glass-border:rgba(255,255,255,.08);
  --glass-hover:rgba(255,255,255,.10);

  /* Glow */
  --gold-glow:0 0 8px rgba(238,212,158,.6), 0 0 16px -1px rgba(238,212,158,.35);
  --gold-glow-soft:0 0 4px rgba(238,212,158,.25);
  --gold-glow-cta:0 10px 30px -10px rgba(238,212,158,.55);

  /* Schrift */
  --ff-display:'Lora','Lora Fallback',Georgia,serif;
  --ff-body:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;

  /* Radien (App: 8/12/16/24, Pill 999) */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* Abstaende (App-Skala 4..40, dazu Seiten-Skala 48..128) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:96px; --sp-12:128px;

  /* Layout */
  --page-max:1180px;
  --gut:clamp(20px,4vw,40px);
  --measure:65ch;
  --measure-narrow:52ch;
  --nav-h:64px;

  /* Motion */
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms; --dur-enter:900ms;

  /* Telefonrahmen */
  --phone-w:380px; --phone-h:780px; --phone-scale:.78;
}
@media (min-width:600px){:root{--phone-scale:.9}}
@media (min-width:900px){:root{--phone-scale:1}}