/*
  China Mall Ghana — THEME
  ==================================================================
  Every colour on the site is defined in this one file.
  1. BRAND COLOURS  – the main colours.
  2. SHADES         – lighter / darker / see-through versions of them.
  3. ROLES          – which colour each part of the site uses.

  To adjust a colour, change it in section 1. If you change the red or
  green of the wave stripe, also update the two hex codes inside
  --wave-img (section 2), because an image cannot read CSS variables.
*/

/* ---------- 1. BRAND COLOURS ---------- */
:root {
  --cm-navy: #232A3B;         /* the building wall: header and banner */
  --cm-navy-deep: #171C28;    /* darkest navy: top bar, footer, main text */
  --cm-white: #FFFFFF;        /* page background */
  --cm-red: #C0161F;          /* buttons, wave stripe */
  --cm-gold: #D9A90C;         /* notes and the MoMo tag only */
  --cm-gold-bright: #F2C230;
  --cm-green: #1C7A34;        /* wave stripe and the WhatsApp buttons only */
}

/* ---------- 2. SHADES ---------- */
:root {
  --cm-navy-soft: #323B52;                     /* search field and panels on navy */
  --cm-navy-glow: #46598A;                     /* lighter navy used for the banner glow */
  --cm-navy-line: rgba(255, 255, 255, .18);    /* hairlines on navy */
  --cm-navy-scrim: rgba(23, 28, 40, .72);      /* dialog / overlay backdrop */
  --cm-on-navy-muted: #C5CAD6;                 /* quiet text on navy */
  --cm-ink-soft: #505869;                      /* quiet text on white */
  --cm-grey: #F3F4F7;                          /* soft panels, image backgrounds */
  --cm-grey-line: #DCDFE6;                     /* hairlines on white */
  --cm-grey-edge: #838A9A;                     /* form field borders */
  --cm-navy-wash: #E9ECF4;                     /* pale navy panel */
  --cm-navy-ring: rgba(35, 42, 59, .35);       /* hover glow */
  --cm-coral: #FF6B73;                         /* light red: highlights on navy */
  --cm-gold-wash: #FBF3D6;
  --cm-green-dark: #155E28;
  --cm-green-wash: #E3F3E7;
  --cm-red-dark: #9C1219;
  --shadow: 0 2px 10px rgba(23, 28, 40, .08);
  --shadow-strong: 0 10px 28px rgba(23, 28, 40, .24);

  /* Wave stripe: red above green, as on the building wall */
  --wave-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='28' viewBox='0 0 240 28' preserveAspectRatio='none' fill='none' stroke-width='7.5'%3E%3Cpath stroke='%23C0161F' d='M0 9 Q60 -1 120 9 T240 9'/%3E%3Cpath stroke='%231C7A34' d='M0 17 Q60 7 120 17 T240 17'/%3E%3C/svg%3E");
  /* Perforated wall-panel texture */
  --pattern-img: url("../assets/patterns/perforated.svg");
}

/* ---------- 3. ROLES ---------- */
:root {
  /* The white page */
  --bg: var(--cm-white);
  --bg-soft: var(--cm-grey);
  --surface: var(--cm-white);
  --surface-2: var(--cm-grey);
  --text: var(--cm-navy-deep);
  --muted: var(--cm-ink-soft);
  --line: var(--cm-grey-line);
  --heading: var(--cm-navy-deep);
  --link: var(--cm-navy);
  --price: var(--cm-navy-deep);
  --focus: var(--cm-navy);
  --error: var(--cm-red-dark);
  --success: var(--cm-green-dark);
  --success-bg: var(--cm-green-wash);
  --glow: var(--cm-navy-ring);
  --wash: var(--cm-navy-wash);
  --note-bg: var(--cm-gold-wash);
  --note-border: var(--cm-gold);

  /* The navy areas: top bar, header, banner, footer */
  --dark-bg: var(--cm-navy);
  --dark-bg-deep: var(--cm-navy-deep);
  --dark-surface: var(--cm-navy-soft);
  --dark-text: var(--cm-white);
  --dark-muted: var(--cm-on-navy-muted);
  --dark-line: var(--cm-navy-line);
  --dark-focus: var(--cm-white);
  --hero-bg: radial-gradient(90% 90% at 100% 100%, var(--cm-navy-glow) 0%, var(--cm-navy) 55%, var(--cm-navy-deep) 100%);
  --banner-bg: linear-gradient(110deg, var(--cm-navy-deep) 0%, var(--cm-navy) 60%, var(--cm-navy-glow) 100%);

  /* Parts that stay dark in every theme: top bar, footer, pop-up messages, admin bar */
  --deep-bg: var(--cm-navy-deep);
  --deep-surface: var(--cm-navy-soft);
  --deep-text: var(--cm-white);
  --deep-muted: var(--cm-on-navy-muted);
  --deep-line: var(--cm-navy-line);
  --deep-focus: var(--cm-white);
  --deep-accent: var(--cm-coral);

  /* Main buttons: red pills on the white page */
  --btn-bg: var(--cm-red);
  --btn-text: var(--cm-white);
  --btn-hover-bg: var(--cm-red-dark);
  /* Second button style: white with a navy outline */
  --btn2-bg: var(--cm-white);
  --btn2-text: var(--cm-navy-deep);
  --btn2-border: var(--cm-navy);
  /* Accent: light red pills and highlights, used on navy */
  --accent: var(--cm-coral);
  --accent-hover: var(--cm-white);
  --accent-text: var(--cm-navy-deep);

  --whatsapp: var(--cm-green);
  --whatsapp-hover: var(--cm-green-dark);
  --danger: var(--cm-red);
  --danger-hover: var(--cm-red-dark);
  --on-solid: var(--cm-white);       /* text on solid navy / green / red */
  --scrim: var(--cm-navy-scrim);

  --tag-gold: var(--cm-gold-bright);
  --tag-gold-text: var(--cm-navy-deep);

  --input-bg: var(--cm-white);
  --input-text: var(--cm-navy-deep);
  --input-border: var(--cm-grey-edge);

  /* Branch background photo */
  --photo-opacity: .07;
  --photo-blur: 2px;
  --tint-opacity: .05;
  --tint-navy: transparent;
  --tint-green: var(--cm-green);
  --tint-red: var(--cm-red);
  --tint-gold: var(--cm-gold);
  --pattern-opacity: .12;

  --wave-size: 12px;     /* height of the wave stripe */
  --radius: 14px;
  --radius-sm: 10px;
  --pill: 999px;
}