/* ============================================================================
   POOOL — Colors & Type Foundation
   ----------------------------------------------------------------------------
   Single source of truth for the POOOL design language: base color + type
   primitives, plus semantic tokens (headings, body, buttons, badges…).
   Lifted directly from the production codebase (dashboard-tokens.css,
   ds-typography.css, fonts.css).

   FONT NOTE: The product ships 'TT Norms Pro' (commercial). The licensed woff2/
   woff/ttf files are self-hosted in fonts/ and wired via @font-face below.
   ============================================================================ */

/* ── TT Norms Pro — self-hosted brand webfont ─────────────────────────────── */
@font-face {
  font-family: 'TT Norms Pro';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/TT_Norms_Pro_Regular.woff2') format('woff2'),
       url('fonts/TT_Norms_Pro_Regular.woff') format('woff'),
       url('fonts/TT_Norms_Pro_Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/TT_Norms_Pro_Medium.woff2') format('woff2'),
       url('fonts/TT_Norms_Pro_Medium.woff') format('woff'),
       url('fonts/TT_Norms_Pro_Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/TT_Norms_Pro_Bold.woff2') format('woff2'),
       url('fonts/TT_Norms_Pro_Bold.woff') format('woff'),
       url('fonts/TT_Norms_Pro_Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/TT_Norms_Pro_ExtraBold.woff2') format('woff2'),
       url('fonts/TT_Norms_Pro_ExtraBold.woff') format('woff'),
       url('fonts/TT_Norms_Pro_ExtraBold.ttf') format('truetype');
}

:root {
  /* ── Font families ──────────────────────────────────────────────────── */
  --font-family: 'TT Norms Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Brand colors ──────────────────────────────────────────────────────
     Signature inverted pairing: electric BLUE surface + neon GREEN text. */
  --brand-blue:        #0000FF; /* electric blue — primary actions */
  --brand-blue-hover:  #0000CC;
  --brand-blue-active: #0000AA;
  --brand-blue-wordmark: #001DCA; /* the slightly deeper blue of the logo */
  --brand-green-mint:  #98FB96; /* mint — primary button text / secondary bg */
  --brand-green-neon:  #03FF88; /* neon green — checks, dots, accents */
  --brand-dark-blue:   #1B2559; /* deep navy — tabs, info text */

  /* ── Neutrals ──────────────────────────────────────────────────────── */
  --fg-heading-1: #181D27; /* primary headings */
  --fg-heading-2: #101828; /* section titles, values */
  --fg-body:      #344054; /* body text */
  --fg-secondary: #475467; /* secondary text / labels */
  --fg-muted:     #667085; /* muted text, placeholders */
  --fg-muted-2:   #717680; /* table labels, captions */
  --fg-disabled:  #98A2B3; /* @kind color */
  --fg-cell:      #535862; /* table cell text */

  --border-strong: #D0D5DD; /* input borders */
  --border:        #E5E7EB; /* card borders */
  --border-soft:   #E9EAEB; /* table borders */

  --bg-page:    #FAFAFA; /* app background */
  --bg-surface: #FFFFFF; /* cards / surfaces */
  --bg-hover:   #F2F4F7; /* ghost hover */
  --bg-row-hover: #F8F9FC; /* table row hover */
  --bg-subtle:  #F9FAFB;

  /* ── Status / semantic colors ──────────────────────────────────────── */
  --danger:        #D92D20;
  --danger-hover:  #B42318;
  --success-fg: #027A48;  --success-bg: #ECFDF3;
  --warning-fg: #B54708;  --warning-bg: #FFFAEB;
  --danger-fg:  #B42318;  --danger-bg:  #FEF3F2;
  --info-fg:    #1B2559;  --info-bg:    #EEF4FF;
  --neutral-fg: #344054;  --neutral-bg: #F2F4F7;

  /* ── Type scale (1rem = 16px) ──────────────────────────────────────── */
  --fs-2xs: 0.6875rem; /* 11 — micro labels */
  --fs-xs:  0.75rem;   /* 12 — captions, badges */
  --fs-sm:  0.875rem;  /* 14 — body, labels, table cells */
  --fs-md:  1rem;      /* 16 — inputs, buttons, emphasized body */
  --fs-lg:  1.125rem;  /* 18 — card titles */
  --fs-xl:  1.25rem;   /* 20 — section titles */
  --fs-2xl: 1.5rem;    /* 24 — large section titles */
  --fs-3xl: 1.75rem;   /* 28 — page-title icon scale */
  --fs-4xl: 2rem;      /* 32 — page titles */
  --fs-5xl: 2.5rem;    /* 40 — hero values */
  --fs-6xl: 3rem;      /* 48 — display */
  --fs-7xl: 4rem;      /* 64 — marketing hero */

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-xbold:   800; /* @kind font */

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-input:  8px;   /* buttons & inputs */
  --radius-card:   12px;  /* cards */
  --radius-card-lg: 16px; /* large / property cards */
  --radius-pill:   16px;  /* badges */
  --radius-bar:    30px;  /* progress bars */

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-card:     0px 1px 2px rgba(10, 13, 18, 0.05);
  --shadow-elevated: 0 1px 3px rgba(10,13,18,0.04), 0 8px 24px rgba(10,13,18,0.05);
  --shadow-property: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-property-hover: 0 16px 48px rgba(0, 0, 0, 0.10);

  /* ── Spacing rhythm ────────────────────────────────────────────────── */
  --space-section: 24px;
  --card-padding:  24px;
  --page-padding-x: 32px;
  --page-padding-y: 48px;
  --sidebar-width: 256px;
  --page-max-width: 1200px;

  /* ── Size scale (control heights — xs · sm · md · lg · xl) ───────────
     Unified across buttons, inputs, selects, badges, avatars. */
  --size-xs: 28px;
  --size-sm: 32px;
  --size-md: 40px;   /* default control height */
  --size-lg: 48px;
  --size-xl: 56px;
  --control-pad-xs: 4px 10px;
  --control-pad-sm: 6px 12px;
  --control-pad-md: 10px 18px;
  --control-pad-lg: 12px 24px;
  --control-pad-xl: 14px 28px;

  /* ── Motion (easing + duration tokens) ──────────────────────────────
     Restrained, functional. Press = scale .97 + opacity .92. */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    160ms; /* @kind other */
  --dur-slow:    240ms; /* @kind other */
  --dur-slower:  400ms; /* @kind other */
  --press-scale: 0.97; /* @kind other */
}

