/* ============================================================
   Points Sync — color palette (Navy & Gold alternate)
   ============================================================
   Deep navy brand with a warm gold accent on crisp, near-neutral whites. Classic and established.

   Same variable names and structure as colors.css. The on-page
   theme switcher (see index.html) swaps between the palette
   files live, for side-by-side comparison.

   Kept identical across every palette on purpose, because
   they're not part of Points Sync's own brand chrome: the
   "Maple Street Coffee" mock-brand colors, the dashboard avatar
   tints and --kpi-mint (arbitrary categorical colors), and
   --neg / --neg-50 (errors read as red regardless of brand).
   ============================================================ */

:root {
  /* ---------- Neutrals (text, backgrounds, borders) ---------- */
  --ink: #121A2B;         /* primary text, dark surfaces */
  --ink-2: #2E3A50;       /* body copy */
  --muted: #5E6A7E;       /* secondary copy */
  --faint: #8C96A6;       /* tertiary copy, placeholders */
  --line: #E3E5EA;        /* default borders/dividers */
  --line-2: #EDEFF2;      /* softer borders/dividers */
  --bg: #FAFAF8;          /* page background */
  --soft: #F2F2EE;        /* subtle section/card fill */
  --surface: #FFFFFF;     /* card/panel background */
  --white: #FFFFFF;       /* text/icons/shapes on colored or dark backgrounds */

  /* ---------- Brand (navy) ---------- */
  --brand: #1F3A68;
  --brand-600: #182F56;
  --brand-700: #132546;
  --brand-800: #0D1A33;
  --brand-50: #EBF0F7;
  --brand-100: #D4DEEE;

  /* ---------- Accent (gold) ---------- */
  --accent: #E0B04A;
  --accent-600: #C5932A;
  --accent-700: #8F6814;
  --accent-50: #FCF6E7;
  --accent-100: #F7E8C2;
  --accent-hover: #E6C06C;  /* accent button hover state */
  --accent-ink: #2B1F04;    /* dark text/icons on accent-colored fills */

  /* ---------- Negative / destructive ---------- */
  --neg: #B8463A;
  --neg-50: #FBEDEA;

  /* ---------- RGB triplets, for rgba() alpha blends ---------- */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --ink-rgb: 18, 26, 43;
  --brand-rgb: 31, 58, 104;
  --accent-rgb: 224, 176, 74;
  --bg-rgb: 250, 250, 248;

  /* ---------- Borders & controls ---------- */
  --border-hover: #C9CCD3;         /* secondary button / option-card hover border */
  --border-hover-strong: #D7DAE0;  /* feature-card hover border */
  --border-dashed: #D0D3DA;        /* dashed add-on card border */
  --border-field-hover: #CDD0D7;   /* form field hover border */
  --border-control: #BCC0C9;       /* default radio/checkbox border */

  /* ---------- "Maple Street Coffee" mock branding ----------
     Used only in the illustrative product mockups (hero card,
     category strip, dashboard KPI dot) to stand in for a
     customer's own brand color. Same in every palette. */
  --mock-brand: #6B3F22;
  --mock-brand-ink: #F9E7CF;

  /* ---------- Mockup panels ---------- */
  --panel-tint: #FCFCFB;   /* mock header strip background */
  --panel-alt: #F7F7F5;    /* dashboard sidebar background */

  /* ---------- Comparison table ("traditional software" column) ---------- */
  --compare-bg-muted: #F4F4F1;
  --compare-icon-bg-muted: #E7E8E6;
  --compare-icon-fg-muted: #979CA4;

  /* ---------- Dashboard customer-avatar tints ---------- */
  --avatar-plum-bg: #EDE3F7;
  --avatar-plum-fg: #5A3A82;
  --avatar-sky-bg: #E4ECF7;
  --avatar-sky-fg: #2F4F7A;

  /* ---------- Dashboard chart & KPI accents ---------- */
  --kpi-mint: #3BAE93;         /* "Returning customers" KPI dot */
  --chart-line-end: #3F67A8;   /* points-awarded chart line gradient end */

  /* ---------- POS-integration (dark) section ---------- */
  --pos-node-bg: #1A2F57;   /* flow-diagram icon tile background */
  --pos-eyebrow: #A9C2EA;   /* eyebrow label on the dark background */

  /* ---------- No-POS checkout tablet mockup ---------- */
  --tablet-shell: #171D29;    /* tablet bezel */
  --tablet-camera: #363E4D;   /* front camera dot */
}