/* =============================================================
   WORKOVA STOCKS — Design System
   design-system.css
   Core tokens · Reset · Typography · Utilities
   ============================================================= */

/* ── 1. CUSTOM PROPERTIES ────────────────────────────────────── */
:root {
  /* Brand palette */
  --clr-primary:        #2563EB;
  --clr-primary-dark:   #1D4ED8;
  --clr-primary-light:  #EFF6FF;
  --clr-primary-muted:  rgba(37, 99, 235, 0.08);

  --clr-navy:           #0A0F1E;
  --clr-navy-80:        rgba(10, 15, 30, 0.8);

  --clr-gain:           #00C896;
  --clr-gain-bg:        rgba(0, 200, 150, 0.10);
  --clr-loss:           #FF4D6A;
  --clr-loss-bg:        rgba(255, 77, 106, 0.10);
  --clr-neutral:        #F59E0B;
  --clr-neutral-bg:     rgba(245, 158, 11, 0.10);

  /* Surface */
  --surface-page:       #F5F7FB;
  --surface-card:       #FFFFFF;
  --surface-raised:     #FFFFFF;
  --surface-subtle:     #F0F2F7;
  --surface-overlay:    rgba(10, 15, 30, 0.48);

  /* Text */
  --text-primary:       #0A0F1E;
  --text-secondary:     #4B5568;
  --text-muted:         #94A3B8;
  --text-inverse:       #FFFFFF;
  --text-link:          #2563EB;

  /* Border */
  --border-subtle:      rgba(0, 0, 0, 0.06);
  --border-default:     rgba(0, 0, 0, 0.10);
  --border-strong:      rgba(0, 0, 0, 0.18);
  --border-focus:       #2563EB;

  /* Radius */
  --radius-sm:          8px;
  --radius-md:          12px;
  --radius-lg:          18px;
  --radius-xl:          24px;
  --radius-pill:        9999px;

  /* Spacing (8-pt grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Typography */
  --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

  --type-xs:    clamp(0.6875rem, 0.65rem + 0.19vw, 0.75rem);
  --type-sm:    clamp(0.75rem,   0.72rem + 0.15vw, 0.8125rem);
  --type-base:  clamp(0.875rem,  0.84rem + 0.18vw, 0.9375rem);
  --type-md:    clamp(1rem,      0.95rem + 0.25vw, 1.0625rem);
  --type-lg:    clamp(1.125rem,  1.05rem + 0.38vw, 1.25rem);
  --type-xl:    clamp(1.375rem,  1.2rem  + 0.88vw, 1.625rem);
  --type-2xl:   clamp(1.75rem,   1.4rem  + 1.75vw, 2.25rem);
  --type-3xl:   clamp(2.25rem,   1.7rem  + 2.75vw, 3.125rem);
  --type-4xl:   clamp(2.75rem,   2rem    + 3.75vw, 4rem);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(10, 15, 30, 0.04);
  --shadow-sm:  0 2px 8px rgba(10, 15, 30, 0.06), 0 1px 2px rgba(10, 15, 30, 0.04);
  --shadow-md:  0 4px 16px rgba(10, 15, 30, 0.08), 0 2px 4px rgba(10, 15, 30, 0.04);
  --shadow-lg:  0 8px 32px rgba(10, 15, 30, 0.12), 0 4px 8px rgba(10, 15, 30, 0.06);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.22);

  /* Layout */
  --container-max: 1320px;
  --container-pad: clamp(var(--sp-4), 4vw, var(--sp-12));
  --navbar-h:      64px;
  --ticker-h:      40px;
}

/* Dark mode tokens (architecture-ready, fully implemented) */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:    #0D1117;
    --surface-card:    #161C27;
    --surface-raised:  #1E2535;
    --surface-subtle:  #1A2234;
    --surface-overlay: rgba(0, 0, 0, 0.64);

    --text-primary:    #F0F4FF;
    --text-secondary:  #8B9DC3;
    --text-muted:      #4B6088;
    --text-inverse:    #0A0F1E;

    --border-subtle:   rgba(255, 255, 255, 0.05);
    --border-default:  rgba(255, 255, 255, 0.08);
    --border-strong:   rgba(255, 255, 255, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.52), 0 4px 8px rgba(0, 0, 0, 0.32);
  }
}


