/* ============================================================
   Cielonoveno Design System — Colors & Type
   (übernommen aus komm_C9/cielonoveno-design-system)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Big+Shoulders+Display:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND ACCENTS ---------- */
  --cn-violet:    #7B6CCF;
  --cn-magenta:   #E04A8E;
  --cn-olive:     #7C8B3E;
  --cn-turquoise: #5BB8C9;
  --cn-lime:      #9BC53D;
  --cn-purple:    #9B6BD1;
  --cn-amber:     #E8A24A;
  --cn-blush:     #E8857B;
  --cn-sky:       #6FA3D9;
  --cn-sand:      #C9A56B;
  --cn-indigo:    #4F4FAE;
  --cn-rust:      #C75A3F;

  --cn-amber-tint:     #F8E8D0;
  --cn-rust-tint:      #F4DAD2;
  --cn-sand-tint:      #EFE2CB;

  /* ---------- NEUTRALS ---------- */
  --cn-ink:        #0F0F0F;
  --cn-graphite:   #2A2A2A;
  --cn-stone:      #6B6B6B;
  --cn-fog:        #B5B5B5;
  --cn-mist:       #DCDCDC;
  --cn-paper:      #F2F1ED;
  --cn-white:      #FFFFFF;

  /* ---------- SEMANTIC TOKENS ---------- */
  --fg-1: var(--cn-ink);
  --fg-2: var(--cn-graphite);
  --fg-3: var(--cn-stone);
  --fg-onband: var(--cn-white);

  --bg-1: var(--cn-paper);
  --bg-2: var(--cn-mist);
  --bg-card: var(--cn-white);

  /* Café-Akzent: warmes Kaffee-Rostrot */
  --accent:      var(--cn-rust);
  --accent-soft: var(--cn-rust-tint);
  --accent-2:    var(--cn-amber);

  --border-1: var(--cn-mist);
  --border-strong: var(--cn-ink);

  /* ---------- TYPE FACES ---------- */
  --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-wordmark: 'Big Shoulders Display', 'Brandon Grotesque', 'Montserrat', sans-serif;
  --font-body:    'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-hero:   clamp(56px, 9vw, 144px);
  --fs-title:  clamp(40px, 6vw, 88px);
  --fs-h1:     clamp(32px, 4vw, 56px);
  --fs-h2:     clamp(24px, 3vw, 36px);
  --fs-h3:     20px;
  --fs-body:   16px;
  --fs-meta:   14px;
  --fs-micro:  12px;

  --lh-tight:  0.92;
  --lh-snug:   1.05;
  --lh-body:   1.45;

  --tracking-display: 0.01em;
  --tracking-meta:    0.04em;
  --tracking-wide:    0.18em;

  /* ---------- SPACING ---------- */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  24px; --sp-6:  32px; --sp-7:  48px; --sp-8:  64px; --sp-9:  96px;

  /* ---------- RADII ---------- */
  --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 8px;

  /* ---------- ELEVATION ---------- */
  --shadow-sticker: 2px 4px 0 rgba(0, 0, 0, 0.18);
  --shadow-card:    0 1px 2px rgba(15, 15, 15, 0.06), 0 4px 16px rgba(15, 15, 15, 0.06);
  --shadow-hover:   0 2px 4px rgba(15, 15, 15, 0.08), 0 8px 24px rgba(15, 15, 15, 0.10);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

html { color: var(--fg-1); background: var(--bg-1); }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }