/* ============================================================
   DropDoc / S3 Labs — colors & type foundations
   Sans family: Lato (bundled .ttf in fonts/).
   Mono family: Geist Mono (Google Fonts CDN — no file uploaded).
   ============================================================ */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 300;
  src: url("fonts/Lato-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400;
  src: url("fonts/Lato-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400;
  src: url("fonts/Lato-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700;
  src: url("fonts/Lato-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900;
  src: url("fonts/Lato-Black.ttf") format("truetype"); font-display: swap; }

:root {
  /* Surfaces — blue-tinted neutrals keyed to the brand */
  --surface-0: #ffffff;
  --surface-1: #f6faff;
  --surface-2: #eef4fb;
  --surface-border: #dfe9f1;
  --surface-border-strong: #bedef9;

  /* Text */
  --text-primary:   #09090b;
  --text-secondary: #52525b;
  --text-tertiary:  #a1a1aa;

  /* Brand */
  --brand:       #2e9df1;
  --brand-hover: #3e80b6;
  --brand-soft:  #c5dff6;
  --brand-ring:  rgba(46, 157, 241, 0.22);
  --brand-deep:  #2a5364;

  /* Mark accents (glyph only) */
  --mark-red:   #D85858;
  --mark-cream: #F2EADA;
  --mark-tan:   #B9A986;

  /* Semantic */
  --success: #16A34A; --success-soft: #F0FDF4;
  --danger:  #DC2626; --danger-soft:  #FEF2F2;
  --warning: #D97706; --warning-soft: #FFFBEB;

  /* Radii */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(9,9,11,.04);
  --shadow-sm: 0 1px 3px 0 rgba(9,9,11,.06), 0 1px 2px -1px rgba(9,9,11,.04);
  --shadow-md: 0 4px 12px -2px rgba(9,9,11,.08), 0 2px 4px -2px rgba(9,9,11,.04);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  /* Families — Lato is the brand face */
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — Lato ships 100/300/400/700/900 */
  --fw-thin:     100;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-bold:     700;
  --fw-black:    900;

  /* Sizes (Lato runs slightly smaller on the cap height than Geist,
     so display nudges up 2px and tracking loosens a hair) */
  --fs-display: 36px;
  --fs-xl:      22px;
  --fs-lg:      17px;
  --fs-md:      15px;
  --fs-base:    14px;
  --fs-sm:      13px;
  --fs-xs:      12px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-relaxed: 1.65;

  --track-tight:  -0.015em;
  --track-snug:   -0.005em;
  --track-normal: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #0a0a0a; --surface-1: #111113; --surface-2: #18181b;
    --surface-border: #232327; --surface-border-strong: #2e2e33;
    --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-tertiary: #52525b;
    --brand: #6FC5DA; --brand-hover: #8BD1E3;
    --brand-soft: rgba(111,197,218,.12); --brand-ring: rgba(111,197,218,.28);
  }
}

/* Semantic roles */
.ds-display, h1.ds {
  font-family: var(--font-sans); font-size: var(--fs-display);
  font-weight: var(--fw-black); line-height: var(--lh-tight);
  letter-spacing: var(--track-tight); color: var(--text-primary);
}
.ds-h2, h2.ds {
  font-family: var(--font-sans); font-size: var(--fs-md);
  font-weight: var(--fw-bold); letter-spacing: var(--track-snug);
  color: var(--text-primary);
}
.ds-lead {
  font-family: var(--font-sans); font-size: var(--fs-md);
  line-height: var(--lh-relaxed); color: var(--text-secondary);
}
.ds-body, p.ds {
  font-family: var(--font-sans); font-size: var(--fs-base);
  line-height: var(--lh-base); color: var(--text-primary);
}
.ds-body-sm { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-base); }
.ds-meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.ds-label {
  font-family: var(--font-sans); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); color: var(--text-secondary);
}
.ds-code, code.ds {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--surface-2); padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.ds-fg1{color:var(--text-primary);} .ds-fg2{color:var(--text-secondary);} .ds-fg3{color:var(--text-tertiary);}
.ds-brand{color:var(--brand);}
.ds-bg0{background:var(--surface-0);} .ds-bg1{background:var(--surface-1);} .ds-bg2{background:var(--surface-2);}

::selection { background: var(--brand); color: #fff; }