/* ============================================================
   Quare Design System tokens, as used by the Ogham boards
   (design/mockups/quare/tokens.css). Default theme is "quare"
   (Kitsch / riso); [data-theme="square"] on any ancestor gives
   the muted variant. Shared by the admin and the public theme.
   ============================================================ */
/* ---------- palette.css ---------- */
:root {
  /* --- Ink & paper (kitsch / riso ground truth) --- */
  --q-ink: #14110b;          /* near-black warm ink — borders, text, chrome */
  --q-paper: #fffef7;        /* warm off-white card paper */
  --q-canvas: #f3ead4;       /* marigold-tinted dot-grid canvas */

  /* --- Signature accent --- */
  --q-marigold: #ffcf1a;     /* THE brand yellow — accent, FAB, active nav */

  /* --- The eight note pigments (riso, saturated) --- */
  --q-plain:  #fffef7;
  --q-yellow: #ffcf1a;
  --q-coral:  #ff6f52;
  --q-mint:   #63cf86;
  --q-sky:    #4ec0e6;
  --q-lilac:  #b79bf5;
  --q-clay:   #eaa14a;
  --q-gray:   #dcd8ca;

  /* --- Label icon colours (Home, Family, Weird, Recipes) --- */
  --q-label-home:   #63cf86;
  --q-label-family: #4ec0e6;
  --q-label-weird:  #ff6f52;
  --q-label-recipe: #eaa14a;

  /* --- Collaborator avatar pigments --- */
  --q-ava-1: #f0894e;
  --q-ava-2: #3fb0d6;
  --q-ava-3: #a985f2;
  --q-ava-4: #4fbf7f;
  --q-ava-5: #ff6f8e;

  /* --- Muted (square) note pigments — softer, chalkier --- */
  --q-m-plain:  #fffdf7;
  --q-m-yellow: #f0e0a4;
  --q-m-coral:  #f2c3b0;
  --q-m-mint:   #cfe6d0;
  --q-m-sky:    #c4dfe8;
  --q-m-lilac:  #ddd2f0;
  --q-m-clay:   #ecd9bc;
  --q-m-gray:   #e6e0d2;
}

/* ---------- colors.css ---------- */
:root,
[data-theme="quare"] {
  --variant: "riso";

  /* Canvas */
  --canvas: #f3ead4;
  --dot: rgba(20, 17, 11, .07);        /* dot-grid pigment */
  --ink: #14110b;                      /* primary text / borders */

  /* Top app bar (dark ink chrome) */
  --bar: #14110b;
  --bar-tx: #f3ead4;
  --bar-ic: #f0e8d2;
  --band: #ffcf1a;                     /* skewed marigold band behind wordmark */
  --accent: #ffcf1a;

  /* Sidebar nav (ink) */
  --nav-bg: #14110b;
  --nav-tx: #cfc7b3;
  --nav-head: #8a8069;                 /* section labels */
  --nav-act-bg: #ffcf1a;               /* active pill */
  --nav-act-tx: #14110b;
  --nav-div: rgba(255, 255, 255, .1);
  --nav-bd: #14110b;

  /* Search field (in dark bar) */
  --search-bg: #26221a;
  --search-bd: 1.5px solid #3a342a;
  --search-tx: #b0a894;
  --search-ic: #ffcf1a;

  /* Quick-add / surface cards (paper) */
  --quick-bg: #fffef7;
  --quick-bd: 2px solid #14110b;
  --quick-sh: 3px 4px 0 #14110b;
  --quick-tx: #6b6455;
  --quick-ic: #14110b;

  /* Section chip (skewed marigold tag) */
  --sec-bg: #ffcf1a;
  --sec-bd: 2px solid #14110b;
  --sec-sh: 2px 2px 0 #14110b;
  --sec-tx: #14110b;
  --sec-skew: -8deg;
  --sec-inner: 8deg;

  /* Floating action button */
  --fab-bg: #ffcf1a;
  --fab-bd: 2.5px solid #14110b;
  --fab-sh: 3px 4px 0 #14110b;
  --fab-ic: #14110b;

  /* Avatar */
  --av-bg: #ffcf1a;
  --av-tx: #14110b;
  --av-bd: 2px solid #14110b;

  /* Desktop window frame */
  --desk-bd: 2px solid #14110b;
  --desk-sh-alpha: .6;
  --brow-bar: #221d15;
  --url-bg: #14110b;
  --url-tx: #b9b09a;

  /* Misc */
  --sync-label: "SYNC";
  --gesture: rgba(20, 17, 11, .4);
  --hairline: rgba(20, 17, 11, .12);

  /* Label icon colours, in nav order */
  --lbl-0: #63cf86;
  --lbl-1: #4ec0e6;
  --lbl-2: #ff6f52;
  --lbl-3: #eaa14a;
}

