/* ================================================================
   Chiller Whale Games — THEME
   ----------------------------------------------------------------
   Every colour, font and shape on the site comes from this file.
   To rebrand: change the values below and replace logo-mark.png /
   logo-full.png / favicon.png. Nothing else needs to change.

   Brand palette from Patty (2026-09-27):
     #6c96ac  whale blue      #5e7c89  deep slate
     #d4e7ec  pale sea        #ffbcd9  blush pink
   The two blues are too light for small text on white (3.2:1 and
   4.45:1, where 4.5:1 is needed), so links and small text use darker
   shades of the slate. The originals are used for surfaces and accents.
   ================================================================ */

:root {
  /* Brand colours */
  --brand:        #44616d;   /* links, small text: Patty's slate, darkened for contrast */
  --brand-deep:   #3d5864;   /* hover, header text */
  --brand-mid:    #6c96ac;   /* Patty's whale blue: decorative accents */
  --brand-soft:   #d4e7ec;   /* Patty's pale sea: header, tints */
  --accent:       #ffbcd9;   /* Patty's blush pink: badges, highlights */
  --on-accent:    #3d3440;   /* text on pink */

  /* Header */
  --header-bg:    var(--brand-soft);
  --header-text:  var(--brand-deep);

  /* Surfaces and text (light mode) */
  --bg:           #f6fafb;   /* page background */
  --surface:      #ffffff;   /* cards */
  --text:         #22343c;   /* body text */
  --text-muted:   #53707c;   /* secondary text */
  --border:       #d4e7ec;
  --border-strong: #9fbdca;  /* outline pills */

  /* Type */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);   /* headings / wordmark; swap for a brand font */

  /* Shape */
  --radius:       18px;      /* cards */
  --radius-small: 12px;      /* buttons, icons */
  --shadow:       0 2px 12px rgba(94, 124, 137, .10);

  /* Logo */
  --logo-height:  44px;      /* header whale */
  --hero-logo-width: 380px;  /* full logo on the home page */
}

/* Dark mode: same token names, darker values */
@media (prefers-color-scheme: dark) {
  :root {
    --brand:       #8fb7c9;
    --brand-deep:  #b5d2de;
    --brand-soft:  #1f323a;
    --header-bg:   #1a2a31;
    --header-text: #d4e7ec;
    --bg:          #111c21;
    --surface:     #18262c;
    --text:        #e6f0f3;
    --text-muted:  #9fb9c4;
    --border:      #25383f;
    --border-strong: #4b6873;
    --shadow:      none;
  }
}