/**
 * GuildCommerce Brand Tokens v1.0
 * Honey #FCB240 · Mint #86CCAA · Lavender #9C66AA · Mocha #524235
 * Headlines: Inter Tight (web) | Body: DM Sans
 *
 * Ported from the GuildCommerce showcase app (client/src/index.css).
 * These tokens are the source of truth for block-level styling.
 */

:root {
    /* Brand palette (raw) */
    --gc-honey:    #FCB240;
    --gc-mint:     #86CCAA;
    --gc-lavender: #9C66AA;
    --gc-mocha:    #524235;
    --gc-black:    #000000;
    --gc-white:    #FFFFFF;
    --gc-warn-yellow: #FFF200;
    --gc-warn-red:    #DA3831;

    /* Honey tints */
    --gc-honey-90: #fcb74e;
    --gc-honey-80: #fdc066;
    --gc-honey-70: #fdc97e;
    --gc-honey-50: #fdd9a0;
    --gc-honey-30: #feebcc;
    --gc-honey-10: #fff7e6;

    /* Mint tints */
    --gc-mint-90: #93d2b3;
    --gc-mint-80: #a3d9be;
    --gc-mint-70: #b3e0c9;
    --gc-mint-50: #c2e6d4;
    --gc-mint-30: #dcefe2;
    --gc-mint-10: #f3f9f5;

    /* Lavender tints */
    --gc-lav-90: #a878b6;
    --gc-lav-80: #b48bbf;
    --gc-lav-70: #c19dca;
    --gc-lav-50: #cdb0d4;
    --gc-lav-30: #e1d1e4;
    --gc-lav-10: #f4eaf6;

    /* Mocha tints */
    --gc-mocha-90: #645448;
    --gc-mocha-80: #76665b;
    --gc-mocha-50: #a89e96;
    --gc-mocha-30: #cac3bd;
    --gc-mocha-10: #ece9e7;

    /* Surfaces */
    --gc-bg:           #FBF8F2;   /* warm cream background */
    --gc-fg:           var(--gc-mocha);
    --gc-fg-muted:     #6e6359;
    --gc-card:         #FFFFFF;
    --gc-card-border:  #E6E1DA;
    --gc-border:       #DCD5CC;
    --gc-muted-bg:     #F1ECE3;

    /* Typography */
    --gc-font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --gc-font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --gc-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* Radii */
    --gc-radius-sm: 0.375rem;
    --gc-radius:    0.625rem;
    --gc-radius-lg: 1rem;
    --gc-radius-xl: 1.25rem;

    /* Shadows */
    --gc-shadow-sm: 0 1px 2px hsl(26 22% 14% / 0.06), 0 2px 4px -2px hsl(26 22% 14% / 0.04);
    --gc-shadow:    0 2px 4px hsl(26 22% 14% / 0.06), 0 4px 8px -2px hsl(26 22% 14% / 0.05);
    --gc-shadow-lg: 0 14px 32px -10px hsl(26 22% 14% / 0.16);
    --gc-shadow-xl: 0 24px 48px -16px hsl(26 22% 14% / 0.22);

    /* Layout */
    --gc-content-max: 1200px;
    --gc-content-pad: clamp(1rem, 4vw, 2rem);
}