/*
  HugeOne, shared stylesheet for both site pages (specs and design system).
  One file, one token layer, one set of component classes: index.html and
  design-system.html use the exact same markup patterns and class names.

  Layer order below:
    1. Tokens        (primitive -> semantic -> component, never skip a layer)
    2. Reset & base
    3. Layout         (left nav + main content, shared by both pages)
    4. Typography
    5. Tables
    6. Tags & badges
    7. Notes / callouts
    8. Content cards & flow steps          (specs page)
    9. Design system showcase primitives   (design-system page)
    10. Buttons
    11. Tabs & tab bar
    12. Card demo & avatar
    13. Swipe actions
    14. Footer
    15. Responsive

  Rule: no hardcoded hex/px color value outside this token block. Spacing and
  radius also go through tokens; a few one-off pixel values for fine detail
  (icon sizes, hairline widths) are the only accepted exception.

  Naming: color tokens read as "what it's for", not "what it looks like"
  (--color-text, not --color-navy-700). Every primitive actually feeds at
  least one semantic token below it; nothing is kept "just in case".
*/

:root {

  /* ---------- 1a. PRIMITIVE ---------- */

  /* Blue: the brand color. Reserved for interactive moments and surface tint,
     not for body text (see the neutral gray scale below for that). */
  --blue-50:  #f2f7ff;   /* page background */
  --blue-100: #e2ecfe;   /* surface tint: cards, tables, badges, notes */
  --blue-500: #3568b8;   /* accent, default: 5.5:1 on white */
  --blue-600: #2a58a5;   /* accent, hover/pressed: 6.9:1 on white */

  /* Gray: neutral text scale, a light cool undertone only, not the saturated
     blue the raw Figma export used for body copy. */
  --gray-900: #222224;   /* headings */
  --gray-700: #404454;   /* body text */
  --gray-500: #585f6e;   /* secondary text */
  --gray-400: #606485;   /* tertiary text, lightest of the four, still 5.3:1 on the page background */

  /* Amber: status color for roadmap / open-question markers. Never used for
     brand or interactive elements, so it stays visually distinct from blue. */
  --amber-600: #8a5a2b;
  --amber-50:  #f8efe1;

  --white: #ffffff;

  /* Translucent overlays: white for glass surfaces (tab bar, secondary and
     tertiary buttons), black for the "Focused" Figma state outline. */
  --overlay-white-15: rgba(255, 255, 255, 0.15);   /* glass fill */
  --overlay-white-30: rgba(255, 255, 255, 0.3);    /* glass fill, hover */
  --overlay-white-40: rgba(255, 255, 255, 0.4);    /* glass edge highlight */
  --overlay-white-60: rgba(255, 255, 255, 0.6);    /* glass fill, active/selected */
  --overlay-black-15: rgba(0, 0, 0, 0.15);
  --overlay-blue-glow-50: rgba(87, 144, 223, 0.5); /* primary button glow shadow */
  --overlay-shadow-navy-08: rgba(15, 53, 128, 0.08); /* card shadow tint */

  /* Typography */
  --font-family-ui: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-family-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-family-caption: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 56px;
  --space-10: 64px;

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* Nav sidebar width */
  --nav-width: 260px;


  /* ---------- 1b. SEMANTIC ---------- */

  /* Background & surface, in order from lightest (the page) to most present */
  --color-bg: var(--blue-50);
  --color-surface: var(--white);
  --color-surface-tint: var(--blue-100);
  --color-border: var(--blue-100);        /* quiet hairline: table rules, default note border, swatches */
  --color-border-strong: var(--blue-500); /* emphasis border: content cards */

  /* Text, darkest to lightest */
  --color-heading: var(--gray-900);
  --color-text: var(--gray-700);
  --color-text-muted: var(--gray-500);
  --color-text-subtle: var(--gray-400);
  --color-text-inverse: var(--white);

  /* Interaction (brand blue, accessible variants) */
  --color-accent: var(--blue-500);
  --color-accent-hover: var(--blue-600);
  --color-accent-disabled: rgba(87, 144, 223, 0.5); /* exempt from the AA threshold: disabled element, WCAG 1.4.3 */
  --color-focus-ring: var(--blue-500);

  /* Status: roadmap / open question, a distinct amber signal, never the brand blue */
  --color-status: var(--amber-600);
  --color-status-tint: var(--amber-50);
  --color-status-border: var(--amber-600);

  /* Effects */
  --shadow-card: 0px 4px 17px var(--overlay-shadow-navy-08);
  --shadow-accent-glow: 0px 10px 20px var(--overlay-blue-glow-50);

  /* Liquid glass (iOS-style layered glass: blur + saturation + specular edge + soft elevation) */
  --glass-blur: blur(28px) saturate(180%);
  --glass-tint: var(--overlay-white-15);
  --glass-tint-strong: var(--overlay-white-30);
  --glass-border: var(--overlay-white-40);
  --glass-elevation:
    0 8px 24px rgba(15, 53, 128, 0.18),
    0 1px 2px rgba(15, 53, 128, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Code chip: always white with a border so it stays visible regardless of the parent's background color */
  --code-bg: var(--color-surface);
  --code-border: var(--color-border);
  --code-text: var(--color-text);

  /* Table */
  --table-header-bg: var(--color-surface-tint);
  --table-body-bg: var(--color-surface);


  /* ---------- 1c. COMPONENT ---------- */

  /* Cross-cutting accessibility */
  --touch-target-min: 44px;  /* minimum tappable area for any interactive element (WCAG 2.5.8, Apple HIG) */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Button */
  --button-height: 56px;
  --button-padding-x: var(--space-6);
  --button-radius: var(--radius-lg);
  --button-primary-bg: var(--color-accent);
  --button-primary-bg-hover: var(--color-accent-hover);
  --button-primary-bg-disabled: var(--color-accent-disabled);
  --button-primary-text: var(--color-text-inverse);
  --button-primary-shadow: var(--shadow-accent-glow);
  --button-secondary-bg: var(--glass-tint);
  --button-secondary-bg-hover: var(--glass-tint-strong);
  --button-secondary-text: var(--color-accent);
  --button-secondary-blur: var(--glass-blur);
  --button-secondary-border: 1px solid var(--glass-border);
  --button-secondary-shadow: var(--glass-elevation);

  /* Tertiary (icon-only) button: swipe actions, compact circular controls */
  --button-tertiary-bg: var(--glass-tint);
  --button-tertiary-blur: var(--glass-blur);
  --button-tertiary-border: 1px solid var(--glass-border);
  --button-tertiary-shadow: var(--glass-elevation);

  /* Badge / pill (for example the funding stage) */
  --badge-bg: var(--color-border);
  --badge-text: var(--color-text);
  --badge-radius: var(--radius-pill);
  --badge-padding-x: var(--space-2);
  --badge-padding-y: var(--space-1);

  /* Card demo (the component preview, not the specs page's content card) */
  --card-bg: var(--color-surface);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-card);

  /* Avatar */
  --avatar-radius: var(--radius-pill);

  /* Tab bar (bottom navigation, liquid glass style) */
  --tabbar-bg: var(--glass-tint);
  --tabbar-blur: var(--glass-blur);
  --tabbar-radius: var(--radius-lg);
  --tabbar-border: 1px solid var(--glass-border);
  --tabbar-shadow: var(--glass-elevation);
}


