/* ============================================================
   Apollo Kino Cochem — Design System
   colors_and_type.css
   Foundational + semantic tokens for typography and color.
   Load AFTER the Google Fonts <link> for Quicksand, Montserrat & Caveat.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* ---------- BRAND CORE ---------- */
  --burgundy:        #7B002C;  /* primary — backgrounds, headers, footers */
  --burgundy-deep:   #56001F;  /* darker fill, shadows in burgundy family */
  --burgundy-ink:    #2A0010;  /* deepest wine, near-black accents */
  --red:             #8E0014;  /* showtime chips / active schedule cells */
  --red-bright:      #C20022;  /* glow accent on dark variant */
  --yellow-special:  #F7C948;  /* "special" / event highlight */

  /* ---------- LOGO COUNTER ACCENTS (playful set) ---------- */
  --apollo-orange:   #F06019;
  --apollo-green:    #A5CA3E;
  --apollo-magenta:  #A91B89;
  --apollo-yellow:   #FCB118;

  /* ---------- NEUTRALS ---------- */
  --ink:        #141012;  /* primary text & "black" chips */
  --paper:      #FFFFFF;  /* clean white surface */
  --paper-warm: #F6F1EC;  /* warm off-white — the editorial canvas */
  --bg-app:     #EFEAE6;  /* app shell background */
  --grey:       #8A8189;  /* muted text, captions */
  --muted:      #7D7480;  /* secondary UI text */
  --line:       #E7DEE2;  /* hairline borders on light */
  --line-warm:  #E7E0E3;  /* hairline on app surfaces */

  /* ---------- TEXT ROLES ---------- */
  --fg1: var(--ink);      /* primary text */
  --fg2: var(--grey);     /* secondary / supporting text */
  --fg-on-burgundy: #FFFFFF;
  --fg-on-burgundy-soft: rgba(255,255,255,.85);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Quicksand', sans-serif;   /* headings, logo wordmark, numbers */
  --font-body:    'Montserrat', sans-serif;  /* body, labels, captions */
  --font-script:  'Caveat', cursive;         /* handwritten accents, "weiter →" */

  /* ---------- RADII ---------- */
  --r-chip:   10px;   /* small chips / tags */
  --r-card:   20px;   /* tiles & cards */
  --r-field:  14px;   /* inputs, meta chips */
  --r-pill:   999px;  /* pills, date badges */
  --r-poster: 9px;    /* poster thumbnails */

  /* ---------- SHADOWS ---------- */
  --shadow-card:   0 18px 40px rgba(86,0,31,.13);
  --shadow-poster: 0 14px 30px rgba(86,0,31,.28);
  --shadow-pop:    0 30px 60px rgba(86,0,31,.28);
  --shadow-soft:   0 6px 18px rgba(86,0,31,.20);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur:  .16s;
}

/* ============================================================
   SEMANTIC TYPE — opt-in classes mirroring the product
   ============================================================ */
.ds-eyebrow{
  font-family:var(--font-display); font-weight:700;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--burgundy);
}
.ds-h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,6vw,64px); line-height:1.0; letter-spacing:-.02em;
  color:var(--fg1);
}
.ds-h2{
  font-family:var(--font-display); font-weight:700;
  font-size:32px; line-height:1.05; letter-spacing:-.02em; color:var(--fg1);
}
.ds-h3{
  font-family:var(--font-display); font-weight:700;
  font-size:23px; line-height:1.1; letter-spacing:-.01em; color:var(--fg1);
}
.ds-display{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(64px,11vw,120px); line-height:.86; letter-spacing:-.04em;
  color:var(--fg1);
}
.ds-body{
  font-family:var(--font-body); font-weight:500;
  font-size:16px; line-height:1.55; color:var(--fg1); text-wrap:pretty;
}
.ds-caption{
  font-family:var(--font-body); font-weight:500;
  font-size:14px; line-height:1.5; color:var(--fg2);
}
.ds-label{
  font-family:var(--font-body); font-weight:600;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
}
.ds-script{
  font-family:var(--font-script); font-weight:700;
  font-size:40px; line-height:1; color:var(--burgundy);
}

/* ---------- LOGO WORDMARK (recreated in Quicksand) ---------- */
.ds-logo{ display:inline-flex; flex-direction:column; line-height:1; }
.ds-logo .word{
  font-family:var(--font-display); font-weight:700;
  font-size:64px; letter-spacing:-.04em; color:currentColor;
}
.ds-logo .tag{
  font-family:var(--font-body); font-weight:600;
  font-size:16px; letter-spacing:.46em; text-transform:uppercase;
  margin-top:6px; padding-left:4px; color:currentColor;
}