/* ============================================================
   HOPE DESIGN SYSTEM — tokens.css
   v1.4 · May 2026
   Source of truth: DESIGN.md + DESIGN-IMPLEMENTATION.md
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLORS — Solar Family
     Warm, luminous, hopeful
     ---------------------------------------------------------- */
  --color-aurora:      #FEF8E0;
  --color-madrugada:   #FAE19A;
  --color-solar:       #F5C842; /* ★ BRAND ACCENT */
  --color-ambar:       #C49A1F;
  --color-crepusculo:  #8B6914;

  /* ----------------------------------------------------------
     COLORS — Anchor Family
     Cool, precise, structural
     ---------------------------------------------------------- */
  --color-ceu:         #E8F0F9;
  --color-mare:        #8CB4E0;
  --color-ancora:      #1C5FA8; /* ★ BRAND ACCENT */
  --color-profundo:    #144278;
  --color-abismo:      #1A1A2E;

  /* ----------------------------------------------------------
     COLORS — Neutrals
     ---------------------------------------------------------- */
  --color-nuvem:       #FFFFFF;
  --color-superficie:  #F7F7F9;
  --color-borda:       #E2E2E8;
  --color-mudo:        #5F5F6E; /* adjusted for WCAG AA */
  --color-sombra:      #3D3D45;
  --color-tinta:       #0D0D0F;

  /* ----------------------------------------------------------
     COLORS — Functional
     ---------------------------------------------------------- */
  --color-success:      #4A9F6B;
  --color-success-soft: rgba(74, 159, 107, 0.12);  /* 8.6:1 on white */
  --color-warning:      #C47A1F;
  --color-error:        #B83434;
  --color-error-soft:   rgba(184, 52, 52, 0.10);   /* 8.3:1 on white */
  --color-aurora-soft:  var(--color-aurora);        /* 9.1:1 on white */
  --color-info:        #634590;
  --color-celebrate:   #F5A8C0;

  /* ----------------------------------------------------------
     SEMANTIC EXTRAS
     ---------------------------------------------------------- */
  --color-borda-dark: #E0E0E8;  /* dark mode btn--primary hover surface */

  /* ----------------------------------------------------------
     SURFACES — Light mode (default)
     ---------------------------------------------------------- */
  --color-bg:            var(--color-nuvem);
  --color-bg-alt:        var(--color-superficie);
  --color-bg-inverse:    var(--color-abismo);
  --color-border:        var(--color-borda);
  --color-border-strong: var(--color-mudo);
  --color-text-1:        var(--color-tinta);
  --color-text-2:        var(--color-sombra);
  --color-text-3:        var(--color-mudo);
  --color-text-inverse:  var(--color-nuvem);
  --color-link:          var(--color-ancora);
  --color-link-hover:    var(--color-profundo);
  --color-focus-ring:    var(--color-ancora);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-display: 'Geist Sans', 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Geist Sans', 'Plus Jakarta Sans', sans-serif;

  /* Fluid type scale (clamp) */
  --fs-display: clamp(36px, 5vw, 52px);
  --fs-h1:      clamp(26px, 3.5vw, 32px);
  --fs-h2:      clamp(18px, 2.5vw, 22px);
  --fs-h3:      clamp(14px, 1.5vw, 16px);
  --fs-body:    clamp(14px, 1.2vw, 16px);
  --fs-body-sm: clamp(12px, 1vw, 13px);
  --fs-body-lg: clamp(15px, 1.4vw, 17px);   /* hero body, case hero subtitle */
  --fs-body-xl: clamp(16px, 1.7vw, 19px);   /* case lead text, pivot lead text */
  --fs-label:   clamp(10px, 1vw, 11px);

  /* ----------------------------------------------------------
     SPACING — 4px base scale
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Semantic spacing tokens */
  --gap-tight:     var(--space-2);
  --gap-component: var(--space-4);
  --gap-element:   var(--space-6);
  --gap-section:   var(--space-12);
  --gap-page:      var(--space-24);

  /* ----------------------------------------------------------
     BORDERS & RADIUS
     ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --border-thin:   0.5px solid var(--color-border);
  --border-normal: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-sm:    0 1px 3px rgba(13, 13, 15, 0.06);
  --shadow-md:    0 4px 12px rgba(13, 13, 15, 0.08);
  --shadow-lg:    0 8px 32px rgba(13, 13, 15, 0.10);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   250ms;
  --duration-slower: 400ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;

  /* ----------------------------------------------------------
     GLOBAL URLS
     ---------------------------------------------------------- */
  --resume-url: "https://drive.google.com/file/d/14kBZ0YikjJjGseS0qQdrOuB4ix4UHtkm/view?usp=drive_link";
}

/* ----------------------------------------------------------
   DARK MODE — enabled via data-theme="dark"
   ---------------------------------------------------------- */
[data-theme="dark"] {
  --color-aurora-soft:    #2A2618;  /* 7.7:1 on #B4B4C8 */
  --color-success-soft:   #162418;  /* 8.3:1 on #B4B4C8 */
  --color-error-soft:     #261616;  /* 8.9:1 on #B4B4C8 */

  --color-bg:            var(--color-abismo);
  --color-bg-alt:        #242438;
  --color-bg-inverse:    var(--color-nuvem);
  --color-border:        #2E2E40;
  --color-border-strong: #4A4A60;
  --color-text-1:        var(--color-nuvem);
  --color-text-2:        #B4B4C8;
  --color-text-3:        #9090A8;  /* WCAG AA: 4.6:1 on dark mode cards */
  --color-text-inverse:  var(--color-tinta);
  --color-link:          var(--color-solar);
  --color-link-hover:    #FFD96B;
  --color-focus-ring:    var(--color-solar);
}

/* ----------------------------------------------------------
   REDUCED MOTION — respects system preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
}