/* ============================================================
   PLUMB DESIGN SYSTEM — colors_and_type.css
   Revision A · 2026
   ============================================================ */

/* ------------------------------------------------------------
   GOOGLE FONTS IMPORT
   ⚠ Substitution: DM Sans for proprietary grotesk,
     DM Serif Display for high-contrast serif italic,
     JetBrains Mono for monospace readouts.
   Replace with licensed originals when available.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;1,400;1,500&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* ------------------------------------------------------------
   BASE COLOR TOKENS
   Five colors only. Each has a single job.
   ------------------------------------------------------------ */
:root {
  /* Primary palette */
  --color-graphite:    #1A1A1A;  /* primary text, mark — 60% of layout */
  --color-vellum:      #E8E2D5;  /* primary background — warm, drafting-paper */
  --color-prussian:    #1B3A5C;  /* links, trust marks, rare UI color */
  --color-redline:     #B83A2D;  /* alerts only — rare, deliberate */
  --color-brass:       #C9A961;  /* milestones, warmth — almost never in product UI */

  /* Derived tints (Graphite at opacity, for dividers/states) */
  --color-graphite-08: rgba(26, 26, 26, 0.08);
  --color-graphite-12: rgba(26, 26, 26, 0.12);
  --color-graphite-15: rgba(26, 26, 26, 0.15);
  --color-graphite-24: rgba(26, 26, 26, 0.24);
  --color-graphite-40: rgba(26, 26, 26, 0.40);
  --color-graphite-60: rgba(26, 26, 26, 0.60);

  /* Derived Prussian tints */
  --color-prussian-08: rgba(27, 58, 92, 0.08);
  --color-prussian-15: rgba(27, 58, 92, 0.15);

  /* Surface colors */
  --color-surface-base:    #E8E2D5;  /* vellum */
  --color-surface-raised:  #F4F0E8;  /* cards on vellum */
  --color-surface-white:   #FFFFFF;  /* clean panels */
  --color-surface-dark:    #1A1A1A;  /* code/terminal panels */
  --color-surface-dark-02: #222222;  /* slightly raised dark */
}

/* ------------------------------------------------------------
   SEMANTIC COLOR TOKENS
   Roles mapped to base colors — what the color *means*
   ------------------------------------------------------------ */
:root {
  /* Text */
  --fg-primary:    var(--color-graphite);       /* main body text */
  --fg-secondary:  var(--color-graphite-60);    /* secondary/supporting text */
  --fg-tertiary:   var(--color-graphite-40);    /* placeholders, disabled */
  --fg-inverse:    var(--color-vellum);         /* text on dark surfaces */
  --fg-link:       var(--color-prussian);       /* links, trust marks */
  --fg-alert:      var(--color-redline);        /* error, alert text */
  --fg-accent:     var(--color-brass);          /* milestone, warmth text */
  --fg-mono:       var(--color-graphite);       /* monospace readouts */

  /* Backgrounds */
  --bg-primary:    var(--color-vellum);         /* page background */
  --bg-raised:     var(--color-surface-raised); /* card background */
  --bg-white:      var(--color-surface-white);  /* panel background */
  --bg-dark:       var(--color-surface-dark);   /* code/terminal panels */
  --bg-alert:      rgba(184, 58, 45, 0.07);     /* alert backgrounds */
  --bg-prussian:   var(--color-prussian-08);    /* link/trust mark bg */

  /* Borders */
  --border-default:  var(--color-graphite-15);  /* hairline separator */
  --border-strong:   var(--color-graphite-24);  /* stronger divider */
  --border-alert:    var(--color-redline);      /* error border */
  --border-link:     var(--color-prussian);     /* focus ring */

  /* Interactive states */
  --state-hover-bg:  var(--color-graphite-08);  /* hover overlay */
  --state-press-bg:  var(--color-graphite-12);  /* press overlay */
}

/* ------------------------------------------------------------
   BASE TYPE TOKENS — Font families
   ------------------------------------------------------------ */
:root {
  --font-grotesk:  'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:    'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;
}

/* ------------------------------------------------------------
   TYPE SCALE — Size tokens (rem-based, 16px root)
   ------------------------------------------------------------ */
