/* =====================================================================
   Theme — every colour used by the app lives here.
   Change values in this file to re-skin the app; layout and behaviour
   live in index.html and never need touching for a colour change.

   PropertyPerform brand: brilliant white canvas, white cards that float
   on soft shadows, dark neutral text, deep plum (#501840) as the primary accent
   and soft lavender-grey (#9088A8) as the secondary. Green income and
   red expenses stay as functional colours.

   The "-rgb" tokens hold bare R, G, B channels so translucent tints
   (rgba(var(--x-rgb), alpha)) follow the base colour automatically.

   Note: the browser toolbar colour is set by <meta name="theme-color">
   in index.html and manifest.webmanifest (they can't read CSS
   variables) — keep them in sync with --bg.
   ===================================================================== */
:root {
  /* ---------- Brand palette ---------- */
  --plum: #501840;                   /* primary: "Perform.", chart bars, buttons */
  --plum-rgb: 80, 24, 64;
  --plum-dark: #3e1232;
  --lavender: #9088a8;               /* secondary: "Property", house outline */
  --lavender-rgb: 144, 136, 168;
  --lavender-soft: #e3e0ea;          /* completed bookings, quiet fills */
  --lavender-wash: #f2f0f6;          /* today / selected backgrounds */
  --brand-teal: #18c9ce;             /* booking card accents: top stripe, section ticks */
  --brand-teal-rgb: 24, 201, 206;
  --brand-teal-ink: #0a7d81;         /* teal text on white (readable contrast) */
  --brand-plum: #7a216b;             /* booking card headline payout, key figures */
  --brand-plum-rgb: 122, 33, 107;
  --brand-green: #3d9547;            /* the P&L banner's growth arrow; P&L hero figure in profit */

  /* ---------- Core palette ---------- */
  --color-scheme: light;             /* native controls (date pickers, scrollbars) */
  --bg: #ffffff;
  --bg-rgb: 255, 255, 255;
  --surface-rgb: 255, 255, 255;      /* bottom nav + action dock */

  --text: #1e1c2c;                   /* dark neutral navy */
  --text-bright: #16141f;            /* hero figures */
  --text-soft: #45415a;              /* eyebrows, legend labels */
  --text-subtle: #5b5670;            /* secondary labels, links, notes */
  --muted: #6f6a84;
  --muted-rgb: 111, 106, 132;
  --on-accent: #fff;                 /* text/icons on coloured buttons */
  --on-photo: #fff;                  /* text/icons laid over property photos */

  --overlay-rgb: 30, 28, 44;         /* neutral tints for subtle fills on white */
  --shadow-rgb: 46, 30, 58;

  /* ---------- Accent colours ---------- */
  --accent: var(--plum);             /* primary accent */
  --accent-rgb: var(--plum-rgb);
  --accent-strong: var(--plum-dark);
  --brand-ink: var(--plum);          /* net profit, upcoming bookings */
  --gold: #b7791f;                   /* warnings, commission */
  --gold-rgb: 183, 121, 31;

  /* ---------- Income / expense ---------- */
  --green: #12a071;                  /* income */
  --green-rgb: 18, 160, 113;
  --red: #e5343f;                    /* expense */
  --red-rgb: 229, 52, 63;
  --red-light: #d42a35;

  --income-soft: rgba(var(--green-rgb), 0.1);
  --income-tint: rgba(var(--green-rgb), 0.12);
  --income-glow: rgba(var(--green-rgb), 0.24);
  --income-icon-gradient: linear-gradient(145deg, #2fcf98, #13a877);
  --expense-soft: rgba(var(--red-rgb), 0.08);
  --expense-tint: rgba(var(--red-rgb), 0.1);
  --expense-glow: rgba(var(--red-rgb), 0.24);
  --expense-icon-gradient: linear-gradient(145deg, #f7626a, #e5343f);
  --net-icon-gradient: linear-gradient(145deg, #6a2656, #501840);
  --net-glow: rgba(var(--plum-rgb), 0.26);
  --warning-soft: rgba(var(--gold-rgb), 0.1);
  --warning-tint: rgba(var(--gold-rgb), 0.14);

  /* ---------- Buttons ---------- */
  --btn-bg: var(--plum);
  --btn-text: var(--on-accent);
  --btn-ghost-bg: rgba(var(--lavender-rgb), 0.16);
  --btn-ghost-text: var(--text);
  --btn-income-gradient: linear-gradient(135deg, #12a071, #1fbf8c);
  --btn-expense-gradient: linear-gradient(135deg, #e5343f, #f45a63);
  --btn-edit-bg: rgba(var(--plum-rgb), 0.08);
  --btn-edit-text: var(--plum);
  --btn-danger-bg: rgba(var(--red-rgb), 0.1);
  --btn-danger-bg-strong: rgba(var(--red-rgb), 0.12);
  --btn-danger-text: var(--red-light);
  --btn-dashed-bg: rgba(var(--lavender-rgb), 0.1);
  --btn-dashed-border: rgba(var(--lavender-rgb), 0.7);

  /* Add Income / Add Expense dock buttons */
  --action-income-gradient: linear-gradient(135deg, #12a97a, #22c492);
  --action-income-shadow: rgba(18, 160, 113, 0.24);
  --action-income-icon: #12a071;
  --action-expense-gradient: linear-gradient(135deg, #e5343f, #f35c65);
  --action-expense-shadow: rgba(229, 52, 63, 0.24);
  --action-expense-icon: #e5343f;

  /* ---------- Surfaces ---------- */
  --app-background: var(--bg);
  --card: #fff;
  --card-solid: #fff;
  --card-hover: #fff;
  --border: rgba(var(--overlay-rgb), 0.07);
  --border-hover: rgba(var(--lavender-rgb), 0.55);
  --input-bg: #fbfafc;
  --input-border: rgba(var(--overlay-rgb), 0.13);
  --placeholder: rgba(var(--muted-rgb), 0.7);
  --focus-ring: rgba(var(--plum-rgb), 0.12);
  --hairline: rgba(var(--overlay-rgb), 0.07);
  --divider: rgba(var(--overlay-rgb), 0.07);
  --divider-strong: rgba(var(--overlay-rgb), 0.1);
  --inset-highlight: rgba(255, 255, 255, 0.9);
  --chip-bg: rgba(var(--lavender-rgb), 0.14);
  --icon-circle-bg: #fff;
  --sheet-background: #fff;
  --sheet-handle: rgba(var(--overlay-rgb), 0.15);
  --backdrop: rgba(30, 20, 36, 0.35);

  /* ---------- Brand / avatar ---------- */
  --brand-gradient: linear-gradient(145deg, #6a2656, #501840);
  --brand-ring: rgba(255, 255, 255, 0.95);
  --brand-icon: var(--lavender-wash);
  --avatar-border: var(--plum);

  /* ---------- Period filter ---------- */
  --pill-bg: #fff;
  --pill-border: rgba(var(--overlay-rgb), 0.09);
  --pill-icon: var(--plum);

  /* ---------- Summary card (photo background: net-profit-hero.png) ---------- */
  --summary-border: rgba(255, 255, 255, 0.85);
  --summary-split-bg: rgba(255, 255, 255, 0.6);
  --summary-split-border: rgba(255, 255, 255, 0.8);

  /* ---------- Time-based hero (Dashboard Today's Income + P&L Net Profit) ----------
     Image is picked by time-hero.js. The scrim is a soft left-side wash behind the
     text; the sun/hills on the right stay untouched. Evening art is dark, so its
     text switches to light. */
  --time-hero-scrim: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 38%, rgba(255, 255, 255, 0) 62%);
  --time-hero-scrim-evening: linear-gradient(90deg, rgba(34, 14, 44, 0.42) 0%, rgba(34, 14, 44, 0.18) 40%, rgba(34, 14, 44, 0) 64%);
  --time-hero-evening-text: #fff;
  --time-hero-evening-soft: rgba(255, 255, 255, 0.88);
  --time-hero-evening-green: #b9f3cf;
  --time-hero-evening-shadow: 0 2px 18px rgba(30, 10, 40, 0.45);

  /* ---------- Property images ---------- */
  --thumb-bg: linear-gradient(145deg, #f1eff5, #e3e0ea);
  --hero-bg: linear-gradient(145deg, #eeecf3, #dcd8e5);
  --hero-overlay: linear-gradient(180deg, rgba(28, 16, 30, 0.25) 0%, rgba(28, 16, 30, 0) 35%, rgba(28, 16, 30, 0.7) 100%);
  --hero-btn-bg: rgba(255, 255, 255, 0.28);
  --hero-btn-border: rgba(255, 255, 255, 0.5);

  /* ---------- Navigation ---------- */
  --nav-bg: rgba(255, 255, 255, 0.96);
  --nav-item: #7a7590;
  --nav-item-hover: var(--text);
  --nav-item-active: var(--plum);
  --nav-item-active-bg: var(--lavender-wash);
  --action-bar-fade: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0.92) 30%, rgba(var(--bg-rgb), 0.98) 100%);

  /* ---------- Revenue calendar ---------- */
  --bar-upcoming: var(--plum);
  --bar-upcoming-text: #fff;
  --bar-past: var(--lavender-soft);
  --bar-past-text: var(--text);
  --today-bg: rgba(var(--lavender-rgb), 0.12);

  /* ---------- Shadows (soft, neutral-plum tinted) ---------- */
  --shadow-soft: rgba(var(--shadow-rgb), 0.05);
  --shadow-card: rgba(var(--shadow-rgb), 0.06);
  --shadow-strong: rgba(var(--shadow-rgb), 0.13);
  --shadow-deep: rgba(var(--shadow-rgb), 0.1);
  --shadow-sheet: rgba(var(--shadow-rgb), 0.16);
  --shadow-text: rgba(0, 0, 0, 0.45);

  /* ---------- Floating cards (every card / tile / boxed section) ----------
     Two layers: a tight contact shadow plus a wide, faint ambient blur, so
     cards lift gently off the white page without looking boxy. */
  --shadow-float: 0 1px 3px rgba(var(--shadow-rgb), 0.07), 0 8px 26px rgba(var(--shadow-rgb), 0.15);
  --shadow-float-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.06), 0 5px 16px rgba(var(--shadow-rgb), 0.12);
  --shadow-float-hover: 0 2px 6px rgba(var(--shadow-rgb), 0.08), 0 16px 38px rgba(var(--shadow-rgb), 0.2);
  --shadow-float-modal: 0 4px 10px rgba(var(--shadow-rgb), 0.08), 0 22px 54px rgba(var(--shadow-rgb), 0.24);
  --border-float: rgba(var(--overlay-rgb), 0.06);
}