/**
 * Guidee CSS Variables – Design System (Clean Architecture)
 * Version: 1.4.0 (2026-07-07 – Documented role in Widget Creator clean separation)
 * Last modified: 2026-07-07
 *
 * 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;

  --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;

  --tracking-body: 0.02em;
  --tracking-heading: 0.06em;
  --tracking-caps: 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;
}