/* Uncanny Knick Knacks: design tokens (light + dark themes). Shared by the storefront and the shop admin. */
@import url("fonts.css");

@property --grow { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ===== Tokens ============================================================ */
:root {
  --paper: #f7f3e8;
  --card: #fcfaf4;
  --ink: #1f363e;
  --ink-soft: #4a5b5f;
  --teal: #2f534f;
  --accent: #532059;        /* links, prices */
  --accent-hover: #32355e;
  --btn-a: #532059;
  --btn-b: #32355e;
  --gold: #b19e73;          /* decorative only: too light for text */
  --gold-deep: #8a7443;
  --line: rgba(177, 158, 115, .45);
  --chip-bg: rgba(252, 250, 244, .6);
  --wash-1: rgba(83, 32, 89, .09);
  --wash-2: rgba(66, 108, 62, .10);
  --wash-3: rgba(50, 53, 94, .07);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow: 0 1px 0 rgba(31, 54, 62, .05), 0 14px 30px -18px rgba(50, 53, 94, .45);
  --shadow-lift: 0 1px 0 rgba(31, 54, 62, .05), 0 24px 38px -18px rgba(50, 53, 94, .55);
  /* botanicals */
  --stem: #87a07a;
  --rib: rgba(255, 255, 255, .5);
  --l1a: #6f9670; --l1b: #b5cda0;
  --l2a: #49734d; --l2b: #8db083;
  --l3a: #477d7a; --l3b: #9ac2b9;
  --l4a: #8a6fb0; --l4b: #cbb6e2;
  --bud: #b49bd8;
  --berry-1: #c9a95b; --berry-2: #8e5aa3;
  --vine-opacity: .8;
  --side-vine-opacity: .6;
  /* sparkles: gold, lavender, sage, sky, rose */
  --sp1: #c6a356; --sp2: #a68ad0; --sp3: #7fae86; --sp4: #7fa1d6; --sp5: #cf8fb9;
  --stars-opacity: 0;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #141629;
  --card: #1e2139;
  --ink: #efe8d8;
  --ink-soft: #bab4c9;
  --teal: #9cc8bd;
  --accent: #dcb6ea;
  --accent-hover: #f1d9a6;
  --btn-a: #6b3a80;
  --btn-b: #2c2f63;
  --gold: #d8c08a;
  --gold-deep: #e8d5a6;
  --line: rgba(216, 192, 138, .35);
  --chip-bg: rgba(30, 33, 57, .6);
  --wash-1: rgba(150, 90, 190, .17);
  --wash-2: rgba(80, 150, 115, .12);
  --wash-3: rgba(90, 110, 210, .14);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .78 0 0 0 0 .9 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 34px -18px rgba(0, 0, 0, .75);
  --shadow-lift: 0 1px 0 rgba(0, 0, 0, .3), 0 26px 40px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(216, 192, 138, .18);
  --stem: #7d9f86;
  --rib: rgba(255, 255, 255, .28);
  --l1a: #5f8c68; --l1b: #a6cf9c;
  --l2a: #3f6b4a; --l2b: #86b180;
  --l3a: #3e7471; --l3b: #93c4ba;
  --l4a: #7b62a8; --l4b: #c6b0ea;
  --bud: #c3abea;
  --berry-1: #e2c584; --berry-2: #c08bd6;
  --vine-opacity: .62;
  --side-vine-opacity: .45;
  --sp1: #ecd08e; --sp2: #c9b3f0; --sp3: #a6d6aa; --sp4: #a8c6f4; --sp5: #ecb2d9;
  --stars-opacity: .7;
  color-scheme: dark;
}