/* ---------- 2. RESET & BASE ---------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-ui);
  line-height: 1.6;
}


/* ---------- 3. LAYOUT ---------- */

.layout {
  display: flex;
  min-height: 100vh;
}

.nav {
  width: var(--nav-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-5) var(--space-4);
}

.brand-logo {
  width: 150px;
  height: auto;
  display: block;
  margin-bottom: var(--space-2);
}

.brand-sub {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-8);
}

.nav-group {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin: var(--space-5) 0 var(--space-2);
  padding: 0 var(--space-3);
}

.nav-scroll a {
  display: block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
}

.nav-scroll a:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.nav-scroll a.active {
  background: var(--color-surface-tint);
  color: var(--color-accent);
  font-weight: 600;
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.nav-crosslink {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-5) var(--space-8);
  padding: 14px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-tint);
  box-shadow: var(--shadow-card);
  color: var(--color-heading);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.nav-crosslink:hover {
  background: var(--color-border);
}

.nav-crosslink svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}

.nav-crosslink span {
  display: block;
}

main {
  flex: 1;
  max-width: 900px;
  padding: var(--space-9) var(--space-10) 120px;
  min-width: 0;
}


/* ---------- 4. TYPOGRAPHY ---------- */

h1 {
  font-family: var(--font-family-display);
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0 0 var(--space-2);
}

