/* ===================================================================
   Circle Hit — Design Tokens
   Dark-first public web design system informed by the JDVD interface
   work and Apple HIG conventions. Presentation only.
   =================================================================== */

:root {
  color-scheme: dark;

  /* --- Shared multi-accent palette --- */
  --ch-celery:          #CCD487;
  --ch-mint:            #71AB90;
  --ch-sunshine:        #FEC268;
  --ch-royal-purple:    #5C4485;
  --ch-coral:           #EC6171;

  /* --- Neutrals --- */
  --ch-black:            #050506;
  --ch-charcoal:         #111216;
  --ch-surface:          #1A1C20;
  --ch-surface-elevated: #2A2D33;
  --ch-cream:            #F6F2EA;

  /* --- Semantic colors --- */
  --ch-success: #7AD69E;
  --ch-info:    #5C8DFF;
  --ch-warning: #FFB74D;
  --ch-danger:  #FF6881;
  --ch-muted:   #8B94A5;

  /* --- Brand / action roles --- */
  --accent:             var(--ch-royal-purple);
  --accent-hover:       #6D55A0;
  --accent-strong:      #7B5ED8;
  --accent-secondary:   var(--ch-mint);
  --accent-highlight:   var(--ch-sunshine);
  --accent-attention:   var(--ch-coral);
  --accent-positive:    var(--ch-celery);
  --accent-18:          rgba(92, 68, 133, 0.18);
  --accent-10:          rgba(92, 68, 133, 0.10);
  --accent-24:          rgba(92, 68, 133, 0.24);
  --mint-18:            rgba(113, 171, 144, 0.18);
  --sunshine-18:        rgba(254, 194, 104, 0.18);
  --coral-18:           rgba(236, 97, 113, 0.18);
  --celery-18:          rgba(204, 212, 135, 0.18);

  /* --- Surfaces / materials --- */
  --bg:                  var(--ch-black);
  --bg-soft:             var(--ch-charcoal);
  --surface:             rgba(26, 28, 32, 0.86);
  --surface-subtle:      rgba(17, 18, 22, 0.86);
  --surface-elevated:    var(--ch-surface-elevated);
  --surface-translucent: rgba(26, 28, 32, 0.72);
  --surface-glass:       rgba(26, 28, 32, 0.62);
  --surface-inset:       rgba(246, 242, 234, 0.06);
  --surface-hover:       rgba(246, 242, 234, 0.085);

  /* --- Text --- */
  --text:            var(--ch-cream);
  --text-primary:    var(--ch-cream);
  --text-secondary:  rgba(246, 242, 234, 0.74);
  --text-tertiary:   rgba(246, 242, 234, 0.48);
  --text-muted:      var(--ch-muted);
  --text-on-accent:  #FFFFFF;
  --text-on-dark:    rgba(246, 242, 234, 0.88);

  /* --- Hairlines / contrast --- */
  --border:          rgba(246, 242, 234, 0.10);
  --border-strong:   rgba(246, 242, 234, 0.18);
  --hairline:        rgba(246, 242, 234, 0.045);
  --focus-ring:      rgba(123, 94, 216, 0.34);

  /* --- Gradients --- */
  --brand-gradient: linear-gradient(135deg, var(--ch-royal-purple), var(--ch-coral), var(--ch-sunshine));
  --fresh-gradient: linear-gradient(135deg, var(--ch-coral), var(--ch-sunshine));
  --positive-gradient: linear-gradient(135deg, var(--ch-mint), var(--ch-celery));
  --premium-gradient: linear-gradient(135deg, var(--ch-royal-purple), #7B5ED8);
  --dark-card-gradient: linear-gradient(145deg, rgba(26, 28, 32, 0.96), rgba(5, 5, 6, 0.96));
  --page-gradient: linear-gradient(160deg, var(--ch-black) 0%, #090A0D 50%, var(--ch-black) 100%);

  /* --- Shadows / depth --- */
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.26);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.20);
  --shadow-card-hover: 0 18px 54px rgba(0, 0, 0, 0.46), 0 0 32px rgba(92, 68, 133, 0.16);
  --shadow-sheet: 0 -20px 60px rgba(0, 0, 0, 0.50);
  --inner-highlight: inset 0 1px 0 rgba(246, 242, 234, 0.03);
  --glow-purple: 0 0 28px rgba(92, 68, 133, 0.38);
  --glow-mint: 0 0 24px rgba(113, 171, 144, 0.28);
  --glow-sunshine: 0 0 24px rgba(254, 194, 104, 0.32);
  --glow-coral: 0 0 24px rgba(236, 97, 113, 0.30);

  /* --- Shape --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;
  --card-radius: 20px;

  /* --- Controls --- */
  --button-font-size:      17px;
  --button-line-height:    1.1765;
  --button-font-weight:    500;
  --button-letter-spacing: -0.022em;
  --button-radius:         980px;
  --button-height-sm:      38px;
  --button-height-md:      44px;
  --button-height-lg:      52px;
  --button-padding-sm:     8px 16px;
  --button-padding-md:     12px 22px;
  --button-padding-lg:     15px 28px;
  --button-border:         rgba(255, 255, 255, 0.16);
  --button-border-hover:   rgba(255, 255, 255, 0.28);

  /* --- Spacing: 4-point base --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* --- Layout --- */
  --container-width: 1200px;
  --container-narrow: 980px;
  --content-width: 760px;
  --header-height: 64px;
  --gutter: 24px;
  --container: min(var(--container-width), calc(100vw - 40px));
  --content: min(var(--content-width), calc(100vw - 40px));

  /* --- Typography --- */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-family: var(--font-text);

  --type-body-size: 17px;
  --type-body-line: 1.4706;
  --type-body-weight: 400;
  --type-body-tracking: -0.022em;
  --type-body-reduced-size: 14px;
  --type-body-reduced-line: 1.4286;
  --type-body-reduced-tracking: -0.016em;
  --type-intro-size: 21px;
  --type-intro-line: 1.381;
  --type-intro-weight: 400;
  --type-intro-tracking: 0.011em;
  --type-eyebrow-size: 13px;
  --type-eyebrow-line: 1.2;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: 0.08em;
  --type-title-size: clamp(36px, 7vw, 84px);
  --type-title-line: 1.03;
  --type-title-weight: 700;
  --type-title-tracking: -0.028em;
  --type-headline-size: clamp(28px, 3.4vw, 40px);
  --type-headline-line: 1.0835;
  --type-headline-weight: 650;
  --type-headline-tracking: -0.014em;
  --type-subhead-size: clamp(21px, 2.2vw, 28px);
  --type-subhead-line: 1.2;
  --type-subhead-weight: 600;
  --type-subhead-tracking: -0.014em;
  --type-card-title-size: 19px;
  --type-card-title-line: 1.18;
  --type-card-title-weight: 700;
  --type-card-title-tracking: -0.014em;
  --type-meta-size: 12px;
  --type-meta-line: 1.25;
  --type-meta-weight: 700;
  --type-meta-tracking: 0.04em;

  /* --- Forms --- */
  --form-field-height:       52px;
  --form-field-radius:       12px;
  --form-field-border:       rgba(246, 242, 234, 0.12);
  --form-field-border-hover: rgba(246, 242, 234, 0.22);
  --form-field-border-focus: var(--accent-strong);
  --form-field-bg:           rgba(246, 242, 234, 0.055);
  --form-field-bg-hover:     rgba(246, 242, 234, 0.085);
  --form-field-bg-focus:     rgba(246, 242, 234, 0.10);
  --form-field-placeholder:  rgba(246, 242, 234, 0.40);
  --form-focus-shadow:       0 0 0 4px var(--focus-ring);

  /* --- Motion --- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms var(--ease);
  --transition-normal: 200ms var(--ease);
  --transition-slow: 320ms var(--ease-bounce);
  --transition-reveal: 700ms var(--ease-spring);
}

@media (max-width: 734px) {
  :root {
    --gutter: 16px;
    --container: min(100% - 28px, var(--container-width));
    --content: min(100% - 28px, var(--content-width));
    --header-height: 56px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-secondary: rgba(246, 242, 234, 0.88);
    --text-tertiary: rgba(246, 242, 234, 0.70);
    --border: rgba(246, 242, 234, 0.22);
    --border-strong: rgba(246, 242, 234, 0.34);
  }
}