/* The pack palette: the ONE place a studio color is defined. The on-strong,
   stage and bar tokens are FIXED in both themes on purpose: white ink on a
   strong color, and dark media stages, do not follow the theme. Registered as a
   token source in .stylelintrc.json; every other sheet references var(--...).
   Coral #FF5A4E over quiet grays, from the model document. */

:root {
    --pk-bg: var(--alz-c-gray-96, #F7F7F8);
    --pk-panel: var(--alz-c-gray-100, #FCFCFD);
    --pk-card: var(--alz-c-gray-100, #ffffff);
    --pk-border: rgba(0, 0, 0, .08);
    --pk-border-strong: rgba(0, 0, 0, .12);
    --pk-ink: var(--alz-c-gray-10, #18181B);
    --pk-ink-input: var(--alz-c-gray-16, #27272A);
    --pk-ink-body: var(--alz-c-gray-26, #3F3F46);
    --pk-ink-mid: var(--alz-c-gray-34, #52525B);
    --pk-ink-muted: var(--alz-c-gray-46-2, #71717A);
    --pk-ink-faint: var(--alz-c-gray-65, #A1A1AA);
    --pk-ink-ghost: var(--alz-c-gray-78, #C4C4CA);
    --pk-coral: var(--alz-c-red-65, #FF5A4E);
    --pk-coral-hover: var(--alz-c-red-59-3, #EE4A3E);
    /* White on the brand coral measures 3.08, and small text needs 4.5. This is
     * the same hue carried deeper, for filled controls only: the brand keeps its
     * colour and the label stays readable. Measured with axe-core, not by eye. */
    --pk-coral-action: var(--pk-coral-text);
    --pk-coral-soft: var(--alz-c-red-97, #FFF1EF);
    --pk-coral-border: rgba(255, 90, 78, .25);
    --pk-coral-text: var(--alz-c-red-47-4, #C4382C);
    --pk-coral-deep: var(--alz-c-red-31, #7C2D24);
    --pk-chip-idle: var(--alz-c-gray-96, #F4F4F5);
    --pk-chip-hover: var(--alz-c-gray-92, #E9E9EC);
    --pk-ph-a: var(--alz-c-gray-92, #E9E9EC);
    --pk-ph-b: var(--alz-c-gray-96, #F2F2F4);
    --pk-ok-bg: var(--alz-c-green-96, #ECFDF5);   --pk-ok-fg: var(--alz-c-teal-24, #047857);
    --pk-pub-bg: var(--alz-c-green-96, #F0FDF4);  --pk-pub-fg: var(--alz-c-green-29-2, #15803D);
    --pk-warn-bg: var(--alz-c-amber-96, #FFFBEB); --pk-warn-fg: var(--alz-c-orange-31, #92400E);
    --pk-bad-bg: var(--alz-c-red-97, #FEF2F2);  --pk-bad-fg: var(--alz-c-red-42, #B91C1C);
    --pk-info-bg: var(--alz-c-blue-97, #EEF2FF); --pk-info-fg: var(--alz-c-indigo-51, #4338CA);
    --pk-line: var(--alz-c-gray-90, #E5E5E5);
    --pk-idle: var(--alz-c-gray-84, #D4D4D8);
    --pk-ok-solid: var(--alz-c-teal-26-2, #0F766E);
    --pk-coral-line: var(--alz-c-red-84, #FFB4AB);
    --pk-coral-mist: var(--alz-c-red-98, #FFF7F6);
    --pk-on-strong: var(--alz-c-gray-100, #FFFFFF);
    --pk-stage: var(--alz-c-gray-10, #18181B);
    --pk-bar: var(--alz-c-gray-10, #18181B);
    --pk-bar-line: var(--alz-c-gray-26, #3F3F46);
    --pk-serif: 'Instrument Serif', Georgia, serif;
    --pk-sans: 'DM Sans', system-ui, sans-serif;
    --pk-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] .pack,
[data-theme="dark"] .pack-page {
    --pk-bg: var(--alz-c-gray-8, #131316);
    --pk-panel: var(--alz-c-gray-10, #17171B);
    --pk-card: var(--alz-c-gray-10, #1A1A1E);
    --pk-border: rgba(255, 255, 255, .08);
    --pk-border-strong: rgba(255, 255, 255, .14);
    --pk-ink: var(--alz-c-gray-96, #F4F4F5);
    --pk-ink-input: var(--alz-c-gray-90, #E4E4E7);
    --pk-ink-body: var(--alz-c-gray-84, #D4D4D8);
    --pk-ink-mid: var(--alz-c-gray-65, #A1A1AA);
    --pk-ink-muted: var(--alz-c-gray-56, #8A8A94);
    --pk-ink-faint: var(--alz-c-gray-46-2, #71717A);
    --pk-ink-ghost: var(--alz-c-gray-30, #4B4B52);
    --pk-coral-soft: rgba(255, 90, 78, .18);
    --pk-coral-text: var(--alz-c-red-75-4, #FF8B82);
    --pk-coral-deep: var(--alz-c-red-92-2, #FFD9D5);
    --pk-chip-idle: var(--alz-c-gray-12, #1D1D21);
    --pk-chip-hover: var(--alz-c-blue-15, #26262B);
    --pk-ph-a: var(--alz-c-blue-15, #26262B);
    --pk-ph-b: var(--alz-c-gray-18, #2E2E34);
    --pk-ok-bg: rgba(4, 120, 87, .18);    --pk-ok-fg: var(--alz-c-green-67, #6EE7B7);
    --pk-pub-bg: rgba(21, 128, 61, .18);  --pk-pub-fg: var(--alz-c-green-73-3, #86EFAC);
    --pk-warn-bg: rgba(146, 64, 14, .2);  --pk-warn-fg: var(--alz-c-amber-65, #FCD34D);
    --pk-bad-bg: rgba(185, 28, 28, .2);   --pk-bad-fg: var(--alz-c-red-82-2, #FCA5A5);
    --pk-info-bg: rgba(67, 56, 202, .22); --pk-info-fg: var(--alz-c-blue-82-2, #A5B4FC);
}

:root {
  --accent: var(--alz-c-red-65, #ff5a4e);
  --accentSoft: var(--alz-c-red-95-2, #ffe9e7);
  --accentFg: var(--alz-c-gray-100, #ffffff);
  /* The accent as TEXT measured 2.64 on its own soft background. Same hue,
   * carried deep enough to read. Fill keeps --accent, letters take this. */
  --accentText: var(--alz-c-red-47-4, #c4382c);
  --fg: var(--alz-c-gray-10, #18181b);
  --fgMuted: var(--alz-c-gray-34, #52525b);
  --fgSubtle: var(--alz-c-gray-65, #a1a1aa);
  --line: var(--alz-c-gray-90, #e4e4e7);
  --lineSoft: var(--alz-c-gray-95, #f0f0f2);
  --bgElev: var(--alz-c-gray-100, #ffffff);
  --bgSubtle: var(--alz-c-gray-96, #f7f7f8);
  --success: var(--alz-c-teal-24, #047857);
  --danger: var(--alz-c-red-42, #b91c1c);
  --warn: var(--alz-c-orange-37, #b45309);
  --stw-accent: var(--alz-c-red-65, #ff5a4e);
}

/* Instagram emulation tokens: fixed by design, in ANY theme. A preview shows
   the piece as Instagram will render it, so these deliberately do not follow
   the studio palette. Used by studio-ig.css. */
:root {
    --igp-card: var(--alz-c-gray-100, #ffffff);
    --igp-line: var(--alz-c-gray-90, #e2e2e2);
    --igp-ink: var(--alz-c-gray-6, #111111);
    --igp-accent: var(--alz-c-red-67, #ff7655);
    --igp-media-bg: var(--alz-c-gray-96, #f2f2f2);
    /* Was #9a9a9a, which measures 2.56 as text. A caption has to be read. */
    --igp-muted: var(--alz-c-gray-34, #52525B);
    --igp-more: var(--alz-c-gray-34, #52525B);
}

/* Network brand colors: fixed by the platforms, in ANY theme. */
:root {
    --net-facebook: var(--alz-c-blue-52-2, #1877F2);
    --net-whatsapp: var(--alz-c-green-49, #25D366);
    --net-pinterest: var(--alz-c-red-37-2, #B7081B);
    /* YouTube was painted with the TikTok token: wrong brand, and white on it
     * measured 2.88. Its own red carried deep enough to read. */
    --net-youtube: var(--alz-c-red-43-2);
    --net-tiktok: var(--alz-c-red-50-3, #FF0033);
    --net-instagram-a: var(--alz-c-amber-59, #F9CE34);
    --net-instagram-b: var(--alz-c-red-55, #EE2A7B);
    --net-instagram-c: var(--alz-c-indigo-50-2, #6228D7);
}

/* Per-network emulation tokens: WhatsApp, YouTube and TikTok fixed colors,
   in ANY theme, same contract as the Instagram block above. */
:root {
    --wap-bg: var(--alz-c-blue-7, #0B141A);
    --wap-bubble: var(--alz-c-blue-16, #202C33);
    --wap-ink: var(--alz-c-gray-92, #E9EDEF);
    --wap-meta: var(--alz-c-blue-58, #8696A0);
    --ytp-bg: var(--alz-c-gray-6, #0F0F0F);
    --ytp-ink: var(--alz-c-gray-95, #F1F1F1);
    --ytp-meta: var(--alz-c-gray-67-2, #AAAAAA);
    --net-stage: var(--alz-c-gray-0, #000000);
    --net-on-dark: var(--alz-c-gray-100, #FFFFFF);
    --net-ph-ink: var(--alz-c-gray-57-2, #8A8F98);
}