/* ── Príma Sörpad · colour system ───────────────────────────────────────────
   Base values come straight out of the supplied logo artwork
   (primasorpad_*_v1.svg) and the RAL sheet the workshop paints to. */

:root {
  /* Brand: from the logo */
  --amber-500: #db9a19;   /* primary brand colour, logo table top + PRÍMA */
  --amber-600: #c2870f;   /* hover / pressed */
  --amber-700: #a87418;   /* logo shadow face, dark amber: ICONS AND BORDERS ONLY (3.7:1 on paper) */
  --amber-800: #8a5f12;   /* small brand-coloured TEXT on paper or amber-100 (5.1:1) */
  --amber-300: #ecc369;
  --amber-200: #f6e3b4;
  --amber-100: #fdf2d6;   /* logo cream, from the footer lockup */

  /* Ink: from the logo frame */
  --ink-900: #1b1e25;
  --ink-800: #272a33;     /* logo ink, primary text, dark sections */
  --ink-700: #383e42;
  --ink-500: #5f6169;
  --ink-400: #71706e;     /* muted body copy */

  /* Warm neutrals: paper, cards, hairlines */
  --sand-050: #faf8f4;
  --sand-100: #f7f3ec;    /* default page background */
  --sand-200: #f2efea;    /* alternating section background */
  --sand-300: #e7e1d7;
  --sand-400: #d8bd9c;    /* logo tan */
  --line-100: #ece7de;
  --line-200: #e2ddd5;    /* default hairline */
  --line-300: #c9c2b6;
  --white: #ffffff;

  /* RAL Classic: the six paints currently in production.
     Screen values are indicative; the physical paint may differ. */
  --ral-1032: #e2be46;    /* Szalmasárga */
  --ral-3004: #86303a;    /* Bíborvörös */
  --ral-6011: #87ad9f;    /* Rezedazöld */
  --ral-6033: #55b0b3;    /* Menta türkiz */
  --ral-7006: #86807c;    /* Bézsszürke */
  --ral-7030: #a4a5a7;    /* Kőszürke */

  /* RAL Classic: additional shades used on the logo colour sheet */
  --ral-1004: #e1a100;    /* Aranysárga */
  --ral-7016: #383e42;    /* Antracitszürke: matches the steel frame */

  /* Commerce green: the buy action. Deliberately NOT amber: the brand colour
     marks the product, the green marks the transaction. 5.1:1 with white. */
  --cta-500: #3d7a52;
  --cta-600: #336647;
  --cta-100: #e8f0e9;

  /* Status */
  --success-500: #4f7a52;
  --success-100: #e6efe4;
  --warning-500: #c2870f;
  --warning-100: #fbf0d5;
  --danger-500: #a63a34;
  --danger-100: #f6e4e2;

  /* ── Semantic aliases: use these in components ─────────────────────── */
  --surface-page: var(--sand-100);
  --surface-alt: var(--sand-200);
  --surface-card: var(--white);
  --surface-sunken: var(--sand-200);
  --surface-inverse: var(--ink-800);
  --surface-brand: var(--amber-500);
  --surface-brand-soft: var(--amber-100);

  --text-heading: var(--ink-800);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-400);
  --text-inverse: var(--amber-100);
  --text-on-brand: var(--ink-900);   /* 6.9:1 on amber-500 */
  --text-link: var(--amber-800);
  --text-link-hover: var(--ink-800);

  --border-subtle: var(--line-100);
  --border-default: var(--line-200);
  --border-strong: var(--line-300);
  --border-brand: var(--amber-500);
  --focus-ring: var(--ink-700);

  --text-on-cta: var(--white);

  /* Background motif: primasorpad_hatter_elem_v1.svg bleeding in from the edges */
  --motif-opacity: 0.07; /* @kind other */
  --motif-width: 34%;
}

/* ── Alternative brand shade ────────────────────────────────────────────────
   RAL 1004 "Aranysárga" instead of the logo's #db9a19: a lighter, brighter
   yellow, sampled directly from the client's RAL 1004 logo render (#e6af1f;
   the published RAL screen value #e1a100 is so close to #db9a19 that the two
   are indistinguishable side by side). 8.4:1 with ink-900. Set it with
   <html data-brand="ral1004">. Only the fill shades move: amber-700 (icons,
   borders) and amber-800 (small text) stay put, because they are chosen for
   contrast against paper, not for hue. */
:root[data-brand="ral1004"] {
  --amber-500: #e6af1f;  /* sampled from the client's RAL 1004 logo render */
  --amber-600: #cf9a12;
  --amber-300: #f2cb63;
  --amber-200: #fae8b8;
}