/* ============================================================
   Digital Allies — Colors & Type Foundation
   "Technological Solutions for People with Better Things to Do."

   95/5 Color Rule: 95% neutral canvas + 5% high-signal accents.
   Typography: Lexend Deca (headers) + JetBrains Mono (body/details).
   ============================================================ */

/* ----------------------------------------------------------
   Local variable fonts (preferred). Anything that imports
   colors_and_type.css picks them up automatically. Google
   Fonts remains a network fallback below so demo pages still
   work without the local files.
   ---------------------------------------------------------- */
@font-face {
  font-family: "Lexend Deca";
  src: url("fonts/LexendDeca-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/LexendDeca-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* All weights are now served from local files. No network fonts needed. */

:root {
  /* --------------------------------------------------------
     CORE PALETTE — the 5 anchor colors. Nothing else.
     -------------------------------------------------------- */
  --bone-white:    #F9F6F0;   /* Canvas. Soft, analog. */
  --charcoal:      #2D2D2D;   /* Structure. Borders & text. */
  --pulse-blue:    #3A7BD5;   /* Live connection. Action. */
  --light-pink:    #FADEEB;   /* Subtle accent / hover wash. */
  --signal-red:    #C5301A;   /* "Anderson Vermillion" — POI cue. */
  --pinned-note:   #FCFAED;   /* Pinned-note yellow (functional accent). */

  /* --------------------------------------------------------
     NEUTRAL SUPPORTING TINTS (use sparingly)
     -------------------------------------------------------- */
  --grid-line:     rgba(45, 45, 45, 0.07);   /* Technical Lace bg grid */
  --grid-line-strong: rgba(45, 45, 45, 0.18);
  --hairline:      rgba(45, 45, 45, 0.15);   /* dividers inside cards */
  --text-muted:    #6b6b6b;
  --text-soft:     #888888;
  --field-border:  #E0DDD5;                  /* per blueprint */

  /* --------------------------------------------------------
     SEMANTIC FOREGROUND / BACKGROUND
     -------------------------------------------------------- */
  --bg:            var(--bone-white);
  --bg-alt:        var(--pinned-note);
  --fg:            var(--charcoal);
  --fg-muted:      var(--text-muted);
  --fg-soft:       var(--text-soft);
  --fg-on-dark:    var(--bone-white);

  --border:        var(--charcoal);          /* the "structural border" */
  --border-soft:   var(--hairline);

  --accent:        var(--pulse-blue);        /* live / link */
  --accent-soft:   var(--light-pink);
  --signal:        var(--signal-red);        /* attention only */

  /* --------------------------------------------------------
     TYPE FAMILIES
     -------------------------------------------------------- */
  --font-headers: "Lexend Deca", system-ui, sans-serif;
  --font-details: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --------------------------------------------------------
     TYPE SCALE — uses Lexend Deca for h1-h4, mono for body.
     -------------------------------------------------------- */
  --fs-display:  clamp(40px, 5.5vw, 64px); /* @kind font */
  --fs-h1:       clamp(32px, 3.2vw, 40px); /* @kind font */
  --fs-h2:       clamp(24px, 2.4vw, 30px); /* @kind font */
  --fs-h3:       18px;
  --fs-h4:       14px;
  --fs-body:     14px;
  --fs-small:    12px;
  --fs-micro:    10px;     /* uppercase tracked labels */
  --fs-nano:      9px;     /* eyebrow tags */

  --lh-tight:    1.1;   /* @kind font */
  --lh-snug:     1.25;  /* @kind font */
  --lh-normal:   1.55;  /* @kind font */
  --lh-relaxed:  1.7;   /* @kind font */

  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.18em;   /* eyebrows */

  /* --------------------------------------------------------
     SPACING — 20px Technical Lace baseline (4px sub-unit)
     -------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;   /* one grid unit */
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;   /* two grid units */
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;   /* "extreme whitespace" */
  --space-24: 96px;

  /* --------------------------------------------------------
     STRUCTURAL BORDERS & SHAPES
     The brand is corner-square. Radius is minimal & functional.
     -------------------------------------------------------- */
  --border-1: 1px solid var(--charcoal);
  --border-hairline: 1px solid var(--hairline);
  --border-dashed: 1px dashed var(--grid-line-strong);

  --radius-0: 0;        /* primary — corners are square */
  --radius-1: 2px;      /* form fields only */
  --radius-pill: 999px; /* pulse dot + signal dots */

  /* --------------------------------------------------------
     SHADOWS — used sparingly. The grid does the work.
     -------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(45, 45, 45, 0.04);
  --shadow-md:  0 6px 12px rgba(45, 45, 45, 0.06);
  --shadow-lg:  0 16px 32px rgba(45, 45, 45, 0.08);
  --shadow-pin: 0 2px 4px rgba(0, 0, 0, 0.2);

  /* --------------------------------------------------------
     MOTION — calm. Pulse is the only continuous animation.
     -------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-snap:   cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-quick:   180ms;  /* @kind other */
  --dur-base:    300ms;  /* @kind other */
  --dur-slow:    600ms;  /* @kind other */
  --dur-pulse:   3000ms; /* @kind other */

  /* --------------------------------------------------------
     LAYOUT — Technical Lace
     -------------------------------------------------------- */
  --lace-step: 20px;   /* the grid unit, everywhere */
  --content-max: 1024px;  /* most sections cap here */
  --wide-max:    1280px;  /* dept grid + footer */
}

/* ============================================================
   BASE / RESET
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  /* Technical Lace background grid — 20px ruled paper */
  background-image:
    linear-gradient(var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--grid-line) 0.5px, transparent 0.5px);
  background-size: var(--lace-step) var(--lace-step);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.da-display, h1.da-display {
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg);
}