.lede {
  color: var(--color-text-subtle);
  font-size: 1.05rem;
  max-width: 640px;
  margin-top: 0;
}

section {
  margin-top: var(--space-9);
}

section:first-of-type {
  margin-top: 0;
}

h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

section:first-of-type h2 {
  border-top: none;
  padding-top: 0;
}

h3 {
  font-size: 1.1rem;
  color: var(--color-heading);
  margin: var(--space-7) 0 var(--space-2);
}

p {
  max-width: 680px;
}

.desc {
  color: var(--color-text-muted);
  max-width: 680px;
}

ul, ol {
  max-width: 680px;
  padding-left: 1.3em;
}

li {
  margin-bottom: var(--space-2);
}

code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: var(--font-family-mono);
}


/* ---------- 5. TABLES ---------- */

.table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: auto;
  margin: var(--space-4) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

th, td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}

tr:last-child th, tr:last-child td {
  border-bottom: none;
}

th {
  background: var(--table-header-bg);
  font-weight: 600;
}

td {
  background: var(--table-body-bg);
}


/* ---------- 6. TAGS & BADGES ---------- */

.tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-tint);
  color: var(--color-text-subtle);
  margin-left: var(--space-2);
}

.tag.future {
  background: var(--color-status-tint);
  color: var(--color-status);
}

.tag.mvp {
  background: var(--color-border);
  color: var(--color-heading); /* dark text on tint for a stronger, safer contrast margin than accent-on-tint (4.6:1) */
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: var(--badge-radius);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: 14px;
  white-space: nowrap;
}


/* ---------- 7. NOTES / CALLOUTS ---------- */

.note {
  border: 1px solid var(--color-border);
  background: var(--color-border);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-size: 0.9rem;
  color: var(--color-text);
  margin: var(--space-4) 0;
}

.note.open {
  background: var(--color-status-tint);
  border-color: var(--color-status-border);
  color: var(--color-status);
}


/* ---------- 8. CONTENT CARDS & FLOW STEPS (specs page) ---------- */

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-4) 0;
}

.card-row .card {
  flex: 1 1 260px;
  margin: 0;
}

.card {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-card);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-inverse);
}

.card h3 {
  margin-top: 0;
}

.flow-step {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: flex-start;
}

.flow-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}


/* ---------- 9. DESIGN SYSTEM SHOWCASE PRIMITIVES ---------- */

.color-group {
  margin: var(--space-6) 0;
}

.color-group h3 {
  margin-top: 0;
  margin-bottom: var(--space-1);
}

.color-group .desc {
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.swatch {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.swatch-fill {
  height: 64px;
  background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%) 50% / 12px 12px;
}

.swatch-fill > span {
  display: block;
  width: 100%;
  height: 100%;
}

.swatch-meta {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  font-size: 0.78rem;
}

.swatch-meta .name { font-weight: 600; color: var(--color-text); display: block; }
.swatch-meta .value { color: var(--color-text-subtle); font-family: var(--font-family-mono); }

.type-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.type-row .type-meta {
  width: 260px;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  font-family: var(--font-family-mono);
}

.type-row .type-sample {
  color: var(--color-text);
}

.scale-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: 0.85rem;
}

.scale-row .scale-bar {
  background: var(--color-accent);
  height: 16px;
  border-radius: 4px;
}

.scale-row .scale-label {
  width: 160px;
  flex-shrink: 0;
  font-family: var(--font-family-mono);
  color: var(--color-text-muted);
}

.showcase {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-6);
  background: var(--color-surface-tint);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.showcase.dark {
  background: var(--color-heading);
}


/* ---------- 10. BUTTONS ---------- */

.btn {
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-radius: var(--button-radius);
  border: none;
  font-family: var(--font-family-ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.64px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
}

.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: var(--button-primary-shadow);
}

