/* =========================================================================
   CROWN MX — Colors & Typography
   Übernommen aus dem Crown MX Design System (colors_and_type.css).
   Einzige Quelle der Wahrheit für Brand-Tokens.
   ========================================================================= */

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Falcon";
  src: url("../assets/fonts/Falcon.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === BRAND ========================================================== */
  --crown-white:    #FFFFFF;
  --crown-black:    #000000;
  --crown-gold:     #CDA44A;       /* PANTONE 7407 C */

  --gold-50:  #FBF4E2;
  --gold-100: #F2E1B1;
  --gold-200: #E6C97D;
  --gold-300: #DBB55A;
  --gold-400: #CDA44A;
  --gold-500: #B58D38;
  --gold-600: #8E6D27;
  --gold-700: #5F4818;
  --gold-800: #3A2D10;
  --gold-900: #1E170A;

  --ink-0:   #FFFFFF;
  --ink-50:  #F5F5F5;
  --ink-100: #E5E5E5;
  --ink-200: #C8C8C8;
  --ink-300: #8E8E8E;
  --ink-400: #5C5C5C;
  --ink-500: #2F2F2F;
  --ink-600: #1A1A1A;
  --ink-700: #111111;
  --ink-800: #0A0A0A;
  --ink-900: #000000;

  --signal-green: #18C964;
  --signal-red:   #E11D2A;
  --signal-amber: #F2A900;

  /* === SURFACES ======================================================= */
  --bg:        var(--crown-black);
  --bg-elev-1: var(--ink-700);
  --bg-elev-2: var(--ink-600);
  --bg-elev-3: var(--ink-500);

  --fg-1: var(--crown-white);
  --fg-2: var(--ink-200);
  --fg-3: var(--ink-300);
  --fg-4: var(--ink-400);

  --accent:       var(--crown-gold);
  --accent-hover: var(--gold-300);
  --accent-press: var(--gold-500);
  --accent-soft:  rgba(205, 164, 74, 0.14);
  --accent-glow:  rgba(205, 164, 74, 0.30);

  --border-1:      rgba(255, 255, 255, 0.08);
  --border-2:      rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.32);
  --border-gold:   rgba(205, 164, 74, 0.50);

  /* === TYPE =========================================================== */
  --font-display: "Falcon", "Space Grotesk", system-ui, sans-serif;
  --font-sans:    "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, monospace;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.04em;
  --tracking-mega:  0.18em;

  /* === RADII / SHADOWS ================================================ */
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 8px;
  --r-4: 14px;
  --r-pill: 9999px;

  --shadow-2: 0 8px 24px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-3: 0 20px 50px rgba(0,0,0,0.65);
  --glow-gold: 0 0 0 1px rgba(205,164,74,0.45), 0 0 24px rgba(205,164,74,0.35);

  /* === MOTION ========================================================= */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Ring-Shortcuts (im Design als inset-Shadow verwendet) */
  --ring-1: inset 0 0 0 1px var(--border-1);
  --ring-2: inset 0 0 0 1px var(--border-2);
  --ring-gold: inset 0 0 0 1px var(--border-gold);
}