h1, .da-h1 {
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--fg);
}

h2, .da-h2 {
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h3, .da-h3 {
  font-family: var(--font-headers);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h4, .da-h4 {
  font-family: var(--font-headers);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .da-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

small, .da-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Eyebrow — uppercase tracked label. Used to introduce sections. */
.da-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--signal);
  display: inline-block;
}
.da-eyebrow--muted { color: var(--fg-soft); }
.da-eyebrow--blue  { color: var(--accent); }

/* Code / inline code — JetBrains Mono is already the body font,
   so .da-code just adds a tinted box. */
.da-code, code, kbd {
  font-family: var(--font-details);
  font-size: 13px;
  background-color: var(--bg-alt);
  border: var(--border-hairline);
  padding: 1px 6px;
  border-radius: var(--radius-1);
}

/* Pull quote — what the brand calls a "pinned note" */
.da-pull {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg-alt);
  border: var(--border-1);
  padding: var(--space-8) var(--space-6) var(--space-5);
  position: relative;
}

/* Tagline — used at the top of cards or section intros */
.da-tagline {
  font-family: var(--font-headers);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-wide);
}

/* Mono caption — for spec rows, prices, hex codes */
.da-spec {
  font-family: var(--font-details);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   STRUCTURAL UTILITIES (used by cards, panels, slides)
   ============================================================ */
.da-border    { border: var(--border-1); }
.da-hairline  { border: var(--border-hairline); }
.da-bg        { background-color: var(--bg); }
.da-bg-alt    { background-color: var(--bg-alt); }
.da-bg-dark   { background-color: var(--fg); color: var(--fg-on-dark); }

/* The Technical Lace canvas — apply to any surface that should
   carry the brand's ruled-paper aesthetic. */
.da-lace {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--grid-line) 0.5px, transparent 0.5px);
  background-size: var(--lace-step) var(--lace-step);
}

/* ============================================================
   THE PULSE DOT — the brand's only continuous animation.
   Use <span class="da-pulse"></span> or wrap with .da-pulse-stack
   for the FAB-ring + dot combo.
   ============================================================ */
@keyframes da-brand-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.25); }
}
@keyframes da-fab-ring {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}
.da-pulse {
  display: inline-block;
  width: 12px; height: 12px;
  background: var(--accent);
  border: var(--border-1);
  border-radius: var(--radius-pill);
  animation: da-brand-pulse var(--dur-pulse) ease-in-out infinite;
}
.da-pulse-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
}
.da-pulse-stack::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
  border-radius: var(--radius-pill);
  opacity: 0.25;
  animation: da-fab-ring 2.2s ease-out infinite;
}
.da-pulse-stack > .da-pulse { position: relative; z-index: 1; }

/* Red signal dot — POI marker (NEVER animated). Use sparingly. */
.da-signal-dot {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--signal);
  border: var(--border-1);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pin);
}

/* ============================================================
   PINNED NOTE — recurring brand widget (pinned-yellow card +
   red pin at top center). See .da-pull for the typographic side.
   ============================================================ */
.da-pinned {
  position: relative;
  background-color: var(--bg-alt);
  border: var(--border-1);
  border-left: 4px solid var(--signal);
  padding: var(--space-10) var(--space-6) var(--space-5);
}
.da-pinned::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  background: var(--signal);
  border-radius: var(--radius-pill);
  border: var(--border-1);
  box-shadow: var(--shadow-pin);
}

/* ============================================================
   PREVIEW-CARD HELPERS — for the design system tab cards.
   ============================================================ */
.preview-card {
  background: var(--bg);
  border: var(--border-1);
  padding: var(--space-6);
  font-family: var(--font-body);
  color: var(--fg);
  width: 700px;
  box-sizing: border-box;
  background-image:
    linear-gradient(var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--grid-line) 0.5px, transparent 0.5px);
  background-size: var(--lace-step) var(--lace-step);
}