/* =========================================================================
   styleguide.css — design tokens for the Guides Portal.

   Override any of these CSS custom properties to retheme the app.
   Nothing in app.css should hard-code a color, radius, spacing, font or
   shadow — values come from here.
   ========================================================================= */

:root {
    /* ---------- Brand assets ----------
       Logo URLs live here as custom properties so a white-label theme can
       swap the brand mark alongside the color tokens — a single override
       point, no markup changes. The white-label resolver (added later) only
       needs to redefine these vars and the brand palette below. */
    --brand-logo:      url("../logo.svg");       /* full lockup: icon + wordmark, used on login + footer */
    --brand-logo-icon: url("../logo-icon.svg");  /* square mark only, used in the nav brand panel */

    /* ---------- Brand palette ---------- */
    --color-primary-50:  #e7f1fb;
    --color-primary-100: #cfe3f6;
    --color-primary-200: #9cc6ed;
    --color-primary-500: #1e6fc2;
    --color-primary-600: #1a5fa6;
    --color-primary-700: #154e88;
    --color-primary-contrast: #ffffff;

    --color-accent-500:  #f29127;
    --color-accent-600:  #d97c14;

    /* ---------- Semantic colors ---------- */
    --color-success:        #1f8a45;
    --color-success-bg:     #e6f5ec;
    --color-warning:        #b86b00;
    --color-warning-bg:     #fff4e0;
    --color-error:          #c0292c;
    --color-error-bg:       #fdecec;
    --color-info:           #1565c0;
    --color-info-bg:        #e7f1fb;

    /* ---------- Event-status palette ----------
       Six steps for the seven assignment statuses (Private + Cancelled share
       the muted-gray slot — both mean "off, no action expected"). Used by the
       chip border-left and the status-filter dropdown swatches. */
    --color-status-open:        var(--color-info);
    --color-status-applied:     var(--color-warning);
    --color-status-shortlisted: var(--color-accent-600);
    --color-status-confirmed:   var(--color-success);
    --color-status-rejected:    var(--color-error);
    --color-status-private:     var(--color-text-subtle);
    --color-status-cancelled:   var(--color-text-muted);

    /* ---------- Neutral surfaces ---------- */
    --color-bg:             #f5f7fa;
    --color-surface:        #ffffff;
    --color-surface-muted:  #f1f4f8;
    --color-surface-hover:  #eaeef5;
    --color-border:         #e2e6ed;
    --color-border-strong:  #c7cdd6;

    /* ---------- Text ---------- */
    --color-text:           #1a202c;
    --color-text-muted:     #5a6473;
    --color-text-subtle:    #8390a2;
    --color-text-inverse:   #ffffff;
    --color-link:           var(--color-primary-600);
    --color-link-hover:     var(--color-primary-700);

    /* ---------- Typography ---------- */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, "Noto Sans",
                        sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                        Consolas, "Liberation Mono", monospace;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight: 1.2;
    --line-height-base:  1.5;
    --line-height-loose: 1.7;

    /* ---------- Spacing scale (4px base) ---------- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ---------- Radii ---------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* ---------- Shadows ---------- */
    --shadow-xs:    0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:    0 4px 8px -2px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg:    0 12px 20px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -3px rgba(15, 23, 42, 0.05);
    --shadow-focus: 0 0 0 3px rgba(30, 111, 194, 0.25);

    /* ---------- Motion ---------- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* ---------- Layout ---------- */
    --layout-sidebar-width:    240px;
    --layout-topbar-height:    64px;
    --layout-bottomnav-height: 64px;
    --layout-footer-height:    48px;
    --layout-content-max:      1200px;
    --layout-gutter:            var(--space-4);

    /* ---------- Z-index ---------- */
    --z-topbar:    100;
    --z-sidebar:    90;
    --z-bottomnav: 100;
    --z-overlay:   200;
    --z-modal:     300;
}

/* Responsive overrides at larger breakpoints (kept here so themes can retune). */
@media (min-width: 768px) {
    :root {
        --layout-gutter: var(--space-6);
    }
}

@media (min-width: 1024px) {
    :root {
        --layout-gutter: var(--space-8);
    }
}

/* Reduced-motion: kill animations. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 1ms;
        --transition-base: 1ms;
    }
}