/* ============================================================================
   DARK MODE TOKENS
   Opt-in via [data-theme="dark"] on <html>/<body> (and honoured automatically
   under prefers-color-scheme: dark). Brand blue/green stay vivid — they pop on
   dark; only neutrals, surfaces and borders invert. Status tints darken.
   ============================================================================ */
:root[data-theme="dark"], [data-theme="dark"] {
  --fg-heading-1: #F5F6F8;
  --fg-heading-2: #FFFFFF;
  --fg-body:      #CDD2DC;
  --fg-secondary: #98A2B3;
  --fg-muted:     #717680;
  --fg-disabled:  #5A616E;
  --fg-muted-2:   #85899055;
  --fg-cell:      #B0B6C0;

  --border-strong: #3A3F4B;
  --border:        #2A2E38;
  --border-soft:   #23262F;

  --bg-page:    #0C0E14;
  --bg-surface: #14171F;
  --bg-hover:   #1C2029;
  --bg-row-hover: #181B23;
  --bg-subtle:  #101319;

  --brand-green-mint: #98FB96; /* keep brand pairing intact on dark */

  --success-bg:#06291C; --warning-bg:#2B1D05; --danger-bg:#2A1311; --info-bg:#0E1A3A; --neutral-bg:#1C2029;
  /* Status FOREGROUNDS must lighten too, or dark text vanishes on dark tints */
  --success-fg:#75E8AE; --warning-fg:#FEC84B; --danger-fg:#FDA29B; --info-fg:#A9C6FF; --neutral-fg:#CDD2DC;
  --danger:#F97066; --danger-hover:#FDA29B;

  --shadow-card:     0 1px 2px rgba(0,0,0,0.5);
  --shadow-elevated: 0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --fg-heading-1:#F5F6F8; --fg-heading-2:#FFFFFF; --fg-body:#CDD2DC; --fg-secondary:#98A2B3;
    --fg-disabled:#5A616E;
    --border-strong:#3A3F4B; --border:#2A2E38; --border-soft:#23262F;
    --bg-page:#0C0E14; --bg-surface:#14171F; --bg-hover:#1C2029; --bg-row-hover:#181B23; --bg-subtle:#101319;
    --success-bg:#06291C; --warning-bg:#2B1D05; --danger-bg:#2A1311; --info-bg:#0E1A3A; --neutral-bg:#1C2029;
    --success-fg:#75E8AE; --warning-fg:#FEC84B; --danger-fg:#FDA29B; --info-fg:#A9C6FF; --neutral-fg:#CDD2DC;
    --danger:#F97066; --danger-hover:#FDA29B;
  }
}

/* ============================================================================
   SEMANTIC TYPE CLASSES
   Mirror the production .ds-text-* scale. Use these instead of raw font sizes.
   ============================================================================ */

.t-display {            /* hero numbers / big values */
  font-family: var(--font-family);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-heading-2);
}

.t-page-title, h1.t {   /* page titles — 36px / 700 / -0.02em */
  font-family: var(--font-family);
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-heading-1);
  margin: 0;
}

.t-section, h2.t {      /* section titles — 20px / 700 */
  font-family: var(--font-family);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--fg-heading-2);
  margin: 0;
}

.t-card-title, h3.t {   /* card titles — 18px / 700 */
  font-family: var(--font-family);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--fg-heading-2);
  margin: 0;
}

.t-body, p.t {          /* body — 14px / 400 */
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.43;
  color: var(--fg-body);
}

.t-body-lg {            /* prominent body — 16px */
  font-family: var(--font-family);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--fg-body);
}

.t-label {              /* form labels — 14px / 500 */
  font-family: var(--font-family);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-body);
}

.t-caption {            /* captions / hints — 13px */
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  line-height: 1.38;
  color: var(--fg-muted);
}

.t-overline {           /* table headers / micro labels — 12px / 700 caps */
  font-family: var(--font-family);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted-2);
}

.t-money {              /* tabular financial numbers */
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--fg-heading-2);
}

/* Color modifiers */
.t--accent  { color: var(--brand-blue); }
.t--success { color: var(--success-fg); }
.t--warning { color: var(--warning-fg); }
.t--danger  { color: var(--danger); }
.t--muted   { color: var(--fg-muted); }