/*
 * Goose Commerce - Admin Brand Variables
 *
 * Central design tokens for consistent admin UI styling.
 * Colors, fonts, and shared properties are defined here
 * and consumed by admin.css, admin-settings.css, and inline styles.
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Brand Colors */
    --ggmc-primary: #0F766E;
    --ggmc-primary-hover: #0d6560;
    --ggmc-primary-light: #e6f4f3;
    --ggmc-secondary: #1E293B;
    --ggmc-text: #334155;
    --ggmc-text-light: #64748b;
    --ggmc-accent: #F97316;
    --ggmc-accent-hover: #ea6c10;
    --ggmc-accent-light: #fff7ed;

    /* Semantic Status Colors (unchanged) */
    --ggmc-success: #00a32a;
    --ggmc-error: #dc3232;
    --ggmc-warning: #dba617;
    --ggmc-info: #0073aa;

    /* UI Colors */
    --ggmc-bg: #f9f9f9;
    --ggmc-bg-light: #f0f6fc;
    --ggmc-border: #e2e8f0;
    --ggmc-border-dark: #cbd5e1;
    --ggmc-white: #ffffff;

    /* Fonts */
    --ggmc-font-heading: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
    --ggmc-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Apply fonts to all Goose Commerce admin pages */
[class*="ggmc-"] {
    font-family: var(--ggmc-font-body);
}

/* Branded page title with icon */
.ggmc-page-title {
    font-family: var(--ggmc-font-heading);
    color: var(--ggmc-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    clear: both;
    width: 100%;
}

.ggmc-page-title img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Headings use Bricolage Grotesque across all plugin pages */
[class*="ggmc-"] h1,
[class*="ggmc-"] h2,
[class*="ggmc-"] h3,
[class*="ggmc-"] h4 {
    font-family: var(--ggmc-font-heading);
}
