/* =============================================================================
   HELLO PEOPLE DESIGN TOKENS
   Single source of truth for color, type, space, radius, elevation & motion.
   Everything downstream (components, site, decks) reads from these variables.
   Change a value here → it updates everywhere.

   Brand colors are read from the master logo SVG (Clod Design vectors):
     wordmark gradient  #1D50CF → #903DA4 → #E0497C
     ring (deep blue)   #0154B8
     "Hello" charcoal   #3F454C

   Layers:
   1. PRIMITIVES, raw brand values. Never reference these directly in UI.
   2. SEMANTIC, role-based tokens (bg, text, border…). Use THESE in UI.
   3. THEMING, semantic tokens re-mapped for dark mode.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     1. PRIMITIVES
     --------------------------------------------------------------------------- */

  /* Brand core, exact values from the logo */
  --hp-blue:        #1D50CF;   /* Link Blue, trust, intelligence, "the tech" */
  --hp-violet:      #903DA4;   /* Bridge Violet, where machine meets human */
  --hp-magenta:     #E0497C;   /* People Magenta, warmth, energy, humanity */

  /* Brand tints / shades (for hovers, fills, focus rings) */
  --hp-blue-800:    #0154B8;   /* deep ring blue */
  --hp-blue-700:    #123FA8;
  --hp-blue-600:    #1D50CF;
  --hp-blue-500:    #3A6BE0;
  --hp-blue-100:    #E4EAF9;
  --hp-magenta-700: #C43D6E;
  --hp-magenta-600: #E0497C;
  --hp-magenta-100: #FBE6EE;

  /* The signature gradient, ONE token, used everywhere, so it never drifts */
  --hp-gradient:        linear-gradient(120deg, #1D50CF 0%, #903DA4 52%, #E0497C 100%);
  --hp-gradient-135:    linear-gradient(135deg, #1D50CF 0%, #903DA4 52%, #E0497C 100%);
  --hp-gradient-soft:   linear-gradient(120deg, rgba(29,80,207,.12), rgba(144,61,164,.12), rgba(224,73,124,.12));
  --hp-gradient-text:   linear-gradient(120deg, #1D50CF, #903DA4, #E0497C);

  /* Neutrals, cool-biased (a hint of blue) so they read "chosen", not default grey */
  --hp-ink-950: #0C0D12;
  --hp-ink-900: #14161D;
  --hp-ink-800: #1B1E27;   /* primary text / dominant dark ground */
  --hp-ink-700: #2A2E39;
  --hp-ink-600: #3F454C;   /* the logo's "Hello" charcoal */
  --hp-ink-500: #565B6A;
  --hp-ink-400: #6B6F7D;   /* muted / secondary text */
  --hp-ink-300: #9195A3;
  --hp-ink-200: #C9CCD5;
  --hp-ink-150: #DDDFE7;
  --hp-ink-100: #E6E7EE;   /* hairline borders */
  --hp-ink-75:  #EFF0F4;
  --hp-ink-50:  #F4F4F8;   /* surface fills */
  --hp-ink-25:  #FAFAFC;   /* page paper */
  --hp-white:   #FFFFFF;

  /* Feedback (semantic status, distinct from the brand accent) */
  --hp-success: #12A150;
  --hp-success-bg: #E7F6EE;
  --hp-warning: #C77700;
  --hp-warning-bg: #FBF0DC;
  --hp-danger:  #E5484D;
  --hp-danger-bg: #FCE9E9;
  --hp-info:    #1D50CF;
  --hp-info-bg: #E4EAF9;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------------- */
  --hp-font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hp-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hp-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale, 1rem base, ~1.25 (major third) */
  --hp-text-xs:   0.75rem;    /* 12 */
  --hp-text-sm:   0.875rem;   /* 14 */
  --hp-text-base: 1rem;       /* 16 */
  --hp-text-md:   1.125rem;   /* 18 */
  --hp-text-lg:   1.25rem;    /* 20 */
  --hp-text-xl:   1.5rem;     /* 24 */
  --hp-text-2xl:  1.875rem;   /* 30 */
  --hp-text-3xl:  2.25rem;    /* 36 */
  --hp-text-4xl:  3rem;       /* 48 */
  --hp-text-5xl:  3.75rem;    /* 60 */
  --hp-text-6xl:  4.5rem;     /* 72 */

  --hp-weight-regular:  400;
  --hp-weight-medium:   500;
  --hp-weight-semibold: 600;
  --hp-weight-bold:     700;
  --hp-weight-extra:    800;

  --hp-leading-tight:   1.12;
  --hp-leading-snug:    1.25;
  --hp-leading-normal:  1.55;
  --hp-leading-relaxed: 1.7;

  --hp-tracking-tight:  -0.02em;
  --hp-tracking-snug:   -0.01em;
  --hp-tracking-normal: 0;
  --hp-tracking-wide:   0.08em;
  --hp-tracking-caps:   0.16em;   /* uppercase eyebrows / labels */

  --hp-measure: 65ch;             /* comfortable reading width */

  /* ---------------------------------------------------------------------------
     SPACING, 4px base scale
     --------------------------------------------------------------------------- */
  --hp-space-0:  0;
  --hp-space-1:  0.25rem;   /* 4  */
  --hp-space-2:  0.5rem;    /* 8  */
  --hp-space-3:  0.75rem;   /* 12 */
  --hp-space-4:  1rem;      /* 16 */
  --hp-space-5:  1.5rem;    /* 24 */
  --hp-space-6:  2rem;      /* 32 */
  --hp-space-7:  2.5rem;    /* 40 */
  --hp-space-8:  3rem;      /* 48 */
  --hp-space-9:  4rem;      /* 64 */
  --hp-space-10: 5rem;      /* 80 */
  --hp-space-11: 6rem;      /* 96 */
  --hp-space-12: 8rem;      /* 128 */

  /* ---------------------------------------------------------------------------
     RADIUS
     --------------------------------------------------------------------------- */
  --hp-radius-xs:   6px;
  --hp-radius-sm:   10px;
  --hp-radius-md:   14px;
  --hp-radius-lg:   20px;
  --hp-radius-xl:   28px;
  --hp-radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     ELEVATION, soft, cool-tinted shadows (never harsh black)
     --------------------------------------------------------------------------- */
  --hp-shadow-sm:  0 1px 2px rgba(20,22,34,.05), 0 1px 3px rgba(20,22,34,.05);
  --hp-shadow-md:  0 2px 6px rgba(20,22,34,.06), 0 8px 24px rgba(20,22,34,.07);
  --hp-shadow-lg:  0 4px 12px rgba(20,22,34,.08), 0 24px 56px rgba(20,22,34,.10);
  --hp-shadow-brand: 0 6px 18px rgba(29,80,207,.18), 0 18px 48px rgba(224,73,124,.14);

  /* ---------------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------------- */
  --hp-ease:        cubic-bezier(.2, .7, .3, 1);   /* calm, confident */
  --hp-ease-out:    cubic-bezier(0, 0, .2, 1);
  --hp-duration-1:  120ms;
  --hp-duration-2:  200ms;
  --hp-duration-3:  320ms;

  /* Layout */
  --hp-container:   1120px;
  --hp-container-narrow: 760px;

  /* ---------------------------------------------------------------------------
     2. SEMANTIC TOKENS (LIGHT), use these in UI, not the primitives above
     --------------------------------------------------------------------------- */
  --hp-bg:            var(--hp-ink-25);
  --hp-bg-elevated:   var(--hp-white);
  --hp-surface:       var(--hp-white);
  --hp-surface-2:     var(--hp-ink-50);
  --hp-surface-inset: var(--hp-ink-75);

  --hp-text:          var(--hp-ink-800);
  --hp-text-strong:   var(--hp-ink-900);
  --hp-text-muted:    var(--hp-ink-400);
  --hp-text-subtle:   var(--hp-ink-300);
  --hp-text-on-brand: var(--hp-white);

  --hp-border:        var(--hp-ink-100);
  --hp-border-strong: var(--hp-ink-200);

  --hp-accent:        var(--hp-blue);
  --hp-accent-hover:  var(--hp-blue-800);
  --hp-accent-quiet:  var(--hp-blue-100);
  --hp-focus-ring:    color-mix(in srgb, var(--hp-blue) 45%, transparent);
}

/* ---------------------------------------------------------------------------
   3. THEMING, dark mode  (values from the on-dark-bright logo variant)
   Order matters: OS-dark first (guarded so an explicit light choice wins),
   then explicit [data-theme="dark"] so the toggle wins in both directions.
   Only tokens are re-mapped here; components never restyle inside these blocks.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hp-blue:    #3D6DE4;
    --hp-violet:  #A84EBD;
    --hp-magenta: #EC5C90;
    --hp-gradient:      linear-gradient(120deg, #3D6DE4 0%, #A84EBD 52%, #E0497C 100%);
    --hp-gradient-soft: linear-gradient(120deg, rgba(61,109,228,.16), rgba(168,78,189,.16), rgba(224,73,124,.16));
    --hp-gradient-text: linear-gradient(120deg, #3D6DE4, #A84EBD, #EC5C90);

    --hp-bg:            var(--hp-ink-950);
    --hp-bg-elevated:   var(--hp-ink-900);
    --hp-surface:       #20242E;
    --hp-surface-2:     #191C24;
    --hp-surface-inset: #272C37;

    --hp-text:          #F2F3F8;
    --hp-text-strong:   #FFFFFF;
    --hp-text-muted:    #9195A3;
    --hp-text-subtle:   #6B6F7D;

    --hp-border:        #2F333E;
    --hp-border-strong: #3B4150;

    --hp-accent:        #3D6DE4;
    --hp-accent-hover:  #6188EC;
    --hp-accent-quiet:  rgba(61,109,228,.14);
    --hp-focus-ring:    color-mix(in srgb, #3D6DE4 55%, transparent);

    --hp-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --hp-shadow-md:  0 2px 8px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
    --hp-shadow-lg:  0 4px 14px rgba(0,0,0,.5), 0 26px 60px rgba(0,0,0,.5);
    --hp-shadow-brand: 0 6px 22px rgba(61,109,228,.35), 0 20px 55px rgba(224,73,124,.22);

    --hp-success-bg: rgba(18,161,80,.14);
    --hp-warning-bg: rgba(199,119,0,.16);
    --hp-danger-bg:  rgba(229,72,77,.16);
    --hp-info-bg:    rgba(61,109,228,.14);
  }
}

:root[data-theme="dark"] {
  --hp-blue:    #3D6DE4;
  --hp-violet:  #A84EBD;
  --hp-magenta: #EC5C90;
  --hp-gradient:      linear-gradient(120deg, #3D6DE4 0%, #A84EBD 52%, #E0497C 100%);
  --hp-gradient-soft: linear-gradient(120deg, rgba(61,109,228,.16), rgba(168,78,189,.16), rgba(224,73,124,.16));
  --hp-gradient-text: linear-gradient(120deg, #3D6DE4, #A84EBD, #EC5C90);

  --hp-bg:            var(--hp-ink-950);
  --hp-bg-elevated:   var(--hp-ink-900);
  --hp-surface:       #20242E;
  --hp-surface-2:     #191C24;
  --hp-surface-inset: #272C37;

  --hp-text:          #F2F3F8;
  --hp-text-strong:   #FFFFFF;
  --hp-text-muted:    #9195A3;
  --hp-text-subtle:   #6B6F7D;

  --hp-border:        #2F333E;
  --hp-border-strong: #3B4150;

  --hp-accent:        #3D6DE4;
  --hp-accent-hover:  #6188EC;
  --hp-accent-quiet:  rgba(61,109,228,.14);
  --hp-focus-ring:    color-mix(in srgb, #3D6DE4 55%, transparent);

  --hp-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --hp-shadow-md:  0 2px 8px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.4);
  --hp-shadow-lg:  0 4px 14px rgba(0,0,0,.5), 0 26px 60px rgba(0,0,0,.5);
  --hp-shadow-brand: 0 6px 22px rgba(61,109,228,.35), 0 20px 55px rgba(224,73,124,.22);

  --hp-success-bg: rgba(18,161,80,.14);
  --hp-warning-bg: rgba(199,119,0,.16);
  --hp-danger-bg:  rgba(229,72,77,.16);
  --hp-info-bg:    rgba(61,109,228,.14);
}