/* Color and spacing variables.
 *
 * The chrome is the website's, not this tool's own: the page is served from
 * the site at /pattern/, so it should not arrive in a different blue and a
 * different typeface. Every colour below is one the site already uses — #0085AD
 * is its link teal (the most-used colour in _sass/custom-styles.scss), and the
 * greys are that file's ramp. The artwork palettes are a separate thing and
 * live in static/js/modules/color-picker.js. */
:root {
    /* Primary Colors */
    --primary-blue: #0085ad;
    --primary-blue-dark: #0080a7;
    --primary-dark: #374151;
    --secondary-dark: #4b5563;

    /* Neutral Colors */
    --white: #ffffff;
    --off-white: #f9fafb;
    --light-gray: #f3f4f6;
    --border-light: #e5e7eb;
    --border-default: #d1d5db;
    --border-medium: #9ca3af;
    --text-dark: #374151;
    --text-muted: #6b7280;
    --text-light: #4b5563;

    /* Accent Colors. The house palette has no green, so an active toggle reads
       in the brand teal rather than introducing a colour the site never uses. */
    --success: #0085ad;
    --success-hover: #0080a7;
    --secondary-button: #6b7280;
    --secondary-button-hover: #4b5563;

    /* Spacing */
    --spacing-xs: 3px;
    --spacing-sm: 5px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 12px;
    --spacing-2xl: 15px;
    --spacing-3xl: 20px;
    --spacing-4xl: 30px;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* Fonts — the site's pair, loaded from the same Google Fonts stylesheet it
       uses, so the tool costs no extra font download when opened alongside it. */
    --font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.8rem;
    --text-base: 0.85rem;
    --text-md: 0.9rem;
    --text-lg: 0.95rem;
    --text-xl: 1rem;
    --text-2xl: 1.5rem;

    /* Z-index */
    --z-dropdown: 1000;
}