/* ===========================================================================
   Claus' Keepsakes — brand layer for the Arjuna POD template (adsbranded-templates, src/arjuna-pod).
   Source: brand/brand-identity.pdf (Personalization Brand One-Page Identities, page 1), received 2026-10-08.

   How to use in a campaign built from arjuna-pod:
     1. Copy this file to src/<slug>/assets/css/brand.css.
     2. Add "css/brand.css" as the LAST entry of `styles:` in checkout.html, upsell.html and receipt.html
        (after personalize.css). It must load after arjuna.css, which sets the template fonts.
     3. Copy brand/logos/logo-black.png (or logo-red-stamp.png) to src/<slug>/assets/images/logo.png and point the logo
        src in _includes/checkout-header.html, upsell-header-bar.html and receipt-skeleton.html at it.
   Colour roles below are Sellmore's mapping of the brand palette onto the template; the PDF gives the
   palette, not the roles. Change a role here, never in arjuna.css.
   =========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  /* Brand palette (PDF swatches) */
  --ck--red: #a22d2b;
  --ck--green: #193025;
  --ck--cream: #e9dec6;
  --ck--black: #1a1814;
  --ck--gold: #b38952;
  --ck--white: #ffffff;

  /* Type (PDF: headlines Fraunces 600, hero 700; body Figtree 400; subheads/UI Figtree 500-600; buttons Figtree 600) */
  --font-primary: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-secondary: var(--font-primary);
  --font-accent: var(--font-primary);
  --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
  --_text---font-family--primary: var(--font-primary);
  --_text---font-family--heading: var(--font-headline);
  --_text---font-family--secondary: var(--font-primary);

  /* next-core / shared-commerce tokens */
  --brand--color--primary: var(--ck--red);
  --brand--color--primary-dark: #7f2321;
  --brand--color--primary-light: #e9dec6;
  --brand--color--primary-lighter: #f6f1e6;
  --brand--color--primary-foreground: var(--ck--white);
  --brand--color--accent: var(--ck--green);
  --brand--color--accent-foreground: var(--ck--cream);
  --brand--color--background: var(--ck--white);
  --brand--color--surface: var(--ck--white);
  --brand--color--border: #e2d8c3;
  --brand--color--foreground: var(--ck--black);
  --brand--color--text-primary: var(--ck--black);
  --brand--color--text-inverse: var(--ck--white);
  --brand--color--rating-star: var(--ck--gold);
  /* CTA: AdsBranded POD rule (Tez, 2026-10-15), not a brand colour: yellow with black text. */
  --brand--color--cta-primary: #ffd431;
  --brand--color--cta-foreground: #000000;
  --component--color--outline: #cfc4ac;

  /* Arjuna POD tokens */
  --pod--color--cta: #ffd431;                 /* Complete Purchase + upsell accept */
  --pod--color--cta-border: #d5ac10;
  --pod--color--cta-foreground: #000000;
  /* Personalize buttons, dialog Save, upsell # chips: brand red (deep green is the only other allowed colour). */
  --pod--color--personalize: var(--ck--red);
  --pod--color--eyebrow: var(--ck--red);              /* "Holiday 2026 Edition" over the product name: brand red (Tez, 2026-10-16) */
  --pod--color--personalize-border: #7f2321;
  --pod--color--personalize-foreground: var(--ck--white);
  --pod--color--select: var(--ck--green);
  --pod--color--positive: var(--ck--green);
  --pod--color--label-green: var(--ck--green);
  --pod--color--label-blue: var(--ck--gold);
  --pod--color--soft: #f6f1e6;
  --pod--color--soft-border: var(--ck--cream);
  --pod--color--switch-on: var(--ck--green);
  --pod--color--switch-off: #c9c2b3;
  --pod--color--success: var(--ck--green);
  --pod--color--danger: var(--ck--red);
  --pod--color--badge: var(--ck--red);
  --pod--color--badge-foreground: var(--ck--white);
  /* Banners: AdsBranded POD rule (Tez, 2026-10-15), not a brand colour: #acf4a1 with black text (promo strip,
     timer bar, the summary's "Promo applied" row); the code on the black pill reads in the same green. */
  --pod--color--banner: #acf4a1;
  --pod--color--banner-foreground: #0a0a0a;
  --pod--color--promo-code: #acf4a1;
}
@media screen and (max-width: 991px) {
  :root {
    --_text---font-family--primary: var(--font-primary);
    --_text---font-family--heading: var(--font-headline);
    --_text---font-family--secondary: var(--font-primary);
  }
}

body { font-family: var(--font-primary); line-height: 1.5; }
/* Headlines: Fraunces 600, sentence case, letter spacing 0 to 2%, line height 95-105%. */
h1, h2, h3, h4, h5, h6,
.display-xl, .display-lg, .display-md, .display-sm, .display-xs, .display-2xs {
  font-family: var(--font-headline); font-weight: 600; letter-spacing: .01em; line-height: 1.02; text-transform: none;
}
h1, .display-xl, .display-lg { font-weight: 700; }
/* Buttons: Figtree 600. */
button, .button, [type="submit"], .next-checkout-button { font-family: var(--font-primary); font-weight: 600; }
/* The Arjuna upsell accept button names Roboto with a higher specificity than .button (arjuna.css); keep it Figtree. */
[data-next-upsell-action="add"].button { font-family: var(--font-primary); font-weight: 600; }