.btn-primary:hover { background: var(--button-primary-bg-hover); }
.btn-primary.is-disabled { background: var(--button-primary-bg-disabled); box-shadow: none; cursor: not-allowed; }
.btn-primary.is-focused { outline: 8px solid var(--overlay-black-15); outline-offset: 0; } /* renders the "Focused" variant as designed in Figma */

/* Secondary button: liquid glass, same recipe as the tab bar and tertiary icon buttons */
.btn-secondary {
  background: var(--button-secondary-bg);
  backdrop-filter: var(--button-secondary-blur);
  -webkit-backdrop-filter: var(--button-secondary-blur);
  border: var(--button-secondary-border);
  box-shadow: var(--button-secondary-shadow);
  color: var(--button-secondary-text);
}

.btn-secondary:hover { background: var(--button-secondary-bg-hover); }
.btn-secondary.is-disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-secondary.is-focused { outline: 8px solid var(--overlay-black-15); outline-offset: 0; }

/* Real keyboard focus (:focus-visible), separate from the "Focused" variant above; fires automatically on keyboard navigation for every interactive element */
.btn:focus-visible,
.tab-item:focus-visible,
.nav-scroll a:focus-visible,
.nav-crosslink:focus-visible,
.swipe-btn:focus-visible,
.tabbar-dot[role="tab"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}


/* ---------- 11. TABS & TAB BAR ---------- */

.tabs {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.tab-item {
  padding: 7px 0;
  font-size: 16px;
  color: var(--color-heading);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-family-ui);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
}

.tab-item.is-active {
  font-weight: 700;
  letter-spacing: 0.64px;
  border-bottom-color: var(--color-accent);
}

.tabbar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  height: 58px;
  padding: var(--space-2) var(--space-4);
  background: var(--tabbar-bg);
  backdrop-filter: var(--tabbar-blur);
  -webkit-backdrop-filter: var(--tabbar-blur);
  border: var(--tabbar-border);
  box-shadow: var(--tabbar-shadow);
  border-radius: var(--tabbar-radius);
}

.tabbar-dot {
  width: var(--touch-target-min);   /* 44px min; the original Figma trace was 42px, below the WCAG 2.5.8 threshold */
  height: var(--touch-target-min);
  border-radius: var(--radius-pill);
  background: var(--button-tertiary-bg);
  backdrop-filter: var(--button-tertiary-blur);
  -webkit-backdrop-filter: var(--button-tertiary-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-size: 0.7rem;
  border: var(--button-tertiary-border);
  cursor: pointer;
  padding: 0;
}

.tabbar-dot.is-active {
  background: var(--overlay-white-60);
  border: 1px solid var(--color-surface);
}


/* ---------- 12. CARD DEMO & AVATAR ---------- */

.card-demo {
  width: 280px;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-4);
}

.card-demo .avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--avatar-radius);
  background: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  font-weight: 700;
  margin-right: var(--space-3);
  vertical-align: middle;
}

.card-demo .title {
  font-family: var(--font-family-display);
  font-size: 20px;
  color: var(--color-text);
}

.card-demo .body {
  color: var(--color-text-subtle);
  font-size: 16px;
  margin-top: var(--space-2);
}


/* ---------- 13. SWIPE ACTIONS (tertiary, icon-only, liquid glass) ---------- */

.swipe-actions {
  display: flex;
  gap: var(--space-4);
}

.swipe-btn {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--button-tertiary-bg);
  backdrop-filter: var(--button-tertiary-blur);
  -webkit-backdrop-filter: var(--button-tertiary-blur);
  border: var(--button-tertiary-border);
  box-shadow: var(--button-tertiary-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-text-inverse);
  cursor: pointer;
}


/* ---------- 14. FOOTER ---------- */

footer {
  color: var(--color-text-subtle);
  font-size: 0.82rem;
  padding: var(--space-8) var(--space-10);
  border-top: 1px solid var(--color-border);
}


/* ---------- 15. RESPONSIVE ---------- */

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .nav { width: 100%; height: auto; position: relative; }
  main { padding: var(--space-8) var(--space-6); }
}