/* MelodyReel design tokens, the single source for colour, type, spacing.
   The app (React Native) mirrors these values; change them here first. */
:root {
  /* ground & ink */
  --cream:      #16131C;  /* app background */
  --surface:    #1E1A26;  /* cards, sheets */
  --surface-2:  #272130;  /* tinted rows, empty states */
  --ink:        #F6F1EA;  /* primary text */
  --ink-muted:  #A79FB0;  /* secondary text (4.6:1 on cream) */
  --line:       #332C3D;  /* hairlines, borders */

  /* brand */
  --coral:      #FF6A52;  /* primary actions, white text on it */
  --coral-lite: #FF8A75;  /* decorative blocks, gradients, never text bg */
  --coral-tint: #3A1F1C;  /* selected rows, badges */
  --danger:     #FF5C7A;  /* destructive only. Deeper and cooler than coral, never used for a primary action */
  --danger-tint:#38141F;
  --sun:        #FFD04F;  /* highlights, credits, celebration, ink text on it */
  --sun-ink:    #1A1626;
  --sun-tint:   #FFD04F;

  /* status */
  --ok:         #5BD08C;  --ok-tint:   #17321F;
  --warn:       #F0B450;  --warn-tint: #352712;
  --err:        #FF7566;  --err-tint:  #3A1A18;

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --t-display: 34px/1.1 var(--font-display);
  --t-screen:  28px/1.1 var(--font-display);   /* screen titles, the step between display and title */
  --t-title:   24px/1.2 var(--font-display);
  --t-heading: 18px/1.3 var(--font-ui);
  --t-body:    16px/1.5 var(--font-ui);
  --t-small:   14px/1.45 var(--font-ui);
  --t-micro:   12px/1.4 var(--font-ui);

  /* space (4pt scale) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* shape */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* elevation, soft and warm, never grey */
  --e1: 0 1px 2px rgba(0, 0, 0, .4);
  --e2: 0 4px 16px rgba(0, 0, 0, .45);
  --e3: 0 12px 32px rgba(0, 0, 0, .55);

  /* primary button (D-016, revised: flat, one shadow) */
  --btn-grad: #E14733;
  --btn-glow: 0 6px 16px rgba(0, 0, 0, .5);
  --btn-glow-light: 0 2px 8px rgba(0, 0, 0, .35);

  /* scrims over photography */
  --scrim-chip: rgba(26, 22, 38, .66);
  --scrim-strong: rgba(26, 22, 38, .55);

  /* motion */
  --fast: 140ms cubic-bezier(.2, .8, .3, 1);
  --base: 240ms cubic-bezier(.2, .8, .3, 1);

  /* layout */
  --tap-min: 44px;        /* minimum touch target */
  --gutter: 20px;         /* screen side padding */

}

/* D-088: the app is always dark. The dark values are the base above; the light palette is retired. */