/* =========================================================================
   PLUMB - Colors & Type foundations (design system v2)
   -------------------------------------------------------------------------
   THE REPORT IS A MEASURED DRAWING.
   Light-first: bone paper, graphite ink, one hot clay signal - a drawing
   board under daylight, not a dashboard in the dark. Every surface behaves
   like a sheet pinned to the board; every number reads like an instrument.
   The name is the system: a plumb line settles to true vertical, and the
   page hangs everything off a datum.

   Source of truth: plumb-frontend/plumb_ds_v2/colors_and_type.css. This
   copy differs only in font loading: the site self-hosts all three families
   (no Google Fonts request - GDPR + performance), and motion tokens load
   from interactions.css via a parallel <link>, not an @import.
   ========================================================================= */

/* ---------- FONTS - a three-hand cast ----------------------------------
   Space Grotesk  = the DISPLAY hand (variable, self-hosted).
   Instrument Sans = the WORKING hand (latin + latin-ext subsets).
   Space Mono     = the SURVEYOR'S hand (400/700, latin + latin-ext). */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---------- PAPER (surfaces, brightest → desk) -------------------- */
  --paper-0:   #FCFBF9;   /* the sheet - page background                 */
  --paper-50:  #F7F5F0;   /* recessed panel, input wells                 */
  --paper-100: #F0EDE6;   /* hover wash, hairline row dividers           */
  --paper-150: #E8E4DA;   /* pressed / avatar / deep recess              */
  --paper-200: #DDD9CF;   /* the desk - canvas behind sheets             */
  --plate:     #FFFFFF;   /* a mounted plate sits brighter than the page */

  /* ---------- GRAPHITE (ink, darkest → faintest) --------------------- */
  --graphite-900: #1E1E1B;   /* ink - headline text, the ink plate       */
  --graphite-700: #44443F;   /* body ink                                 */
  --graphite-500: #6E6D65;   /* annotation, secondary                    */
  --graphite-300: #A3A198;   /* faint - dims, stamps, ghost numerals     */

  /* ---------- RULES (drawn lines, not "borders") --------------------- */
  --line:        #E3DFD5;   /* default rule                              */
  --line-strong: #D2CDC0;   /* emphasised rule, control edges            */
  --hairline: color-mix(in oklab, var(--graphite-300) 30%, transparent);
  /* rules on the ink plate */
  --ink-line:   #33332F;
  --ink-line-2: #3A3A35;

  /* ---------- CLAY - the one red pencil ------------------------------ */
  /* One signal colour. It marks: the primary action, the live indicator,
     deal-breakers, the bob's cap facet. Never a large surface. */
  --clay-700: #9C4526;    /* press / link hover                          */
  --clay-600: #A03D1C;    /* text-safe deep clay (severity text)         */
  --clay-550: #AD4826;    /* button hover                                */
  --clay-500: #C4552F;    /* canonical clay                              */
  --clay-400: #D98A6B;    /* clay on the ink plate                       */
  --clay-300: #C58269;    /* dotted underlines, quiet clay rules         */
  --clay-100: #F5DCCF;    /* clay-tinted rule                            */
  --clay-50:  #FBF1EB;    /* clay-tinted wash (live badge, selected row) */

  /* ---------- SEVERITY - one red pencil + graphite ------------------- */
  --sev-high: var(--clay-600);
  --sev-med:  var(--graphite-700);
  --sev-low:  var(--graphite-500);
  --verified: var(--graphite-900);   /* verified = a stamp, not a green   */

  /* ---------- SEMANTIC TOKENS (use these in components) -------------- */
  --bg:               var(--paper-0);
  --bg-desk:          var(--paper-200);
  --bg-recess:        var(--paper-50);
  --bg-hover:         var(--paper-100);
  --bg-plate:         var(--plate);
  --bg-ink:           var(--graphite-900);
  --bg-scrim: color-mix(in oklab, var(--graphite-900) 32%, transparent);

  --fg:               var(--graphite-900);
  --fg-body:          var(--graphite-700);
  --fg-muted:         var(--graphite-500);
  --fg-subtle:        var(--graphite-300);
  --fg-on-ink:        #FCFBF9;
  --fg-on-ink-muted:  #A3A198;
  --fg-on-ink-faint:  #6E6D65;

  --border:           var(--line);
  --border-strong:    var(--line-strong);

  --accent:           var(--clay-500);
  --accent-fg:        #FFFFFF;
  --accent-hover:     var(--clay-550);
  --accent-press:     var(--clay-700);

  /* ---------- TYPE - a three-hand cast ------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* Type scale */
  --text-3xs: 9.5px;  /* dims, title-block cells, stamps       */
  --text-2xs: 11px;   /* eyebrows, mono annotations            */
  --text-xs:  12px;   /* meta, captions, mono refs             */
  --text-sm:  13.5px; /* table body, dense UI                  */
  --text-base:14px;   /* default UI text                       */
  --text-md:  15px;
  --text-lg:  17px;   /* lead body                             */
  --text-xl:  20px;   /* sub-display                           */
  --text-2xl: 24px;   /* h3                                    */
  --text-3xl: 32px;   /* h2                                    */
  --text-4xl: 44px;   /* h1                                    */
  --text-5xl: 64px;   /* display                               */
  --text-6xl: 92px;   /* hero display                          */

  --leading-tight: 1.02;
  --leading-snug:  1.2;
  --leading-body:  1.5;
  --leading-loose: 1.7;

  /* Tracking - Grotesk display runs tight; mono annotations run wide. */
  --track-display: -0.025em;
  --track-tight:   -0.015em;
  --track-body:    0;
  --track-eyebrow: 0.14em;
  --track-stamp:   0.12em;

  /* ---------- SPACING (4px base grid) -------------------------------- */
  --space-0:  0;
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- RADII - a drawing is square ---------------------------- */
  --radius-plate:   2px;
  --radius-sm:      4px;   /* chips, kbd, small tags          */
  --radius-control: 5px;   /* buttons, fields, segmented      */
  --radius-pill:    999px;

  /* ---------- SHADOWS - paper casts almost none ----------------------- */
  --shadow-plate: 0 1px 3px rgb(30 30 27 / 0.05);
  --shadow-2:     0 2px 8px rgb(30 30 27 / 0.08);
  --shadow-3:     0 12px 32px -8px rgb(30 30 27 / 0.18);
  --shadow-focus-ring: 0 0 0 3px color-mix(in oklab, var(--clay-500) 14%, transparent);

  /* ---------- MOTION -------------------------------------------------- */
  /* Curves, durations, keyframes and .plumb-* utilities live in
     interactions.css (linked separately, before this file). */
}

/* =========================================================================
   SEMANTIC TYPE STYLES - use these as classes or copy the rules
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  font-weight: 600;
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  font-weight: 600;
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  font-weight: 600;
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  font-weight: 600;
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
  font-weight: 500;
  color: var(--fg);
}

.t-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg-body);
  font-weight: 400;
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-body);
  font-weight: 400;
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-body);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}

/* The eyebrow is MONO - it is an annotation, not small marketing. */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--fg-body);
}

.t-mono-sm {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--track-stamp);
  color: var(--fg-subtle);
}

/* Numeric - KPIs, hectares, prices. Display hand, tabular figures. */
.t-numeric {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
  font-weight: 600;
}

/* Links - clay, with a quiet clay rule. Hover deepens. */
a { color: var(--clay-500); }
a:hover { color: var(--clay-700); }
a.link, .link {
  color: var(--clay-600);
  text-decoration: none;
  border-bottom: 1px solid var(--clay-300);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a.link:hover, .link:hover {
  color: var(--clay-700);
  border-bottom-style: solid;
  border-color: var(--clay-700);
}

/* Selection reads like a highlighter over the drawing. */
::selection {
  background: color-mix(in oklab, var(--clay-500) 22%, transparent);
  color: var(--graphite-900);
}