/* ============================================================
   Squadra Multi Family Office — Design Tokens
   Colors · Type · Spacing · Radii · Shadows · Motion
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-Extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-ExtralightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("fonts/Sentient-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Macan";
  src: url("fonts/Macan-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Macan";
  src: url("fonts/Macan-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand colors (earthy institutional palette) ---------- */
  --sq-stone:   #7f7e74;   /* warm neutral grey */
  --sq-caramel: #a8966c;   /* gold / caramel accent */
  --sq-olive:   #575238;   /* deep olive — institutional primary */
  --sq-milk:    #f9f8ef;   /* off-white paper */
  --sq-negro:   #1a1a1a;   /* near-black */
  --sq-blanco:  #ffffff;   /* pure white */

  /* Tonal steps (derived for UI depth — always check AA before using) */
  --sq-olive-900: #2f2d1f;
  --sq-olive-700: #413d27;
  --sq-olive-500: #575238;
  --sq-olive-300: #858067;
  --sq-olive-100: #d6d2c2;

  --sq-caramel-900: #5e5233;
  --sq-caramel-700: #87784f;
  --sq-caramel-500: #a8966c;
  --sq-caramel-300: #c7b994;
  --sq-caramel-100: #ece3cf;

  --sq-stone-900: #3d3c37;
  --sq-stone-700: #59584f;
  --sq-stone-500: #7f7e74;
  --sq-stone-300: #a8a79e;
  --sq-stone-100: #dedcd4;

  --sq-milk-50:  #fdfcf6;
  --sq-milk-100: #f9f8ef;
  --sq-milk-200: #eeebdb;
  --sq-milk-300: #e1ddc8;

  /* Semantic tokens (light / paper context) */
  --sq-bg:        var(--sq-milk);
  --sq-bg-elev:   var(--sq-blanco);
  --sq-bg-sunken: var(--sq-milk-200);

  --sq-fg:        var(--sq-negro);
  --sq-fg-muted:  var(--sq-stone-700);
  --sq-fg-subtle: var(--sq-stone-500);
  --sq-fg-on-accent: var(--sq-milk);

  --sq-border:        #e1ddc8;          /* milk-300 */
  --sq-border-strong: #b8b3a3;
  --sq-rule:          #d6d2c2;

  --sq-accent:        var(--sq-olive);
  --sq-accent-hover:  var(--sq-olive-700);
  --sq-accent-press:  var(--sq-olive-900);
  --sq-accent-quiet:  var(--sq-olive-100);

  --sq-highlight:         var(--sq-caramel);
  --sq-highlight-hover:   var(--sq-caramel-700);
  --sq-highlight-quiet:   var(--sq-caramel-100);

  /* Regulatory / compliance status — kept desaturated to stay on-brand */
  --sq-positive: #4e6b3a;    /* deep sage, passes AA on milk */
  --sq-warning:  #9a7a2b;    /* ochre */
  --sq-negative: #8c3a2a;    /* oxide red */
  --sq-info:     #4a5a6b;    /* slate */

  --sq-positive-bg: #e6ead8;
  --sq-warning-bg:  #f1e6c6;
  --sq-negative-bg: #f1d9d1;
  --sq-info-bg:     #dde2e9;

  /* ---------- Typography ---------- */
  --sq-serif: "Sentient", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sq-sans:  "Macan", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sq-mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — designed for institutional documents */
  --sq-text-2xs:  11px;
  --sq-text-xs:   12px;
  --sq-text-sm:   13px;
  --sq-text-base: 15px;
  --sq-text-md:   17px;
  --sq-text-lg:   20px;
  --sq-text-xl:   24px;
  --sq-text-2xl:  30px;
  --sq-text-3xl:  38px;
  --sq-text-4xl:  48px;
  --sq-text-5xl:  64px;
  --sq-text-6xl:  84px;

  --sq-leading-tight:   1.12;
  --sq-leading-snug:    1.28;
  --sq-leading-normal:  1.48;
  --sq-leading-relaxed: 1.65;

  --sq-tracking-tighter: -0.02em;
  --sq-tracking-tight:   -0.01em;
  --sq-tracking-normal:  0;
  --sq-tracking-wide:    0.04em;
  --sq-tracking-wider:   0.12em;  /* for eyebrows / uppercase labels */
  --sq-tracking-widest:  0.22em;

  /* ---------- Spacing (4px base) ---------- */
  --sq-space-0:  0;
  --sq-space-1:  4px;
  --sq-space-2:  8px;
  --sq-space-3:  12px;
  --sq-space-4:  16px;
  --sq-space-5:  20px;
  --sq-space-6:  24px;
  --sq-space-8:  32px;
  --sq-space-10: 40px;
  --sq-space-12: 48px;
  --sq-space-16: 64px;
  --sq-space-20: 80px;
  --sq-space-24: 96px;

  /* ---------- Radii (conservative — institutional) ---------- */
  --sq-radius-0:  0;
  --sq-radius-1:  2px;
  --sq-radius-2:  4px;
  --sq-radius-3:  6px;
  --sq-radius-4:  8px;
  --sq-radius-pill: 999px;

  /* ---------- Borders ---------- */
  --sq-border-thin:    1px solid var(--sq-border);
  --sq-border-rule:    1px solid var(--sq-rule);
  --sq-border-strong:  1px solid var(--sq-border-strong);
  --sq-border-accent:  1px solid var(--sq-olive);

  /* ---------- Elevation (minimal — prefer rules & fills over shadow) ---------- */
  --sq-shadow-0: none;
  --sq-shadow-1: 0 1px 2px rgba(26, 26, 26, 0.04), 0 0 0 1px rgba(26, 26, 26, 0.04);
  --sq-shadow-2: 0 2px 6px rgba(26, 26, 26, 0.06), 0 0 0 1px rgba(26, 26, 26, 0.05);
  --sq-shadow-3: 0 8px 24px rgba(26, 26, 26, 0.08), 0 0 0 1px rgba(26, 26, 26, 0.05);
  --sq-shadow-focus: 0 0 0 3px rgba(87, 82, 56, 0.25);

  /* ---------- Motion ---------- */
  --sq-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --sq-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --sq-dur-fast:  120ms;
  --sq-dur:       200ms;
  --sq-dur-slow:  320ms;
}