:root {
  --text-2xs:  0.625rem;   /*  10px — micro labels */
  --text-xs:   0.75rem;    /*  12px — corner labels, captions */
  --text-sm:   0.8125rem;  /*  13px — supporting text */
  --text-base: 0.9375rem;  /*  15px — body copy */
  --text-md:   1rem;       /*  16px — emphasized body */
  --text-lg:   1.125rem;   /*  18px — subheadings */
  --text-xl:   1.375rem;   /*  22px — section heads */
  --text-2xl:  1.75rem;    /*  28px — page titles */
  --text-3xl:  2.25rem;    /*  36px — large display */
  --text-4xl:  3rem;       /*  48px — hero display */
  --text-5xl:  4rem;       /*  64px — wordmark scale */
}

/* ------------------------------------------------------------
   TYPE SCALE — Weight tokens
   Two weights only. No bolds.
   ------------------------------------------------------------ */
:root {
  --weight-regular: 400;
  --weight-medium:  500;
}

/* ------------------------------------------------------------
   TYPE SCALE — Line height tokens
   ------------------------------------------------------------ */
:root {
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;
}

/* ------------------------------------------------------------
   TYPE SCALE — Letter spacing tokens
   ------------------------------------------------------------ */
:root {
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;
}

/* ------------------------------------------------------------
   SPACING SCALE — 4px base grid
   ------------------------------------------------------------ */
:root {
  --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;
  --space-32: 128px;
}

/* ------------------------------------------------------------
   BORDER RADIUS SCALE
   Engineering aesthetic: sharp. Max 6px in product UI.
   ------------------------------------------------------------ */
:root {
  --radius-none:   0;
  --radius-xs:     2px;   /* default — tags, most elements */
  --radius-sm:     3px;   /* buttons */
  --radius-md:     4px;   /* cards, panels */
  --radius-lg:     6px;   /* max allowed in product UI */
}

/* ------------------------------------------------------------
   SHADOW / ELEVATION SCALE
   Flat by default; low drama.
   ------------------------------------------------------------ */
:root {
  --shadow-0:  none;
  --shadow-1:  0 1px 3px rgba(26, 26, 26, 0.08);   /* card */
  --shadow-2:  0 4px 16px rgba(26, 26, 26, 0.12);  /* panel / popover */
  --shadow-3:  0 8px 32px rgba(26, 26, 26, 0.14);  /* modal */
}

/* ------------------------------------------------------------
   ANIMATION / MOTION TOKENS
   ------------------------------------------------------------ */
:root {
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  --duration-instant: 80ms;
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply to HTML elements globally.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-grotesk);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background-color: var(--bg-primary);
  margin: 0;
}

/* --- Headings --- */
h1, .h1 {
  font-family: var(--font-grotesk);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-6);
}

h2, .h2 {
  font-family: var(--font-grotesk);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}

h3, .h3 {
  font-family: var(--font-grotesk);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}

h4, .h4 {
  font-family: var(--font-grotesk);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
  margin: 0 0 var(--space-3);
}

h5, .h6, .h5, h6 {
  font-family: var(--font-grotesk);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  margin: 0 0 var(--space-2);
}

/* --- Body copy --- */
p {
  font-family: var(--font-grotesk);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}

/* --- Links --- */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

a:hover {
  opacity: 0.75;
}

/* --- Monospace / code --- */
code, pre, .mono, .readout {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--fg-mono);
}

pre {
  background: var(--bg-dark);
  color: var(--fg-inverse);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

/* --- Pull quote (serif italic, editorial only) --- */
blockquote, .pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
  border-left: 1px solid var(--border-strong);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
}

/* --- Labels / overlines --- */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  color: var(--fg-secondary);
  text-transform: lowercase;
}

/* --- Corner label (drafting sheet style) --- */
.corner-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  color: var(--fg-tertiary);
  text-transform: lowercase;
}

/* --- Hairline rule --- */
hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-8) 0;
}

/* --- Small / caption --- */
small, .caption {
  font-family: var(--font-grotesk);
  font-size: var(--text-xs);
  color: var(--fg-secondary);
  line-height: var(--leading-normal);
}

/* --- Strong emphasis (medium weight, not bold) --- */
strong, b {
  font-weight: var(--weight-medium);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-graphite  { color: var(--color-graphite); }
.text-prussian  { color: var(--color-prussian); }
.text-redline   { color: var(--color-redline); }
.text-brass     { color: var(--color-brass); }
.text-secondary { color: var(--fg-secondary); }
.text-tertiary  { color: var(--fg-tertiary); }

.bg-vellum      { background-color: var(--bg-primary); }
.bg-raised      { background-color: var(--bg-raised); }
.bg-dark        { background-color: var(--bg-dark); }

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

.weight-regular { font-weight: var(--weight-regular); }
.weight-medium  { font-weight: var(--weight-medium); }