/* =====================================================================
 * UNSTEALTH design tokens - THE machine source of truth.
 *
 * Every template imports this. No template redeclares a token locally.
 * Before this file existed each HTML carried its own :root block and they
 * had already drifted (three values for muted grey, two for the deep
 * accent). A token restated in six places is six tokens.
 *
 * Human-readable spec and the reasoning: brand-system.md
 * Grounded in brand-identity-designer L5/L6/L9 application cards.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=block');

:root {

/* =====================================================================
 * TIER 1 - PRIMARY PALETTE
 * Per build-the-color-system-as-three-tiers (Jack Watson, 28:44).
 * Lava is the PRIMARY brand colour. It is what Unstealth owns in a category
 * of blue-and-white LinkedIn service brands.
 *
 * Primary does NOT mean dominant by area. Lava is the identity; ground is
 * the canvas. Area ratio is specified in brand-system.md section 5 and is
 * roughly 78 ground / 18 ink / 4 lava on a feed cover.
 * ===================================================================== */
  --lava:    #FF4D14;   /* PRIMARY. The brand colour. 5.87:1 on ground */
  --ground:  #0B0D10;   /* the canvas */
  --ink:     #F2EFEA;   /* type. Bone, never pure white. 17.0:1 */

/* =====================================================================
 * TIER 2 - SECONDARY PALETTE
 * Supporting roles. Each has ONE job and is never used decoratively.
 * ===================================================================== */
  --lava-deep:  #8F2404;  /* hard offset shadow only. 2.25:1, never type */
  --ink-mid:    #B4B0AA;  /* dark end of the display gradient. 9.03:1 */
  --muted:      #8B9299;  /* meta and captions only. 6.19:1 */
  --panel:      #11151A;  /* raised surface */
  --rule:       #222A33;  /* hairlines, dividers, off-state track */

/* =====================================================================
 * TIER 3 - THE HARMONY SET
 *
 * Lava sits at H 14.6, S 92, B 100. Every hue below is DERIVED from that
 * position on the wheel, not chosen by eye. None of them is decorative:
 * each one has exactly one job, and the job is why it exists.
 *
 * Dominance is a RATIO decision, not a count (Laura Keung, 8:41). Adding
 * these does not break the three-colour cover discipline, because they are
 * SCOPED: see brand-system.md s5.7. Covers never use them. Diagrams,
 * charts, states and interface surfaces do.
 *
 * Every supporting hue is capped at B<=82 and S<=72 so lava, at B100 S92,
 * always wins on intensity even where it loses on area. A supporting hue
 * that can out-shout the primary is a second primary.
 * ===================================================================== */

  /* COMPLEMENT, H+180. The resolved state. Lava marks what is broken;
     teal marks what has been checked and is clear. For a verification
     brand this pairing is the whole argument in two colours. */
  --teal:       #3994B3;   /* H195 S68 B70. 5.62:1 on ground */
  --teal-tint:  #7FC3D6;
  --teal-shade: #1F5B70;

  /* ANALOGOUS +30. The in-between state. Not broken, not cleared, needs
     a human to look. */
  --amber:       #D1A93B;  /* H44 S72 B82. 8.77:1 on ground */
  --amber-tint:  #E8CE85;
  --amber-shade: #8A6D1C;

  /* ANALOGOUS -30. More severe than lava. Reserved for the one state
     worse than "broken", which is "do not publish". */
  --crimson:       #C73C5E; /* H345 S70 B78. 3.93:1, LARGE AND GRAPHIC ONLY */
  --crimson-tint:  #E0849A;
  --crimson-shade: #7E2039;

  /* SPLIT-COMPLEMENT. Structure and secondary data series. Cool enough to
     recede behind lava, distinct enough to separate from teal. */
  --indigo:       #4D62B8;  /* H228 S58 B72. 3.49:1, LARGE AND GRAPHIC ONLY */
  --indigo-tint:  #94A2DC;
  --indigo-shade: #2C3A73;

  /* TRIADIC. Growth and positive movement in data only. */
  --moss:       #4EA368;    /* H138 S52 B64. 6.27:1 on ground */
  --moss-tint:  #90C9A2;
  --moss-shade: #2C6640;

/* =====================================================================
 * TIER 4 - MONOCHROMATIC ARCS
 *
 * Tints (add white), tones (add grey), shades (add black). The three are
 * different operations and the names are not interchangeable.
 *
 * Generated along ONE consistent HSB arc rather than eyeballed stop by
 * stop, so no swatch breaks its family.
 * ===================================================================== */
  --lava-100: #FFE1D2;   /* tint  */
  --lava-200: #FFB694;   /* tint  */
  --lava-300: #FF8551;   /* tint  */
  --lava-400: #FF4D14;   /* = --lava, the primary */
  --lava-500: #D93C0C;   /* shade */
  --lava-600: #8F2404;   /* shade, = --lava-deep */
  --lava-700: #5C1602;   /* shade */
  --lava-800: #330C01;   /* shade */

  /* Warm bone. Type, and anything that must read as ours. */
  --bone-100: #F2EFEA;   /* = --ink */
  --bone-200: #D6D2CB;
  --bone-300: #B4B0AA;   /* = --ink-mid */
  --bone-400: #8E8B86;

  /* Cool grey. Structure, furniture, surfaces. A SEPARATE family from
     bone on purpose: warm type on cool structure is what stops a
     near-black frame going muddy. Two arcs, stated, not an accident. */
  --grey-900: #0B0D10;   /* = --ground */
  --grey-800: #11151A;   /* = --panel  */
  --grey-700: #222A33;   /* = --rule   */
  --grey-600: #3A434D;
  --grey-500: #5C666F;
  --grey-400: #8B9299;   /* = --muted  */

