/*
 * Design tokens — single source of truth for the visual system.
 * Brand --basic-color is set per-tenant in inc/script.header.php and inherits
 * here. Phase 1 of the 2026 refresh: tokens declared, used incrementally as
 * later phases migrate components.
 */

:root {
    /* Type scale — modular (1.25 ratio) starting at 1rem (16px). */
    --fs-xs:    0.75rem;     /* 12px */
    --fs-sm:    0.875rem;    /* 14px */
    --fs-base:  1rem;        /* 16px */
    --fs-md:    1.125rem;    /* 18px */
    --fs-lg:    1.25rem;     /* 20px */
    --fs-xl:    1.5rem;      /* 24px */
    --fs-2xl:   1.875rem;    /* 30px */
    --fs-3xl:   2.25rem;     /* 36px */
    --fs-4xl:   3rem;        /* 48px */

    /* Line heights. */
    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-base:   1.55;
    --lh-loose:  1.75;

    /* Font weights — Inter Variable supports any value. */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* Spacing scale (4px base). */
    --sp-1:   0.25rem;   /* 4 */
    --sp-2:   0.5rem;    /* 8 */
    --sp-3:   0.75rem;   /* 12 */
    --sp-4:   1rem;      /* 16 */
    --sp-5:   1.25rem;   /* 20 */
    --sp-6:   1.5rem;    /* 24 */
    --sp-8:   2rem;      /* 32 */
    --sp-10:  2.5rem;    /* 40 */
    --sp-12:  3rem;      /* 48 */
    --sp-16:  4rem;      /* 64 */
    --sp-20:  5rem;      /* 80 */
    --sp-24:  6rem;      /* 96 */

    /* Neutral palette — restrained, with a hint of warm gray. */
    --gray-0:    #ffffff;
    --gray-50:   #fafaf9;
    --gray-100:  #f5f5f4;
    --gray-200:  #e7e5e4;
    --gray-300:  #d6d3d1;
    --gray-400:  #a8a29e;
    --gray-500:  #78716c;
    --gray-600:  #57534e;
    --gray-700:  #44403c;
    --gray-800:  #292524;
    --gray-900:  #1c1917;

    /* Semantic — what templates should use. */
    --color-text:         var(--gray-900);
    --color-text-muted:   var(--gray-600);
    --color-text-subtle:  var(--gray-500);
    --color-bg:           var(--gray-0);
    --color-bg-subtle:    var(--gray-50);
    --color-bg-muted:     var(--gray-100);
    --color-border:       var(--gray-200);
    --color-border-strong: var(--gray-300);

    /* Brand color (per-tenant, declared in inc/script.header.php).
       Provided here as a fallback so this file stands alone in dev tools. */
    --basic-color:  #4ab2a8;
    --dark-gray:    var(--gray-900);

    /* Radii. */
    --radius-sm:  3px;
    --radius:     6px;
    --radius-lg:  12px;
    --radius-xl:  20px;

    /* Shadows — subtle. */
    --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.05);
    --shadow:     0 2px 8px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow-lg:  0 12px 32px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04);

    /* Transitions. */
    --t-fast:  120ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow:  320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Container widths. */
    --container-narrow:  640px;
    --container:         960px;
    --container-wide:    1200px;
}