/* ── 2. RESET ────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:                16px;
  scroll-behavior:          smooth;
  text-size-adjust:         100%;
  -webkit-text-size-adjust: 100%;
  tab-size:                 4;
}

body {
  font-family:             var(--font-ui);
  font-size:               var(--type-base);
  line-height:             1.6;
  color:                   var(--text-primary);
  background-color:        var(--surface-page);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height:              100dvh;
  overflow-x:              hidden;
}

img,
svg,
video {
  display:   block;
  max-width: 100%;
  height:    auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  font:       inherit;
  background: none;
  border:     none;
  cursor:     pointer;
  color:      inherit;
}

input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight:     600;
  line-height:     1.2;
  letter-spacing:  -0.025em;
  color:           var(--text-primary);
}

p { color: var(--text-secondary); }

strong { font-weight: 600; }

hr {
  border:     none;
  border-top: 1px solid var(--border-subtle);
}

:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 2px;
}


/* ── 3. TYPOGRAPHY SCALE ─────────────────────────────────────── */
.text-xs   { font-size: var(--type-xs);   }
.text-sm   { font-size: var(--type-sm);   }
.text-base { font-size: var(--type-base); }
.text-md   { font-size: var(--type-md);   }
.text-lg   { font-size: var(--type-lg);   }
.text-xl   { font-size: var(--type-xl);   }
.text-2xl  { font-size: var(--type-2xl);  }
.text-3xl  { font-size: var(--type-3xl);  }
.text-4xl  { font-size: var(--type-4xl);  }

.font-mono { font-family: var(--font-data); }

.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }

.leading-tight   { line-height: 1.15; }
.leading-snug    { line-height: 1.35; }
.leading-normal  { line-height: 1.6;  }
.leading-relaxed { line-height: 1.75; }

.tracking-tight  { letter-spacing: -0.03em; }
.tracking-normal { letter-spacing: 0;       }
.tracking-wide   { letter-spacing: 0.06em;  }
.tracking-wider  { letter-spacing: 0.10em;  }

.text-primary   { color: var(--text-primary);   }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted);     }
.text-link      { color: var(--text-link);      }
.text-inverse   { color: var(--text-inverse);   }
.text-gain      { color: var(--clr-gain);       }
.text-loss      { color: var(--clr-loss);       }
.text-brand     { color: var(--clr-primary);    }

.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

.uppercase { text-transform: uppercase; }
.truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.sr-only {
  position:   absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
  border:      0;
}


/* ── 4. LAYOUT UTILITIES ─────────────────────────────────────── */
.container {
  width:     100%;
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-pad);
}

.flex       { display: flex;         }
.flex-col   { flex-direction: column;}
.flex-wrap  { flex-wrap: wrap;       }
.items-start{ align-items: flex-start;}
.items-center{align-items: center;   }
.items-end  { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center{ justify-content: center;      }
.justify-end   { justify-content: flex-end;    }
.justify-between{justify-content: space-between;}
.flex-1     { flex: 1;              }
.flex-none  { flex: none;           }
.shrink-0   { flex-shrink: 0;       }

.grid { display: grid; }

.gap-1  { gap: var(--sp-1);  }
.gap-2  { gap: var(--sp-2);  }
.gap-3  { gap: var(--sp-3);  }
.gap-4  { gap: var(--sp-4);  }
.gap-5  { gap: var(--sp-5);  }
.gap-6  { gap: var(--sp-6);  }
.gap-8  { gap: var(--sp-8);  }
.gap-10 { gap: var(--sp-10); }

.w-full  { width: 100%;      }
.h-full  { height: 100%;     }
.min-w-0 { min-width: 0;     }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky;   }
.top-0    { top: 0;             }
.inset-0  { inset: 0;           }
.z-nav    { z-index: 100;       }
.z-modal  { z-index: 200;       }
.z-toast  { z-index: 300;       }

.overflow-hidden { overflow: hidden;          }
.overflow-auto   { overflow: auto;            }
.overflow-x-auto { overflow-x: auto;          }

.block        { display: block;        }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex;  }
.hidden       { display: none;         }


/* ── 5. SPACING UTILITIES ────────────────────────────────────── */
.p-2  { padding: var(--sp-2);  }
.p-3  { padding: var(--sp-3);  }
.p-4  { padding: var(--sp-4);  }
.p-5  { padding: var(--sp-5);  }
.p-6  { padding: var(--sp-6);  }
.p-8  { padding: var(--sp-8);  }

.px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.px-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }

