/* ==========================================================================
   Desktop tokens, theme-bahai (bahaimusicstore.com). 2026-10-25, DESKTOP-REFRESH-BMS.md.
   The --d-* custom properties the five desktop sheets (stylesheet_zzz_d_base, _listings,
   _product, _commerce, _shell) read. Mirrored from the mobile --m-* tokens in
   stylesheet_zz_9star_m_shell.css (which exist only below 1024px), plus desktop-only
   values: hover/press colours, field border, focus rings, page widths, desktop sizes.
   Declarations only: this file draws nothing. Desktop only: phones and tablets
   (1023px and below) never see these. Light-only site, as on mobile.
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    /* colour: ONE accent (dark sage). Olive is a surface colour only, never text on white
       and never white text on it. */
    --d-brand: #4f665a; /* = --m-brand; white on it 6.21:1, it on white 6.21:1 */
    --d-brand-hover: #435a4e; /* = mobile primary hover; white on it 7.47:1 */
    --d-brand-press: #3a4e43; /* :active fill, selected category block */
    --d-brand-ink: #ffffff; /* text on brand */
    --d-brand-ring: rgb(
      79 102 90 / 0.25
    ); /* soft halo around a focused field */
    --d-olive: #a4a87e; /* = --m-brand-soft: menu bar, footer band, cart block */
    --d-olive-ink: #1f2a24; /* text and focus ring on olive, 5.99:1 */
    --d-accent: #e8a900; /* = --m-accent: sale/badge only, ink text on it (5.82:1) */
    --d-ink: #363636; /* = --m-ink, 12.08:1 on white */
    --d-ink-2: #6b6e6f; /* = --m-ink-2, 5.14:1 on white, 4.69:1 on surface-2 */
    --d-line: #e3e4dd; /* = --m-line, hairlines and dividers (decorative only) */
    --d-field: #8f928b; /* field and control edges, 3.16:1 on white */
    --d-field-hover: #6b6e6f; /* field edge on hover */
    --d-surface: #ffffff; /* = --m-surface */
    --d-surface-2: #f4f5ef; /* = --m-surface-2: soft panels, secondary-button hover */
    --d-surface-3: #eceee5; /* hover on surface-2 panels and pills; brand on it 5.3:1 */
    --d-error-bg: #fdf2f1;
    --d-error-line: #f0c7c2;
    --d-error-ink: #8a1f16;
    --d-success-bg: #eef3ea;
    --d-success-line: #cfdcc7;
    --d-success-ink: #3a4e43;
    --d-caution-bg: #fdf6e1;
    --d-caution-line: #ecd9a0;
    --d-caution-ink: #6b5200;

    /* shape: the mobile radius system, unchanged */
    --d-radius: 10px; /* buttons, inputs, selects, chips, segmented, messages */
    --d-radius-lg: 14px; /* cards, panels, fieldsets, player */
    --d-radius-cover: 6px; /* album covers and thumbnails */

    /* sizes: desktop-scaled (mobile is 48/44) */
    --d-btn-h: 40px; /* default button */
    --d-btn-h-sm: 34px; /* in cards, sideboxes, tables, popular strip */
    --d-btn-h-lg: 44px; /* product Add to Cart, cart Checkout */
    --d-btn-pad: 0 18px;
    --d-btn-pad-sm: 0 14px;
    --d-btn-pad-lg: 0 22px;
    --d-btn-border: 1.5px;
    --d-field-h: 38px; /* text inputs and selects */
    --d-field-h-sm: 32px; /* header currency, filter bar selects */
    --d-check: 18px; /* checkbox and radio */
    --d-check-track: 20px; /* product track-list checkbox (mobile 24) */

    /* product preview player and track list (mobile model: m_product.css "player"
       and "track list" sections), mouse-sized */
    --d-player-pad: 18px 20px 16px; /* card padding (mobile 16px 16px 14px) */
    --d-transport: 40px; /* previous / next round buttons (mobile 44) */
    --d-play: 52px; /* play / pause round button (mobile 56) */
    --d-glyph: 22px; /* previous / next glyph (mobile 24) */
    --d-glyph-play: 24px; /* play / pause glyph (mobile 26) */
    --d-bar-h: 6px; /* progress track height, radius 3px */
    --d-bar-track: #b9bdb0; /* progress track on surface-2 (mobile value) */
    --d-handle: 14px; /* seek handle, brand with 2px white ring */
    --d-ghost-hover: rgb(54 66 59 / 0.08); /* previous / next hover fill */
    --d-ghost-press: rgb(54 66 59 / 0.12); /* previous / next pressed fill */
    --d-shadow-play:
      0 1px 2px rgb(54 66 59 / 0.12), 0 6px 16px rgb(54 66 59 / 0.18); /* = mobile */
    --d-shadow-play-hover:
      0 1px 2px rgb(54 66 59 / 0.14), 0 8px 20px rgb(54 66 59 / 0.24);
    --d-row-h: 44px; /* track row min height (mobile 52) */

    /* type: the theme's own Arial stack, no webfonts */
    --d-font: Arial, Helvetica, sans-serif;
    --d-fs-body: 14px; /* running text in the centre column */
    --d-fs-ui: 13px; /* labels, nav, meta, table cells */
    --d-fs-small: 12px; /* copyright, counters */
    --d-fs-btn: 14px;
    --d-fs-btn-sm: 13px;
    --d-fs-btn-lg: 15px;
    --d-fs-h1: 32px;
    --d-fs-h1-product: 28px;
    --d-fs-h2: 22px;
    --d-fs-h3: 17px;
    --d-lh-body: 1.55;
    --d-track-h1: -0.5px;

    /* depth: sage-tinted only */
    --d-shadow-1: 0 1px 2px rgb(54 66 59 / 0.06);
    --d-shadow-2:
      0 1px 2px rgb(54 66 59 / 0.08), 0 6px 18px rgb(54 66 59 / 0.12);
    --d-cover-edge: 0 0 0 1px #e3e4dd; /* hairline frame on covers */

    /* focus */
    --d-focus-w: 2px;
    --d-focus-offset: 2px;
    --d-focus: #4f665a; /* ring on white and surface-2 */
    --d-focus-on-brand: #ffffff; /* ring on sage blocks (pair with a brand halo) */
    --d-focus-on-olive: #1f2a24; /* ring on the olive bar and footer */

    /* motion: dial 3; every transition sits in prefers-reduced-motion: no-preference */
    --d-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --d-dur: 120ms;

    /* widths: the existing page frame, unchanged */
    --d-page: 1050px; /* .main-width (fluid 1024-1139, see stylesheet_zz_9star.css) */
    --d-center: 785px; /* #column-center at 1050 */
    --d-measure: 68ch; /* prose in EZ pages and descriptions */
    --d-gap: 16px; /* spacing rhythm: 4 8 12 16 20 24 32 */
  }
}
