/* steep.css — Slash design system: token layer + base primitives.
   NOTE: filename kept as steep.css to avoid touching index.php <link>, but it
   now holds the dark "Slash" system (obsidian panels, gold ink) from DESIGN.md.
   Dark, editorial, private-banking register. Inter for labor, Playfair Display
   (Ivy Presto substitute) for display voice. */

:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-carbon: #030304;
  --color-inkwell: #08080a;
  --color-graphite: #121317;
  --color-slate: #1c1d22;
  --color-iron: #2e3038;
  --color-steel: #464853;
  --color-fog: #5e616e;
  --color-ash: #777a88;
  --color-silver: #9194a1;
  --color-pearl: #acafb9;
  --color-chalk: #cdcdcd;
  --color-bone: #e2e3e9;
  --color-paper: #ffffff;
  --color-ember-gold: #cc9166;
  --color-molten-gold: #ae9357;
  --color-chalk-glow: #fff0cc;
  --gradient-molten-gold: linear-gradient(103deg, rgb(174, 147, 87), rgb(255, 240, 204) 40%, rgb(174, 147, 87) 70%, rgba(189, 157, 79, 0));

  /* Confidence dots — on-palette only (no green/yellow). */
  --conf-alta:  #cc9166;  /* ember gold  */
  --conf-media: #9194a1;  /* silver      */
  --conf-baja:  #5e616e;  /* fog         */

  /* Fonts */
  --font-ivy-presto: 'Playfair Display', 'Ivy Presto', Georgia, 'Times New Roman', serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-ivy-presto);
  --font-sohne: var(--font-inter);   /* legacy alias */
  --font-signifier: var(--font-ivy-presto); /* legacy alias */

  /* Type scale */
  --text-caption: 12px;     --leading-caption: 1.5;     --tracking-caption: 0.01px;
  --text-body: 14px;        --leading-body: 1.43;       --tracking-body: -0.007em;
  --text-body-lg: 15px;     --leading-body-lg: 1.43;
  --text-subheading: 18px;  --leading-subheading: 1.38; --tracking-subheading: -0.007px;
  --text-heading-sm: 24px;  --leading-heading-sm: 1.33; --tracking-heading-sm: -0.013px;
  --text-heading: 32px;     --leading-heading: 1.25;    --tracking-heading: -0.02px;
  --text-heading-lg: 48px;  --leading-heading-lg: 1.13; --tracking-heading-lg: -0.022px;
  --text-display: 64px;     --leading-display: 1;       --tracking-display: -0.025px;
  --text-display-xl: 88px;  --leading-display-xl: 1;    --tracking-display-xl: -0.04px;

  /* Weights */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  /* legacy aliases */
  --fw-430: 400; --fw-450: 500; --fw-480: 500; --fw-500: 500;

  /* Spacing */
  --spacing-4: 4px; --spacing-6: 6px; --spacing-8: 8px; --spacing-10: 10px;
  --spacing-12: 12px; --spacing-14: 14px; --spacing-16: 16px; --spacing-20: 20px;
  --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-64: 64px; --spacing-80: 80px; --spacing-96: 96px;

  /* Radii */
  --radius-sm: 2px; --radius-lg: 10px; --radius-full: 9999px;
  --radius-tags: 9999px; --radius-cards: 10px; --radius-images: 10px;
  --radius-inputs: 2px; --radius-buttons: 2px; --radius-2xl: 10px;

  /* Surfaces */
  --surface-canvas: #000000;
  --surface-inkwell: #08080a;
  --surface-graphite: #121317;
  --surface-slate: #1c1d22;
  --surface-card: #1c1d22;
  --surface-nested: #08080a;

  /* The single permitted contact shadow (dropdowns / modals). */
  --shadow-contact: 0 8px 24px -6px #030304;

  --sidebar-width: 232px;
  --header-height: 60px;
  --content-max: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-canvas);
  color: var(--color-bone);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* Tabular numerals on money/percent. */
.tnum, .num, .money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Display serif — only ≥48px, hero/section heads + italic emphasis. */
.display {
  font-family: var(--font-ivy-presto);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}
.display-90, .display-xl { font-size: var(--text-display-xl); letter-spacing: var(--tracking-display-xl); }
.display-64 { font-size: var(--text-display); letter-spacing: var(--tracking-display); }
.display-48 { font-size: var(--text-heading-lg); letter-spacing: var(--tracking-heading-lg); }
.display-44 { font-size: var(--text-heading); letter-spacing: var(--tracking-heading); }
.gold-em { font-family: var(--font-ivy-presto); font-style: italic; font-weight: 500; color: var(--color-ember-gold); }

/* Cards — 1px border, surface tone, no shadow. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
}
.card--nested { background: var(--surface-nested); border-color: var(--color-iron); border-radius: var(--radius-sm); }

/* Buttons */
.btn-cta {
  background: var(--color-paper);
  color: var(--color-inkwell);
  border: 1px solid var(--color-paper);
  border-radius: var(--radius-buttons);
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.007em;
  padding: 9px 20px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-cta:hover { background: #f0f0f2; }
.btn-ghost {
  background: transparent;
  color: var(--color-bone);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-buttons);
  font-family: var(--font-inter);
  font-size: 15px;
  font-weight: var(--fw-regular);
  padding: 9px 20px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-ghost:hover { border-color: var(--color-bone); }
.btn-link {
  background: none;
  border: none;
  color: var(--color-ember-gold);
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: 6px 4px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-links);
  text-decoration: none;
}
.btn-link:hover { color: var(--color-chalk-glow); }
.btn-link:disabled { color: var(--color-steel); cursor: default; }

a { color: var(--color-ember-gold); text-decoration: none; }
a:hover { color: var(--color-chalk-glow); }

/* Chips / pills */
.chip, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--color-pearl);
  background: transparent;
  border: 1px solid var(--color-steel);
  line-height: 1.6;
}
.chip--fund { color: var(--color-bone); border-color: var(--fc, var(--color-steel)); }
.chip--fund::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: var(--fc, var(--color-ash)); display: inline-block; }
.chip--indiviso { color: var(--color-ember-gold); border-color: var(--color-ember-gold); cursor: help; }
.chip--ghost { color: var(--color-pearl); border-color: var(--color-iron); }
.chip--gold { color: var(--color-ember-gold); border-color: var(--color-ember-gold); }

/* Confidence dots */
.conf-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; flex: none; }
.conf-dot--alta  { background: var(--conf-alta); }
.conf-dot--media { background: var(--conf-media); }
.conf-dot--baja  { background: var(--conf-baja); }

/* Inputs */
.input, select.input, textarea.input {
  background: var(--surface-graphite);
  border: 1px solid var(--color-iron);
  border-radius: var(--radius-inputs);
  padding: 9px 12px;
  font-family: var(--font-inter);
  font-size: 14px;
  color: var(--color-bone);
}
.input::placeholder { color: var(--color-ash); }
.input:focus { outline: none; border-color: var(--color-ash); }
select.input { appearance: none; cursor: pointer; }

/* Hairline divider */
.hr { border: 0; border-top: 1px solid var(--color-iron); margin: var(--spacing-16) 0; }

.muted { color: var(--color-ash); }
.text-gold, .text-rust { color: var(--color-ember-gold); }
.gold { color: var(--color-ember-gold); }