.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.py-6 { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.py-8 { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.py-12{ padding-top: var(--sp-12);padding-bottom: var(--sp-12);}
.py-16{ padding-top: var(--sp-16);padding-bottom: var(--sp-16);}
.py-20{ padding-top: var(--sp-20);padding-bottom: var(--sp-20);}
.py-24{ padding-top: var(--sp-24);padding-bottom: var(--sp-24);}

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mx-auto { margin-left: auto; margin-right: auto; }


/* ── 6. SURFACE UTILITIES ────────────────────────────────────── */
.bg-page    { background-color: var(--surface-page);   }
.bg-card    { background-color: var(--surface-card);   }
.bg-raised  { background-color: var(--surface-raised); }
.bg-subtle  { background-color: var(--surface-subtle); }
.bg-primary { background-color: var(--clr-primary);    }
.bg-navy    { background-color: var(--clr-navy);       }
.bg-gain    { background-color: var(--clr-gain-bg);    }
.bg-loss    { background-color: var(--clr-loss-bg);    }

.border-subtle  { border: 1px solid var(--border-subtle);  }
.border-default { border: 1px solid var(--border-default); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }


/* ── 7. CARD COMPONENT ───────────────────────────────────────── */
.card {
  background:    var(--surface-card);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-xs);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

.card--interactive {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card--interactive:hover {
  transform:    translateY(-2px);
  box-shadow:   var(--shadow-md);
  border-color: var(--border-default);
}


/* ── 8. BUTTON COMPONENTS ────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  font-family:     var(--font-ui);
  font-size:       var(--type-sm);
  font-weight:     500;
  line-height:     1;
  white-space:     nowrap;
  border-radius:   var(--radius-sm);
  padding:         10px var(--sp-4);
  border:          1px solid transparent;
  cursor:          pointer;
  transition:      background-color var(--dur-fast) var(--ease-out),
                   border-color     var(--dur-fast) var(--ease-out),
                   color            var(--dur-fast) var(--ease-out),
                   transform        var(--dur-fast) var(--ease-out),
                   box-shadow       var(--dur-fast) var(--ease-out);
  text-decoration: none;
  user-select:     none;
}

.btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline:    none;
}

.btn:active { transform: scale(0.975); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity:        0.45;
  pointer-events: none;
}

/* Primary */
.btn--primary {
  background-color: var(--clr-primary);
  color:            #FFFFFF;
  border-color:     var(--clr-primary);
}

.btn--primary:hover {
  background-color: var(--clr-primary-dark);
  border-color:     var(--clr-primary-dark);
}

/* Secondary */
.btn--secondary {
  background-color: var(--surface-card);
  color:            var(--text-primary);
  border-color:     var(--border-default);
}

.btn--secondary:hover {
  background-color: var(--surface-subtle);
  border-color:     var(--border-strong);
}

/* Ghost */
.btn--ghost {
  background-color: transparent;
  color:            var(--text-secondary);
  border-color:     transparent;
}

.btn--ghost:hover {
  background-color: var(--surface-subtle);
  color:            var(--text-primary);
}

/* Sizes */
.btn--sm {
  font-size: var(--type-xs);
  padding:   6px var(--sp-3);
}

.btn--lg {
  font-size: var(--type-md);
  padding:   13px var(--sp-6);
}

.btn--icon {
  padding:       8px;
  border-radius: var(--radius-sm);
  aspect-ratio:  1;
}


/* ── 9. BADGE / PILL ─────────────────────────────────────────── */
.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-1);
  font-size:       var(--type-xs);
  font-weight:     500;
  padding:         3px 8px;
  border-radius:   var(--radius-pill);
  white-space:     nowrap;
  letter-spacing:  0.02em;
}

.badge--gain {
  background-color: var(--clr-gain-bg);
  color:            var(--clr-gain);
}

.badge--loss {
  background-color: var(--clr-loss-bg);
  color:            var(--clr-loss);
}

.badge--neutral {
  background-color: var(--clr-neutral-bg);
  color:            var(--clr-neutral);
}

.badge--primary {
  background-color: var(--clr-primary-muted);
  color:            var(--clr-primary);
}

.badge--subtle {
  background-color: var(--surface-subtle);
  color:            var(--text-secondary);
}


/* ── 10. FORM ELEMENTS ───────────────────────────────────────── */
.input {
  width:            100%;
  font-family:      var(--font-ui);
  font-size:        var(--type-base);
  color:            var(--text-primary);
  background-color: var(--surface-card);
  border:           1px solid var(--border-default);
  border-radius:    var(--radius-sm);
  padding:          10px var(--sp-4);
  transition:       border-color var(--dur-fast) var(--ease-out),
                    box-shadow   var(--dur-fast) var(--ease-out);
  appearance:       none;
  -webkit-appearance: none;
}

.input::placeholder { color: var(--text-muted); }

.input:hover  { border-color: var(--border-strong); }

.input:focus  {
  outline:      none;
  border-color: var(--border-focus);
  box-shadow:   var(--shadow-focus);
}

.input-wrapper {
  position: relative;
}

.input-wrapper .input-icon {
  position:   absolute;
  left:        var(--sp-4);
  top:         50%;
  transform:   translateY(-50%);
  color:       var(--text-muted);
  pointer-events: none;
}

.input-wrapper .input--with-icon {
  padding-left: 42px;
}


/* ── 11. SKELETON LOADER ─────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background:           var(--surface-subtle);
  background-image:     linear-gradient(
    90deg,
    var(--surface-subtle) 0%,
    rgba(255,255,255,0.6) 50%,
    var(--surface-subtle) 100%
  );
  background-size:      400px 100%;
  background-repeat:    no-repeat;
  animation:            skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:        var(--radius-sm);
}

@media (prefers-color-scheme: dark) {
  .skeleton {
    background-image: linear-gradient(
      90deg,
      var(--surface-subtle) 0%,
      rgba(255,255,255,0.06) 50%,
      var(--surface-subtle) 100%
    );
  }
}


/* ── 12. CHART PLACEHOLDER ───────────────────────────────────── */
.chart-placeholder {
  position:         relative;
  overflow:         hidden;
  background:       var(--surface-subtle);
  border-radius:    var(--radius-md);
}

.chart-placeholder__inner {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-3);
  padding:         var(--sp-6);
}

