/**
 * Edale Financial — Plugin Design Tokens (CSS)
 *
 * Single source of truth for all WordPress plugin stylesheets.
 * Values mirror the WordPress theme's CSS custom properties (style.css :root)
 * so every plugin automatically follows the master brand.
 *
 * Load this file FIRST (before portal.css and any other plugin CSS) by
 * registering it as a dependency in wp_enqueue_style().
 *
 * When building a new plugin, import this file and reference var(--edale-*).
 * Never hard-code brand colours, fonts, or radii in plugin stylesheets.
 *
 * Note: The JS equivalent (tokens.js) is used inside React iframes where
 * CSS custom properties from the parent page cannot cascade.
 */

:root {
  /* ── Brand colours ────────────────────────────────────────────────────── */
  /* Mirrors theme --color-primary / --color-primary-light etc.              */
  --edale-primary:          #0A1628;   /* Deep navy  — sidebar, dark chrome  */
  --edale-primary-light:    #162440;   /* Navy mid   — sidebar borders       */
  --edale-secondary:        #1565C0;   /* Blue       — interactive elements  */
  --edale-accent:           #C9A227;   /* Gold       — brand accent          */
  --edale-accent-light:     #F0C948;   /* Gold light — hover tints           */

  /* ── Status / semantic colours ───────────────────────────────────────── */
  --edale-success:          #2E7D32;
  --edale-success-bg:       #f0fdf4;
  --edale-success-border:   #86efac;
  --edale-error:            #C62828;
  --edale-error-bg:         #fef2f2;
  --edale-error-border:     #fca5a5;
  --edale-warning:          #d4842a;
  --edale-warning-bg:       #fffbf0;
  --edale-warning-border:   #f0d9ba;

  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --edale-bg:               #F5F7FA;   /* Page / section background          */
  --edale-surface:          #FFFFFF;   /* Cards, panels, modals              */
  --edale-border-light:     #E8ECF0;   /* Subtle borders                     */
  --edale-border:           #D0D7E2;   /* Default borders                    */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --edale-text:             #1A2332;   /* Primary text                       */
  --edale-text-mid:         #4A5568;   /* Secondary text                     */
  --edale-text-muted:       #8A9BB0;   /* Labels, placeholders               */

  /* ── Typography ───────────────────────────────────────────────────────── */
  --edale-font-body:        'Inter', 'Helvetica Neue', Arial, sans-serif;
  --edale-font-heading:     'Georgia', 'Times New Roman', serif;

  /* ── Border radii ─────────────────────────────────────────────────────── */
  --edale-radius-sm:        4px;
  --edale-radius-md:        8px;
  --edale-radius-lg:        12px;
  --edale-radius-pill:      20px;

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --edale-transition-fast:  150ms ease;
  --edale-transition-base:  250ms ease;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --edale-shadow-sm:        0 1px 3px rgba(10,22,40,0.06);
  --edale-shadow-md:        0 4px 12px rgba(10,22,40,0.08);
  --edale-shadow-lg:        0 8px 24px rgba(10,22,40,0.10);
}