/* =====================================================================
 * FUNCTIONAL - mapped to the harmony set, never invented separately
 *
 * Interface literacy, not colour psychology. Red-for-error and
 * green-for-success are learned conventions and breaking them costs
 * comprehension, so they are held even though the rest of the palette
 * treats association as a hypothesis.
 * ===================================================================== */
  --state-blocked: var(--crimson);  /* worse than broken. Do not publish */
  --state-broken:  var(--lava);     /* the thing this brand exists to name */
  --state-verify:  var(--amber);    /* a human has to look */
  --state-clear:   var(--teal);     /* checked, and fine */
  --state-good:    var(--moss);     /* growth, in data only */
  --state-idle:    var(--grey-600);

/* =====================================================================
 * GRADIENT LIBRARY - closed set. Three. No others, ever.
 * ===================================================================== */
  --grad-display: linear-gradient(90deg, var(--ink-mid) 0%, var(--ink) 42%);
  --grad-plate:   linear-gradient(90deg, rgba(6,7,9,.88) 0%, rgba(6,7,9,0) 58%);
  --grad-heat:    linear-gradient(90deg, var(--lava-600) 0%, var(--lava) 100%);

/* =====================================================================
 * TYPE
 * Licensing status is FLAGGED, not asserted. See brand-system.md s20.
 * ===================================================================== */
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --meta:    'IBM Plex Mono', ui-monospace, monospace;

/* =====================================================================
 * TYPE SCALE AS RATIOS, NOT FIXED SIZES
 * Per build-type-as-a-ratio-system-found-by-eye (Watson, 22:43 + 50:00).
 * Every size is a proportion of the display size, so the system carries
 * to a format nobody built a template for.
 *
 * The ratios were found BY EYE on the first rendered cover at 1080 wide,
 * then reverse engineered. That order matters: the maths records a design
 * decision rather than replacing one.
 * ===================================================================== */
  --t-display: 92px;                              /* the only absolute */
  --r-h2:      0.63;   /* 58px at 1080 */
  --r-body:    0.33;   /* 30px */
  --r-caption: 0.26;   /* 24px */
  --r-meta:    0.20;   /* 19px */

  --t-h2:      calc(var(--t-display) * var(--r-h2));
  --t-body:    calc(var(--t-display) * var(--r-body));
  --t-caption: calc(var(--t-display) * var(--r-caption));
  --t-meta:    calc(var(--t-display) * var(--r-meta));

  /* Leading and tracking run INVERSELY to size. One multiplier across a
     whole scale is wrong at both ends at once. */
  --lh-display: 1.05;  --ls-display: -0.005em;
  --lh-h2:      1.10;  --ls-h2:      -0.003em;
  --lh-body:    1.42;  --ls-body:     0;
  --lh-caption: 1.45;  --ls-caption:  0.01em;
  --lh-meta:    1.40;  --ls-meta:     0.18em;

/* =====================================================================
 * LAYOUT
 * Per scale-the-layout-with-a-proportional-margin (Watson, 43:58).
 *
 * TWO rules, and they answer different questions. Do not confuse them.
 *
 * 1. THE UNIVERSAL MARGIN. longest side / 25. This is the fallback for
 *    any format with no designed template. It guarantees a balanced frame
 *    without anyone re-deriving the decision.
 *      1080x1350 -> 54px   1128x191 -> 45px   300x300 -> 12px
 *
 * 2. THE DESIGNED COMPOSITION GRID, below. Measured off rendered
 *    reference pages, not derived. Used on the two formats that HAVE a
 *    template. Always wider than the universal margin, never narrower.
 * ===================================================================== */
  --margin-divisor: 25;

  /* THE FRAME MARGIN. Dev 2026-08-22: "I want us to follow constant
     margins for all the posts." One number, all four sides, every
     format. Templates use var(--m) and never a literal, so changing the
     frame is one edit here rather than twenty across the templates. */
  --m: 56px;

  /* 1080x1350 feed cover. Measured percentages, held as percentages so
     they survive a canvas change. */
  --cover-col-x:      12.3%;   /* 133px */
  --cover-col-w:      36.4%;   /* 393px */
  --cover-type-top:   12.4%;   /* 167px */
  --cover-type-floor: 64.9%;   /* 876px. Below this is the subject */
  --cover-foot-top:   90.8%;   /* 1226px */

  /* body frames, if a post ever runs multi-frame */
  --body-margin-l:    19.5%;   /* 211px */
  --body-col-w:       57%;     /* 616px */
  --body-gutter-r:    23%;     /* wider than the left, on purpose */

/* =====================================================================
 * SHAPE + EFFECTS
 * Unstealth is angular. There is exactly one radius and it is zero.
 * There is exactly one shadow. Multiple shadows are banned.
 * ===================================================================== */
  --radius: 0px;
  --shadow: 0 18px 48px rgba(0,0,0,0.55);
  --offset-hard: 5px 5px 0 var(--lava-deep);
  --hairline: 1px solid var(--rule);
  --grain-opacity: 0.04;
}