/* ============================================================
   FormArchitect — Design Tokens
   Color schema from eh_color_schema.pdf
   ============================================================ */

:root {

  /* ── PRIMARY BLUES ─────────────────────────────────────── */
  --blue:          #2456C7;
  --blue-pale:     #EBF0F8;
  --blue-dark:     #1A3E8C;
  --blue-darker:   #0F2A6E;
  --blue-bright:   #0066FF;
  --blue-bright-pale: #E8EEFA;

  /* ── ORANGES ────────────────────────────────────────────── */
  --orange:        #E8652A;
  --orange-pale:   #F4B99A;
  --orange-dark:   #D4622A;
  --orange-darker: #B85525;

  /* ── SLATE / NEUTRALS ───────────────────────────────────── */
  --slate:         #364560;
  --slate-light:   #C5CBD8;
  --slate-mid:     #3D4F6A;
  --dark:          #1A2335;

  /* ── GREENS ─────────────────────────────────────────────── */
  --green:         #2E9155;
  --green-pale:    #D4EDE0;
  --green-dark:    #1A5C3A;
  --green-darker:  #0F3D26;

  /* ── REDS ───────────────────────────────────────────────── */
  --red:           #E03030;
  --red-pale:      #FDE8E8;
  --red-dark:      #C22A2A;
  --red-darker:    #8B2222;

  /* ── GOLD / CREAM ───────────────────────────────────────── */
  --gold:          #E6A800;
  --gold-hover:    #CC9500;
  --cream:         #FEF5DC;

  /* ── SEMANTIC ALIASES ───────────────────────────────────── */
  --color-primary:        var(--blue);
  --color-primary-pale:   var(--blue-pale);
  --color-cta:            var(--gold);
  --color-cta-hover:      var(--gold-hover);
  --color-success:        var(--green);
  --color-success-bg:     var(--green-pale);
  --color-error:          var(--red);
  --color-error-bg:       var(--red-pale);
  --color-warning:        var(--orange);

  /* ── PAGE SURFACES ──────────────────────────────────────── */
  --bg:            #F5F0E6;   /* warm cream — matches design screenshot */
  --surface:       #FFFFFF;
  --surface-raised: #FFFFFF;
  --border:        #DDE1EC;
  --border-focus:  var(--blue);
  --input-bg:      #F8F9FC;

  /* ── TEXT ───────────────────────────────────────────────── */
  --text-primary:  var(--dark);
  --text-secondary: var(--slate);
  --text-muted:    #8A97B0;
  --text-placeholder: #A4AFBE;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── RADII ───────────────────────────────────────────────── */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-full:   9999px;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-card:   0 4px 40px rgba(26, 35, 53, 0.08);
  --shadow-btn:    0 2px 12px rgba(230, 168, 0, 0.35);
  --shadow-btn-hover: 0 4px 20px rgba(230, 168, 0, 0.45);
  --shadow-input-focus: 0 0 0 3px rgba(36, 86, 199, 0.12);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition:    0.2s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}