/* ============================================================
   DANIEL FORTUNE — Design Tokens (Brand Manual)
   Load order: tokens.css → style.css → token-overrides.css
   ============================================================ */

:root {
  /* ── Brand Colors (from Brand Manual) ── */
  --color-brand-blue:    #221986;
  --color-brand-purple:  #722c94;
  --color-brand-pink:    #ff0086;
  --color-brand-orange:  #ff8429;
  --color-brand-light:   #f4f4f4;
  --color-brand-dark:    #383838;

  /* ── Semantic Aliases ── */
  --primary:             var(--color-brand-blue);
  --secondary:           var(--color-brand-purple);
  --accent-pink:         var(--color-brand-pink);
  --accent-orange:       var(--color-brand-orange);

  /* ── Gradient ── */
  --gradient:            linear-gradient(135deg, #221986 0%, #722c94 50%, #ff0086 100%);

  /* ── Jobie Template Compatibility ── */
  --rgba-primary-1:      rgba(34, 25, 134, 0.1);
  --rgba-primary-2:      rgba(34, 25, 134, 0.2);
  --rgba-primary-3:      rgba(34, 25, 134, 0.3);
  --rgba-primary-4:      rgba(34, 25, 134, 0.4);
  --rgba-primary-5:      rgba(34, 25, 134, 0.5);
  --rgba-primary-6:      rgba(34, 25, 134, 0.6);
  --rgba-primary-7:      rgba(34, 25, 134, 0.7);
  --rgba-primary-8:      rgba(34, 25, 134, 0.8);
  --rgba-primary-9:      rgba(34, 25, 134, 0.9);

  /* ── Text ── */
  --text-heading:        var(--color-brand-dark);
  --text-body:           #555;
  --text-muted:          #888;

  /* ── Actions ── */
  --action-primary:      var(--color-brand-blue);
  --action-hover:        #1a1268;
  --action-focus-ring:   rgba(34, 25, 134, 0.25);

  /* ── Surfaces ── */
  --surface-page:        var(--color-brand-light);
  --surface-card:        #ffffff;
  --surface-sidebar:     var(--gradient);

  /* ── Typography ── */
  --font-heading:        'Montserrat', sans-serif;
  --font-body:           'Poppins', sans-serif;
  --font-brand:          'Racing Sans One', cursive;

  /* ── Spacing ── */
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           16px;

  /* ── Shadows ── */
  --shadow-card:         0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:   0 8px 24px rgba(0, 0, 0, 0.12);
}