/* Crown & Mane Performance Golf: design tokens, light system.
   Measured from traintheden.com (the coaching website) so the app and the site read as one brand.
   Use the variables; don't hand-pick hexes. */

:root{
  /* ---- surfaces: warm cream page, beige bands, off-white cards ---- */
  --cm-ground:      #F3F0E8;   /* page background */
  --cm-raise:       #FBF8F2;   /* cards, panels, sheets */
  --cm-raise-2:     #E9E3D5;   /* alternating bands, hover, nested panels */
  --cm-line:        #DDD6C5;   /* hairlines and dividers */
  --cm-line-strong: rgba(47,66,87,.38);   /* outlined buttons and pills */

  /* ---- ink: deep navy for headings and numbers, warm grey for reading ---- */
  --cm-ink:         #2F4257;   /* headings, numbers, primary text (never black) */
  --cm-text:        #54534F;   /* body copy */
  --cm-dim:         #5C5A56;   /* secondary text */
  --cm-faint:       #67655F;   /* captions and small labels (still 4.5:1 on cream) */
  --cm-paper:       #F3F0E8;   /* light type on navy and terracotta */

  /* ---- terracotta: the one accent ---- */
  --cm-clay:        #C05E38;   /* borders, marks, large accents. Exactly the website's terracotta */
  --cm-clay-strong: #B85831;   /* solid button fill: a hair deeper so white type reads 4.7:1 in sun */
  --cm-clay-text:   #A24D2B;   /* small terracotta text on cream (5:1) */
  --cm-clay-deep:   #A24D2B;   /* pressed */
  --cm-clay-on-navy:#F0B999;   /* terracotta text on a navy band (5:1) */
  --cm-clay-light:  #D0916F;   /* soft accents */
  --cm-rust:        #9F4025;   /* the lion's own colour: use beside the logo */
  --cm-clay-wash:   rgba(192,94,56,.10);   /* tint fills, avatar grounds */

  /* ---- navy: an occasional full-width band with light text ---- */
  --cm-navy:        #2F4257;
  --cm-band:        #364E64;   /* the website's navy band */
  --cm-slate:       #425A73;
  --cm-navy-ink:    #0B121C;   /* logo script navy: print only */
  --cm-cream:       #E9E3D5;   /* paper surfaces, logo backing */
  --cm-bone:        #F3F0E8;   /* light type on dark bands */

  /* ---- status: text-strength shades on light, fills a step brighter. Always paired with a number or a word ---- */
  --cm-red:         #B4432F;   /* fills, bands */
  --cm-amber:       #C9922F;
  --cm-green:       #5F8F63;
  --cm-red-ink:     #A23A28;   /* text on light */
  --cm-amber-ink:   #7E5A12;
  --cm-green-ink:   #3A6A40;

  /* ---- type ---- */
  --cm-font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cm-font-display: "Barlow Condensed", "Barlow", sans-serif;   /* labels, buttons, every number */
  --cm-font-serif:   "Fraunces", Georgia, serif;                 /* headlines (bold, uppercase) and italic accent words */

  /* ---- shape ---- */
  --cm-space-1: 4px;  --cm-space-2: 8px;  --cm-space-3: 12px;
  --cm-space-4: 16px; --cm-space-5: 24px; --cm-space-6: 32px;
  --cm-radius:  10px;              /* cards */
  --cm-radius-sm: 3px;             /* buttons */
  --cm-radius-in: 6px;             /* inputs */
  --cm-shadow:  0 1px 2px rgba(47,66,87,.06), 0 8px 24px rgba(47,66,87,.07);   /* soft card shadow */
  --cm-rule: 1px solid var(--cm-line);
}