/* CannaDB design tokens — the single source of truth for color, type, and
 * rhythm. Loaded before cannadb.css; every component class consumes these
 * via var(--…). Hardcoded values in cannadb.css are bugs.
 *
 * Philosophy: information service, not consumer app. Wikipedia/museum tone,
 * not Leafly. Restrained palette, strong typography hierarchy, generous
 * whitespace, no animation theatrics.
 */

:root {
    /* ─── Color palette ─────────────────────────────────────────
     * Neutral base: 8 warm grays from near-white to near-black.
     * Warm bias matches the editorial tone better than pure cool grays.
     * One accent — a muted green-leaning teal that nods at the subject
     * without being literal weed-green. Semantic colors for state.
     * Every body-text combo meets WCAG AA (4.5:1) against its background.
     */
    --color-bg:           #fafaf7;
    --color-bg-elev:      #ffffff;
    --color-bg-sunken:    #f3f2ec;

    --color-fg:           #1d1d1b;  /* body */
    --color-fg-strong:    #0a0a09;  /* h1 etc. */
    --color-fg-muted:     #555350;  /* meta */
    --color-fg-faint:     #807c75;  /* placeholders, dim labels */

    --color-border:        #e3e1d6;
    --color-border-strong: #c4c0b1;

    /* Accent — primary brand color. Pairs with white at AA on body text. */
    --color-accent:        #2c6e60;  /* default */
    --color-accent-hover:  #205448;  /* darker for :hover */
    --color-accent-soft:   #e2efec;  /* tint background */
    --color-accent-fg:     #ffffff;  /* text on accent */

    /* Trust tier surfaces (existing from Phase 2, retuned). */
    --color-editorial-bg:     #e6efe8;
    --color-editorial-border: #6b9572;
    --color-editorial-fg:     #2c4530;

    --color-community-bg:     #fbf3df;
    --color-community-border: #d4b86a;
    --color-community-fg:     #6f5114;

    /* Semantic state colors. */
    --color-success:        #1f6f3f;
    --color-success-bg:     #e6f1ea;
    --color-success-border: #b9d8c2;

    --color-warning:        #8a5c14;
    --color-warning-bg:     #fbf2dd;
    --color-warning-border: #e5cf91;

    --color-danger:         #94252b;
    --color-danger-bg:      #fbe7e8;
    --color-danger-border:  #e0a3a7;

    --color-info:           #1b557a;
    --color-info-bg:        #e2eef6;
    --color-info-border:    #a9c8de;

    /* Focus ring — visible against every background combination. */
    --color-focus:         #1b6dab;

    /* ─── Typography ────────────────────────────────────────────
     * System sans for UI; an optional serif for prose body if added later.
     * Base 16px / 1.55 line-height. Modular scale × 1.2.
     */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Liberation Sans", sans-serif;
    --font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --text-xs:    0.75rem;    /* 12px — captions, badges */
    --text-sm:    0.875rem;   /* 14px — small UI */
    --text-base:  1rem;       /* 16px — body */
    --text-lg:    1.125rem;   /* 18px — lede */
    --text-xl:    1.25rem;    /* 20px — h3 */
    --text-2xl:   1.5rem;     /* 24px — h2 */
    --text-3xl:   1.875rem;   /* 30px — h1 */
    --text-4xl:   2.25rem;    /* 36px — hero */
    --text-5xl:   3rem;       /* 48px — display */

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.55;
    --leading-prose:  1.65;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --weight-bold:    700;

    --tracking-tight: -0.01em;
    --tracking-wide:  0.04em;

    /* ─── Spacing (4px base) ────────────────────────────────────
     * Use these for padding/margin/gap. Don't introduce one-off values.
     */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.5rem;    /* 24px */
    --space-6:  2rem;      /* 32px */
    --space-7:  3rem;      /* 48px */
    --space-8:  4rem;      /* 64px */

    /* ─── Layout ──────────────────────────────────────────────── */
    --max-width:        72rem;
    --max-width-prose:  44rem;   /* readable measure for body copy */
    --max-width-form:   36rem;   /* single-column form width */

    /* ─── Border radius ───────────────────────────────────────── */
    --radius-sm:   2px;
    --radius:      4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-pill: 999px;

    /* ─── Shadow ──────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 2px 6px rgba(0,0,0,0.06);
    --shadow-lg: 0 6px 18px rgba(0,0,0,0.08);

    /* ─── Motion ──────────────────────────────────────────────── */
    --duration-fast: 100ms;
    --duration:      180ms;
    --duration-slow: 300ms;
    --easing:        cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Z-index scale ─────────────────────────────────────── */
    --z-header:     20;
    --z-dropdown:   30;
    --z-toast:      40;
    --z-modal:      50;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration:      0ms;
        --duration-slow: 0ms;
    }
}