/* ============================================================
   STUBEASE.COM — DESIGN TOKENS
   Brand: Pantone 021 C orange (#FE5000) + Deep Navy (#1a2744)
   ============================================================ */

/* TYPE SCALE */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* SPACING — 4px base */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;

  /* LAYOUT */
  --wrap:        1200px;
  --wrap-narrow:  760px;
  --wrap-mid:     960px;

  /* RADIUS */
  --r-sm:   0.375rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;

  /* TRANSITIONS */
  --ease: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* FONTS */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', 'Helvetica Neue', sans-serif;
}

/* LIGHT MODE — Navy/Orange brand palette */
:root, [data-theme="light"] {
  --bg:           #f5f4f0;
  --surface:      #ffffff;
  --surface-2:    #f0efe9;
  --surface-3:    #e8e6e0;
  --border:       #d6d3cc;
  --divider:      #e2e0da;

  --text:         #0d1520;
  --text-m:       #5a6070;
  --text-f:       #9aa0ac;
  --text-inv:     #ffffff;

  /* Pantone 021 C = #FE5000 */
  --orange:       #FE5000;
  --orange-h:     #e04500;
  --orange-hi:    #fff0eb;
  --orange-dark:  #c03800;

  --navy:         #1a2744;
  --navy-h:       #111b33;
  --navy-light:   #243258;
  --navy-hi:      #e8ecf5;

  --success:      #2d7a3a;
  --success-hi:   #d4edda;
  --warn:         #b85c00;
  --warn-hi:      #fdebd8;
  --err:          #c0222a;
  --err-hi:       #fbd8d9;

  --shadow-sm: 0 1px 3px rgba(13,21,32,.07);
  --shadow-md: 0 4px 14px rgba(13,21,32,.10);
  --shadow-lg: 0 12px 36px rgba(13,21,32,.14);

  /* ── color-* aliases (used by home.css, products.css, etc.) ── */
  --color-bg:           var(--bg);
  --color-surface:      var(--surface);
  --color-surface-alt:  var(--surface-2);
  --color-border:       var(--border);
  --color-text:         var(--text);
  --color-text-muted:   var(--text-m);
  --color-text-faint:   var(--text-f);
  --color-accent:       var(--orange);
  --color-accent-hover: var(--orange-h);
  --color-navy:         #1a2744;
  --color-bg-dark:      var(--bg);
  --color-surface-dark: var(--surface);
  --color-border-dark:  var(--border);
  --color-text-dark:    var(--text);
}

[data-theme="dark"] {
  --bg:           #1a1f2e;
  --surface:      #222840;
  --surface-2:    #2a3050;
  --surface-3:    #323860;
  --border:       #2a3548;
  --divider:      #22304a;

  --text:         #e8edf5;
  --text-m:       #8a9bba;
  --text-f:       #5a6a84;
  --text-inv:     #1a1f2e;

  --orange:       #FF6520;
  --orange-h:     #ff7a3a;
  --orange-hi:    #3d1a0a;
  --orange-dark:  #ff8550;

  --navy:         #2a3f6a;
  --navy-h:       #344e82;
  --navy-light:   #3a5490;
  --navy-hi:      #0e1828;

  --success:      #4aaa5a;
  --success-hi:   #0f2e17;
  --warn:         #f08030;
  --warn-hi:      #2e1800;
  --err:          #e04048;
  --err-hi:       #2e0a0c;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.45);

  /* ── color-* aliases for dark mode ── */
  --color-bg:           var(--bg);
  --color-surface:      var(--surface);
  --color-surface-alt:  var(--surface-2);
  --color-border:       var(--border);
  --color-text:         var(--text);
  --color-text-muted:   var(--text-m);
  --color-text-faint:   var(--text-f);
  --color-accent:       var(--orange);
  --color-accent-hover: var(--orange-h);
  --color-navy:         #162040;
  /* explicit dark helpers referenced by inline fallbacks */
  --color-bg-dark:      var(--bg);
  --color-surface-dark: var(--surface);
  --color-border-dark:  var(--border);
  --color-text-dark:    var(--text);

}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0d1118; --surface:#121820; --surface-2:#181f2a; --surface-3:#1e2735;
    --border:#2a3548; --divider:#22304a;
    --text:#dce3ed; --text-m:#7a8aaa; --text-f:#4a5a74; --text-inv:#0d1118;
    --orange:#FF6520; --orange-h:#ff7a3a; --orange-hi:#3d1a0a; --orange-dark:#ff8550;
    --navy:#2a3f6a; --navy-h:#344e82; --navy-light:#3a5490; --navy-hi:#0e1828;
    --success:#4aaa5a; --success-hi:#0f2e17; --warn:#f08030; --warn-hi:#2e1800;
    --err:#e04048; --err-hi:#2e0a0c;
    --shadow-sm:0 1px 3px rgba(0,0,0,.25); --shadow-md:0 4px 14px rgba(0,0,0,.35); --shadow-lg:0 12px 36px rgba(0,0,0,.45);
  }
}

/* ── Vocation Workflow Accordion ─────────────────────────────────────── */
.vocation-workflow {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border, #d4d1ca);
}

.wf-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text, #28251d);
  letter-spacing: 0.01em;
  text-align: left;
  gap: 0.5rem;
}

.wf-toggle:hover { color: #FE5000; }

.wf-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 220ms ease;
  color: #FE5000;
}

.wf-toggle[aria-expanded="true"] .wf-chevron {
  transform: rotate(180deg);
}

.wf-content {
  padding-bottom: 1.25rem;
}

.wf-content[hidden] { display: none; }

/* Steps */
.wf-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  .wf-steps { grid-template-columns: 1fr; }
}

.wf-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.wf-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FE5000;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.wf-step-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #28251d);
  margin-bottom: 0.2rem;
}

.wf-step-desc {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-text-muted, #7a7974);
}

/* SE vs SE II comparison */
.wf-comparison {
  background: var(--color-surface, #f9f8f5);
  border: 1px solid var(--color-border, #d4d1ca);
  border-radius: 0.5rem;
  padding: 1rem;
}

.wf-comp-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #7a7974);
  margin-bottom: 0.75rem;
}

.wf-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 560px) {
  .wf-comp-grid { grid-template-columns: 1fr; }
}

.wf-comp-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border, #d4d1ca);
  border-radius: 0.375rem;
  padding: 0.875rem;
}

.wf-comp-card--active {
  border-color: #FE5000;
  background: rgba(254, 80, 0, 0.03);
}

.wf-comp-product {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-text, #28251d);
}

.wf-comp-card--active .wf-comp-product { color: #FE5000; }

.wf-ease em { font-style: italic; }

.wf-comp-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted, #7a7974);
}

/* Dark mode */
[data-theme="dark"] .vocation-workflow {
  border-top-color: var(--color-border-dark, #393836);
}
[data-theme="dark"] .wf-toggle { color: var(--color-text-dark, #cdccca); }
[data-theme="dark"] .wf-step-title { color: var(--color-text-dark, #cdccca); }
[data-theme="dark"] .wf-comparison {
  background: var(--color-surface-dark, #1c1b19);
  border-color: var(--color-border-dark, #393836);
}
[data-theme="dark"] .wf-comp-card {
  background: var(--color-bg-dark, #171614);
  border-color: var(--color-border-dark, #393836);
}
[data-theme="dark"] .wf-comp-card--active {
  border-color: #FE5000;
  background: rgba(254, 80, 0, 0.05);
}
[data-theme="dark"] .wf-comp-product { color: var(--color-text-dark, #cdccca); }