/**
 * Guidee CSS Variables – Design System (Clean Architecture)
 * Version: 1.4.2 (2026-07-23 – Condensed heading tracking)
 * Last modified: 2026-07-23
 *
 * ROLE IN CLEAN ARCHITECTURE:
 * - Single source of truth for all design tokens (colors, typography, spacing, buttons).
 * - Widget Creator system (universal-layout.css + components) MUST only reference these variables.
 * - No hardcoded colors allowed in widget or component CSS.
 * - Theme can override these variables per site/brand without touching plugin code.
 */

:root {
    /* ========================================
       CORE BRAND COLORS
       ======================================== */
    --color-charcoal: #121212;
    --color-cobalt: #0212EE;
    --color-cherry: #D20001;
    --color-forest: #15803D;
    --color-soft-pink: #FEC6E9;
    --color-sand: #F3F3E9;
    --color-white: #FFFFFF;
    --color-border-gray: #e0e0e0;

    /* Pros / Cons */
    --color-pros: var(--color-forest);
    --color-cons: var(--color-cherry);

    /* ========================================
       RGB HELPERS
       ======================================== */
    --color-charcoal-rgb: 18, 18, 18;
    --color-cobalt-rgb: 2, 18, 238;
    --color-white-rgb: 255, 255, 255;

    /* ========================================
       SEMANTIC / FUNCTIONAL COLORS
       ======================================== */
    --color-bg-base: var(--color-white);
    --color-bg-subtle: #f8f8f8;
    --color-bg-elevated: var(--color-white);
    --color-border-subtle: var(--color-border-gray);
    --color-border-strong: #d1d1d1;

    /* ========================================
       TYPOGRAPHY TEXT COLORS
       ======================================== */
    --color-text-primary: #121212;
    --color-text-secondary: #444444;
    --color-text-muted: #666666;
    --color-text-subtle: #888888;
    --color-text-inverse: #FFFFFF;

    /* ========================================
       LABEL / TAG COLORS
       ======================================== */
    --color-label-lime: #C4FE97;
    --color-label-lime-dark: #005143;
    --color-label-sky: #C7E2F7;
    --color-label-sky-dark: #1C325D;
    --color-label-amber: #FAF0A0;
    --color-label-amber-dark: #BA8332;
    --color-label-pink: #FED1F2;
    --color-label-pink-dark: #B945A2;
    --color-label-purple: #E8D2FF;
    --color-label-purple-dark: #493284;

    /* ========================================
       TYPOGRAPHY FONTS
       ======================================== */
    /* Headings */
    --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;

    /* Sans-serif body + UI → Now using Roboto */
    --font-body: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-ui: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Serif body text */
    --font-body-serif: "Lora", Georgia, "Times New Roman", serif;

    /* Font Sizes */
    --fs-h1: 80px;
    --fs-h1-tablet: 64px;
    --fs-h1-mobile: 44px;

    --fs-h2: 56px;
    --fs-h2-tablet: 56px;
    --fs-h2-mobile: 32px;

    --fs-h3: 32px;
    --fs-h3-tablet: 32px;
    --fs-h3-mobile: 28px;

    --fs-h4: 20px;
    --fs-h4-tablet: 20px;
    --fs-h4-mobile: 18px;

    /* Subheadline / Dek / Standfirst (under the H1) */
    --fs-subheadline: 24px;
    --fs-subheadline-tablet: 22px;
    --fs-subheadline-mobile: 20px;

    --fs-body-large: 18px;
    --fs-body-large-tablet: 18px;
    --fs-body-large-mobile: 16px;

    /* Weights & Line Heights */
    --fw-body-regular: 400;
    --fw-body-medium: 500;
    --fw-body-accent: 600;
    --fw-body-bold: 700;
    --fw-heading: 700;

    --lh-body: 1.65;
    --lh-heading: 1.15;
    --lh-subheadline: 1.45;

    --tracking-body: 0.02em;
    --tracking-heading: 0.01em;
    --tracking-caps: 0.01em;
    --tracking-subheadline: 0.01em;

    /* Button Design System */
    --wce-button-radius: 9999px;
    --wce-button-height: 48px;
    --wce-button-padding-x: 32px;
    --wce-button-font-size: 16px;
    --wce-button-font-weight: 700;
    --wce-button-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --wce-button-primary-bg: var(--color-cobalt);
    --wce-button-primary-color: var(--color-white);
    --wce-button-primary-border: var(--color-cobalt);

    --wce-button-secondary-bg: transparent;
    --wce-button-secondary-color: var(--color-charcoal);
    --wce-button-secondary-border: var(--color-charcoal);

    --wce-button-tertiary-bg: var(--color-charcoal);
    --wce-button-tertiary-color: var(--color-white);
    --wce-button-tertiary-border: var(--color-charcoal);

    --wce-button-ghost-bg: transparent;
    --wce-button-ghost-color: var(--color-charcoal);
    --wce-button-ghost-border: transparent;
}