/* ChangeItNow Cloud — Design-Tokens.
   Branding zentral: Farben, Radien, Schatten und Schrift werden ausschliesslich
   hier festgelegt. Wer das Erscheinungsbild aendern will, aendert diese Datei —
   nicht die Komponenten.

   Bewusst NICHT uebernommen: die Farbwelt und das Logo der VFX Cloud.
   Akzent ist ein tiefes Petrol, klar unterscheidbar vom VFX-Navy. */

/* New Order (Miles Newlyn) — selbst gehostet, keine externe Verbindung.
   Aus den gelieferten OTF-Dateien erzeugt mit `node scripts/convert-fonts.js`. */
@font-face { font-family:'New Order'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/neworder-300.woff2') format('woff2'); }
@font-face { font-family:'New Order'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/neworder-400.woff2') format('woff2'); }
@font-face { font-family:'New Order'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/neworder-500.woff2') format('woff2'); }
@font-face { font-family:'New Order'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/neworder-600.woff2') format('woff2'); }
@font-face { font-family:'New Order'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/neworder-700.woff2') format('woff2'); }

/* Inter bleibt als Rueckfallebene: falls ein Schnitt fehlt oder eine
   Schriftdatei nicht laedt, bleibt die Oberflaeche gut lesbar. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/inter-700.woff2') format('woff2'); }

:root, :root[data-theme="light"] {
  /* Flaechen */
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-2: #eef2f3;
  --fill: rgba(13, 42, 45, .05);
  --fill-2: rgba(13, 42, 45, .09);
  --border: rgba(13, 42, 45, .12);
  --border-strong: rgba(13, 42, 45, .22);

  /* Text */
  --text: #10262a;
  --muted: #55686c;

  /* Marke */
  --accent: #0f5257;
  --accent-hover: #14666c;
  --accent-text: #ffffff;
  --accent-soft: rgba(15, 82, 87, .10);

  /* Zustaende */
  --danger: #b23c2e;
  --danger-soft: rgba(178, 60, 46, .10);
  --ok: #2c6f52;
  --ok-soft: rgba(44, 111, 82, .12);
  --warn: #8a6116;
  --warn-soft: rgba(138, 97, 22, .12);

  /* Form */
  --radius: 14px;
  --radius-s: 9px;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgba(13, 42, 45, .05), 0 4px 12px -8px rgba(13, 42, 45, .18);
  --shadow: 0 1px 2px rgba(13, 42, 45, .04), 0 10px 28px -16px rgba(13, 42, 45, .22);
  --shadow-lg: 0 20px 50px -24px rgba(13, 42, 45, .34);

  /* Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --speed: .18s;

  --font: 'New Order', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Dunkle Variante: folgt dem Geraet, laesst sich aber manuell uebersteuern. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1618;
    --surface: #122023;
    --surface-2: #182c30;
    --fill: rgba(255, 255, 255, .06);
    --fill-2: rgba(255, 255, 255, .11);
    --border: rgba(255, 255, 255, .13);
    --border-strong: rgba(255, 255, 255, .24);
    --text: #e8eff0;
    --muted: #9aacaf;
    --accent: #4fa8ae;
    --accent-hover: #67bcc2;
    --accent-text: #06211f;
    --accent-soft: rgba(79, 168, 174, .16);
    --danger: #e2796a;
    --danger-soft: rgba(226, 121, 106, .16);
    --ok: #63bb92;
    --ok-soft: rgba(99, 187, 146, .16);
    --warn: #d9ab5a;
    --warn-soft: rgba(217, 171, 90, .16);
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 12px -8px rgba(0, 0, 0, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -18px rgba(0, 0, 0, .65);
    --shadow-lg: 0 22px 52px -24px rgba(0, 0, 0, .72);
  }
}

:root[data-theme="dark"] {
  --bg: #0b1618;
  --surface: #122023;
  --surface-2: #182c30;
  --fill: rgba(255, 255, 255, .06);
  --fill-2: rgba(255, 255, 255, .11);
  --border: rgba(255, 255, 255, .13);
  --border-strong: rgba(255, 255, 255, .24);
  --text: #e8eff0;
  --muted: #9aacaf;
  --accent: #4fa8ae;
  --accent-hover: #67bcc2;
  --accent-text: #06211f;
  --accent-soft: rgba(79, 168, 174, .16);
  --danger: #e2796a;
  --danger-soft: rgba(226, 121, 106, .16);
  --ok: #63bb92;
  --ok-soft: rgba(99, 187, 146, .16);
  --warn: #d9ab5a;
  --warn-soft: rgba(217, 171, 90, .16);
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 12px -8px rgba(0, 0, 0, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -18px rgba(0, 0, 0, .65);
  --shadow-lg: 0 22px 52px -24px rgba(0, 0, 0, .72);
}