.chart-placeholder__icon {
  width:        40px;
  height:       40px;
  border-radius: 50%;
  background:   var(--clr-primary-muted);
  display:      flex;
  align-items:  center;
  justify-content: center;
  color:        var(--clr-primary);
}

.chart-placeholder__label {
  font-size:  var(--type-xs);
  font-weight: 500;
  color:      var(--text-muted);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chart-placeholder__api-note {
  font-size:        var(--type-xs);
  color:            var(--clr-primary);
  background-color: var(--clr-primary-muted);
  padding:          3px 10px;
  border-radius:    var(--radius-pill);
  font-weight:      500;
}


/* ── 13. SECTION UTILITY ─────────────────────────────────────── */
.section {
  padding-top:    var(--sp-24);
  padding-bottom: var(--sp-24);
}

.section--sm {
  padding-top:    var(--sp-16);
  padding-bottom: var(--sp-16);
}

.section--lg {
  padding-top:    clamp(var(--sp-24), 10vw, 120px);
  padding-bottom: clamp(var(--sp-24), 10vw, 120px);
}

.section-label {
  font-size:      var(--type-xs);
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--clr-primary);
  margin-bottom:  var(--sp-3);
}

.section-title {
  font-size:      var(--type-3xl);
  font-weight:    700;
  letter-spacing: -0.03em;
  color:          var(--text-primary);
  line-height:    1.15;
}

.section-body {
  font-size:   var(--type-lg);
  color:       var(--text-secondary);
  line-height: 1.7;
  max-width:   60ch;
}


/* ── 14. DIVIDER ─────────────────────────────────────────────── */
.divider {
  height:           1px;
  background-color: var(--border-subtle);
  border:           none;
  margin:           0;
}


/* ── 15. ANIMATIONS ──────────────────────────────────────────── */
@keyframes fade-up {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from {
    opacity:   0;
    transform: scale(0.94);
  }
  to {
    opacity:   1;
    transform: scale(1);
  }
}

@keyframes slide-down {
  from {
    opacity:   0;
    transform: translateY(-8px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.animate-fade-up    { animation: fade-up  var(--dur-slow) var(--ease-out) both; }
.animate-fade-in    { animation: fade-in  var(--dur-base) var(--ease-out) both; }
.animate-scale-in   { animation: scale-in var(--dur-base) var(--ease-snap) both; }
.animate-slide-down { animation: slide-down var(--dur-base) var(--ease-out) both; }

.delay-1 { animation-delay: 80ms;  }
.delay-2 { animation-delay: 160ms; }
.delay-3 { animation-delay: 240ms; }
.delay-4 { animation-delay: 320ms; }
.delay-5 { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}


/* ── 16. RESPONSIVE HELPERS ──────────────────────────────────── */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-tablet-up { display: none !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
}

@media (max-width: 1023px) {
  .hide-mobile-tablet { display: none !important; }
}