/* ============================================================
   CORDIANT THEME VARIABLES

   STEP 1: Import this file at the root of your application.
   Every component below references these variables.

   NAMING CONVENTION: All variable names are SEMANTIC — they
   describe the ROLE of the color, not the color itself.
   --color-accent is the decorative/attention color. Its value
   comes from the theme JSON and differs per property.
   ============================================================ */

/* ── Font Loading ──
   The display font is loaded at runtime by the theme loader.
   The @import below and --font-display fallback are safety nets
   for local development only. In production, the theme loader
   injects the correct font via <link> and sets --font-display
   to the property's display typeface before first paint.
   ── */

:root {
  /* ── Fonts ── */
  --font-display: Georgia, 'Times New Roman', serif;  /* Runtime loader overrides this */
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Brand Colors ──
     DEVELOPMENT FALLBACKS ONLY. The runtime theme loader
     overwrites every value below from the property's theme.json
     before first paint. These hex values exist solely so the UI
     renders if the loader hasn't fired yet. They are NOT the
     source of truth — the theme JSON is.
     ── */
  --color-primary: #4C0D16;
  --color-primary-rgb: 76, 13, 22;
  --color-primary-hover: #3A0A11;
  --color-secondary: #8B1538;
  --color-secondary-rgb: 139, 21, 56;
  --color-accent: #AC7F42;
  --color-accent-rgb: 172, 127, 66;
  --color-accent-hover: #8B6634;
  --color-accent-text: #6E5028;
  --color-heart: #E25555;             /* Intent/wishlist signal — red */

  /* ── Text ── (overwritten by theme loader) */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-light: #545454;
  --color-text-disabled: #736960;

  /* ── Surfaces ── (overwritten by theme loader) */
  --color-surface-base: #FFFFFF;
  --color-surface-subtle: #FAFAFA;
  --color-surface-warm: #FDF6F0;
  --color-surface-hover: #FAF6F0;

  /* ── Borders ── (overwritten by theme loader) */
  --color-border: #E0E0E0;
  --color-border-subtle: #F0F0F0;

  /* ── Shadows ── */
  --shadow-card: 0 4px 12px rgba(var(--color-primary-rgb), 0.12);
  --shadow-card-medium: 0 8px 24px rgba(var(--color-primary-rgb), 0.15);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* ── Contrast Text (for elements placed ON colored backgrounds) ── */
  --color-on-primary: #FFFFFF;       /* Text/icons on primary-colored backgrounds */
  --color-on-accent: #FFFFFF;        /* Text/icons on accent-colored backgrounds */

  /* ── Form Neutral States ── */
  --color-border-control: #767676;   /* WCAG 1.4.11 — 4.5:1 on white for non-text UI */
  --color-placeholder: #6E6E6E;
  --color-disabled-bg: #F9FAFB;
  --color-disabled-border: #E5E7EB;
  --color-disabled-text: #9CA3AF;

  /* ── UI Neutral States ── */
  --color-skeleton: #E5E7EB;
  --color-tooltip-bg: #1A1A1A;
  --color-tooltip-text: #FFFFFF;
  --color-toggle-off: #E5E7EB;
  --color-toggle-handle: #FFFFFF;

  /* ── Status (functional — NOT brand-tinted) ── */
  --color-error: #DC2626;
  --color-error-rgb: 220, 38, 38;
  --color-error-bg: #FEF2F2;
  --color-success: #22C55E;
  --color-success-bg: #F0FDF4;
  --color-warning: #EA580C;
  --color-warning-bg: #FFF7ED;

  /* ── Focus ── */
  --focus-ring: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
  --focus-ring-error: 0 0 0 3px rgba(var(--color-error-rgb), 0.15);
  --focus-border: var(--color-accent);

  /* ── Spacing ── */
  --card-padding: 40px 44px 36px;
  --btn-padding: 14px 32px;
  --input-padding: 14px 16px;
}