[data-theme="square"] {
  --variant: "riso-muted";

  --canvas: #f6f2ea;
  --dot: rgba(74, 64, 56, .05);
  --ink: #4a4038;

  --bar: #fbf8f2;
  --bar-tx: #4a4038;
  --bar-ic: #6a6156;
  --band: #e8d8a8;
  --accent: #c9b06a;

  --nav-bg: #fbf8f2;
  --nav-tx: #6a6156;
  --nav-head: #a99f8c;
  --nav-act-bg: #e7dcc0;
  --nav-act-tx: #4a4038;
  --nav-div: rgba(74, 64, 56, .12);
  --nav-bd: rgba(74, 64, 56, .14);

  --search-bg: #efeae0;
  --search-bd: 1.5px solid rgba(74, 64, 56, .2);
  --search-tx: #8a8073;
  --search-ic: #8a8073;

  --quick-bg: #fffdf8;
  --quick-bd: 1.5px solid rgba(74, 64, 56, .5);
  --quick-sh: 2px 2px 0 rgba(74, 64, 56, .14);
  --quick-tx: #8a8073;
  --quick-ic: #6a6156;

  --sec-bg: #efe6cf;
  --sec-bd: 1.5px solid #bfb49a;
  --sec-sh: 2px 2px 0 rgba(74, 64, 56, .14);
  --sec-tx: #4a4038;
  --sec-skew: -3deg;
  --sec-inner: 3deg;

  --fab-bg: #d8c17e;
  --fab-bd: 2px solid #4a4038;
  --fab-sh: 2px 3px 0 rgba(74, 64, 56, .22);
  --fab-ic: #4a4038;

  --av-bg: #d8c17e;
  --av-tx: #4a4038;
  --av-bd: 2px solid #4a4038;

  --desk-bd: 1.5px solid rgba(74, 64, 56, .2);
  --desk-sh-alpha: .28;
  --brow-bar: #ece7dd;
  --url-bg: #fbf8f2;
  --url-tx: #8a8073;

  --sync-label: "Saving…";
  --gesture: rgba(74, 64, 56, .3);
  --hairline: rgba(74, 64, 56, .14);

  --lbl-0: #7fae86;
  --lbl-1: #7ea9b8;
  --lbl-2: #c98a72;
  --lbl-3: #c2a558;
}

/* ---------- typography.css ---------- */
:root {
  --font-display: 'Anton', system-ui, sans-serif;        /* poster caps */
  --font-title: 'Archivo', system-ui, sans-serif;        /* heavy headings */
  --font-ui: 'Space Grotesk', system-ui, sans-serif;     /* chrome + body */
  --font-soft: 'Hanken Grotesk', system-ui, sans-serif;  /* soft-variant copy */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-wordmark: 26px;
  --fs-title-lg: 22px;
  --fs-title: 15.5px;
  --fs-body: 14px;
  --fs-card-body: 13px;
  --fs-ui: 13.5px;
  --fs-chip: 11.5px;
  --fs-eyebrow: 10px;

  --lh-tight: 1.24;
  --lh-snug: 1.4;
  --lh-body: 1.5;

  --ls-caps: .05em;
  --ls-eyebrow: .14em;
  --ls-title: -.01em;
}

/* ---------- spacing.css ---------- */
:root {
  --sp-1: 4px;
  --sp-2: 7px;
  --sp-3: 9px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 15px;
  --sp-7: 18px;
  --sp-8: 22px;
  --sp-9: 26px;

  --bar-h: 60px;
  --nav-w: 200px;
  --fab-size: 58px;
  --avatar-size: 31px;
  --avatar-sm: 20px;
  --touch-min: 44px;
  --masonry-col-gap: 16px;
}

/* ---------- effects.css ---------- */
:root {
  --radius-card: 14px;
  --radius-surface: 12px;
  --radius-editor: 18px;
  --radius-fab: 18px;
  --radius-chip: 999px;
  --radius-chip-riso: 5px;
  --radius-window: 15px;
  --radius-phone: 42px;
  --radius-phone-screen: 33px;
  --radius-input: 11px;

  --bd-hair: 1px solid var(--hairline);
  --bd-card: var(--quick-bd);

  --sh-card: var(--quick-sh);
  --sh-section: var(--sec-sh);
  --sh-fab: var(--fab-sh);
  --sh-editor: 0 30px 60px -22px rgba(0, 0, 0, .55);
  --sh-device: 0 22px 48px -18px rgba(0, 0, 0, .6);

  --note-tilt: 1.2deg;

  --ease-bob: cubic-bezier(.45, 0, .55, 1);
  --dur-bob: 3.6s;
  --dur-pulse: 1.2s;
}

@keyframes scr-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}
@keyframes scr-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}