/* ============================================================
   Base + semantic typography classes
   ============================================================ */
html { font-family: var(--sq-sans); color: var(--sq-fg); background: var(--sq-bg); }
body {
  font-family: var(--sq-sans);
  font-size: var(--sq-text-base);
  line-height: var(--sq-leading-normal);
  color: var(--sq-fg);
  background: var(--sq-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sq-serif { font-family: var(--sq-serif); }
.sq-sans  { font-family: var(--sq-sans);  }
.sq-mono  { font-family: var(--sq-mono);  }

/* Display — editorial, serif, tight */
.sq-display-1 {
  font-family: var(--sq-serif);
  font-weight: 300;
  font-size: var(--sq-text-6xl);
  line-height: var(--sq-leading-tight);
  letter-spacing: var(--sq-tracking-tighter);
  color: var(--sq-fg);
}
.sq-display-2 {
  font-family: var(--sq-serif);
  font-weight: 300;
  font-size: var(--sq-text-5xl);
  line-height: var(--sq-leading-tight);
  letter-spacing: var(--sq-tracking-tight);
}

/* Headings */
.sq-h1, h1 {
  font-family: var(--sq-serif);
  font-weight: 400;
  font-size: var(--sq-text-4xl);
  line-height: var(--sq-leading-tight);
  letter-spacing: var(--sq-tracking-tight);
  color: var(--sq-fg);
}
.sq-h2, h2 {
  font-family: var(--sq-serif);
  font-weight: 400;
  font-size: var(--sq-text-3xl);
  line-height: var(--sq-leading-snug);
  letter-spacing: var(--sq-tracking-tight);
  color: var(--sq-fg);
}
.sq-h3, h3 {
  font-family: var(--sq-serif);
  font-weight: 500;
  font-size: var(--sq-text-2xl);
  line-height: var(--sq-leading-snug);
  color: var(--sq-fg);
}
.sq-h4, h4 {
  font-family: var(--sq-sans);
  font-weight: 500;
  font-size: var(--sq-text-lg);
  line-height: var(--sq-leading-snug);
  color: var(--sq-fg);
}

/* Body */
.sq-body, p {
  font-family: var(--sq-sans);
  font-weight: 400;
  font-size: var(--sq-text-base);
  line-height: var(--sq-leading-relaxed);
  color: var(--sq-fg);
}
.sq-body-sm { font-size: var(--sq-text-sm); line-height: var(--sq-leading-normal); }
.sq-body-lg { font-size: var(--sq-text-md); line-height: var(--sq-leading-relaxed); }

/* Eyebrows / labels — uppercase, tracked */
.sq-eyebrow {
  font-family: var(--sq-sans);
  font-weight: 500;
  font-size: var(--sq-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--sq-tracking-widest);
  color: var(--sq-fg-muted);
}
.sq-label {
  font-family: var(--sq-sans);
  font-weight: 500;
  font-size: var(--sq-text-xs);
  letter-spacing: var(--sq-tracking-wide);
  color: var(--sq-fg-muted);
  text-transform: uppercase;
}

.sq-caption {
  font-family: var(--sq-sans);
  font-size: var(--sq-text-xs);
  color: var(--sq-fg-muted);
  line-height: var(--sq-leading-normal);
}

/* Numeric — tabular for tables / figures */
.sq-num {
  font-family: var(--sq-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.sq-num-display {
  font-family: var(--sq-serif);
  font-weight: 300;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--sq-tracking-tight);
}

/* Quote — serif italic, olive rule */
.sq-quote {
  font-family: var(--sq-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--sq-text-xl);
  line-height: var(--sq-leading-snug);
  color: var(--sq-fg);
  border-left: 2px solid var(--sq-olive);
  padding-left: var(--sq-space-5);
}

/* Links */
a, .sq-link {
  color: var(--sq-olive);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--sq-dur) var(--sq-ease);
}
a:hover, .sq-link:hover { color: var(--sq-olive-700); text-decoration-thickness: 2px; }

/* Rule — horizontal divider */
.sq-rule { border: 0; border-top: var(--sq-border-rule); }