/* ANNUCHADA — colour. Layer 1: global palette. Layer 2: semantic. Layer 3: component. */
:root{
  /* Global */
  --color-sand:#E9E0D2;
  --color-ivory:#F5F1E9;
  --color-light:#FBF9F4;
  --color-espresso:#201712;
  --color-charcoal:#3A302B;
  --color-muted:#746A62;
  --color-gold:#C5A46D;
  --color-gold-light:#D8C39A;
  --color-burgundy:#4A171C;
  --color-chocolate:#2A1814;
  --color-taupe:#B7AA9D;
  --color-hairline:#D7CDC1;
  --color-hairline-dark:#4A3E36;
  --color-error:#8C2F2B;
  --color-success:#56603F;

  /* Semantic — surfaces */
  --surface-canvas:var(--color-sand);
  --surface-panel:var(--color-ivory);
  --surface-raised:var(--color-light);
  --surface-dark:var(--color-espresso);
  --surface-product:var(--color-chocolate);
  --surface-campaign:var(--color-burgundy);
  --surface-scrim:rgba(32,23,18,0.48);
  --surface-scrim-light:rgba(233,224,210,0.92);

  /* Semantic — text */
  --text-primary:var(--color-espresso);
  --text-secondary:var(--color-charcoal);
  --text-muted:var(--color-muted);
  --text-on-dark:var(--color-ivory);
  --text-on-dark-muted:var(--color-taupe);
  --text-accent:var(--color-gold);
  --text-error:var(--color-error);
  --text-success:var(--color-success);

  /* Semantic — borders */
  --border-hairline:var(--color-hairline);
  --border-dark:var(--color-hairline-dark);
  --border-gold:var(--color-gold);
  --border-strong:var(--color-espresso);

  /* Semantic — interaction */
  --focus-ring:var(--color-espresso);
  --focus-ring-on-dark:var(--color-gold-light);
  --accent-line:var(--color-gold);
  --selection-bg:var(--color-gold-light);

  /* Component */
  --button-primary-bg:var(--color-espresso);
  --button-primary-fg:var(--color-ivory);
  --button-primary-hover:var(--color-burgundy);
  --button-secondary-border:var(--color-espresso);
  --button-disabled-bg:var(--color-hairline);
  --button-disabled-fg:var(--color-muted);
  --nav-bg:transparent;
  --nav-bg-scrolled:rgba(245,241,233,0.86);
  --card-product-surface:var(--color-ivory);
  --card-product-surface-dark:var(--color-chocolate);
  --field-border:var(--color-taupe);
  --field-border-focus:var(--color-espresso);
  --footer-bg:var(--color-chocolate);
}