/* ============================================================
   Project Synk — paper theme

   synk-theme.css is the canonical dark system and loads last by
   design, so a page cannot go light by editing its own <style>.
   This sheet loads AFTER it and re-points the same tokens at a
   paper ground. Add the <link> to a page and it turns light; drop
   the link and it is dark again. Nothing else has to change.

   Deliberately NOT applied to the demo dashboards: a dark
   operations screen is a product decision, not a leftover.

   A light canvas inverts four things at once, and each is handled
   below rather than left to the token swap:
     1. scrims wash TOWARD the canvas, they do not darken
     2. type over media stays ink
     3. inset white edge highlights read as dirt on paper
     4. shadow alphas tuned for near-black are far too heavy here
   ============================================================ */

:root{
  /* Paper, not cream. r242 g243 b240 is neutral with a hair of green,
     which keeps it clear of the cream-and-brass artisan default that every
     craft brand reaches for, while still reading as stock rather than as a
     blank white screen. */
  --bg:#f2f3f0;          --background:#f2f3f0;
  --bg-2:#e8eae5;        --bg-3:#dfe2dc;        --bg-4:#d3d7cd;
  --card:#ffffff;        --card-2:#f7f8f5;
  --panel:#ffffff;       --panel2:#f7f8f5;      --panel3:#e8eae5;
  --border:#d6d9d1;      --border-2:#c3c7bd;    --border-strong:#b3b8ac;
  --border-subtle:#e2e4dd; --line:#d6d9d1;

  /* the brand green and blue, darkened until each holds 4.5:1 on paper.
     Verified: green 5.86:1, blue 6.41:1. */
  --accent:#0c6b4a;      --accent-edge:#0a5c3f; --accent-2:#0a5c8f;
  --accent-light:rgba(12,107,74,.10);
  --violet:#5b46a8;      --teal:#0f6f63;        --amber:#8a5a00;
  --rose:#a3324a;        --sky:#0a5c8f;

  --success:#0c6b4a;     --success-light:rgba(12,107,74,.10);
  --warning:#8a5a00;     --warning-light:rgba(138,90,0,.10);
  --danger:#a3324a;      --danger-light:rgba(163,50,74,.10);

  /* ink is off-black, never #000: pure black on paper has no air in it.
     dim and mute are tinted toward the ground rather than flat grey.
     Verified on #f2f3f0: ink 16.15:1, dim 6.10:1, mute 4.81:1. */
  --text:#14171a;        --text-dim:#555c61;
  --text-muted:#646c70;  --text-mute:#646c70;   --muted:#555c61;

  --grad:linear-gradient(115deg,#0c6b4a,#0a5c8f);

  /* (4) shadows: the dark theme's alphas assume a near-black ground and
     read as soot on paper. Halved, and tinted toward the canvas hue. */
  --shadow-color:20,23,26;
  --e1:0 1px 2px rgba(20,23,26,.05);
  --e2:0 6px 18px -8px rgba(20,23,26,.10);
  --e3:0 22px 48px -22px rgba(20,23,26,.16);
}

html,body{ background:var(--bg); color:var(--text); }

/* selection was a violet wash sized for a dark ground */
::selection{ background:rgba(12,107,74,.20); color:#14171a; }

/* (3) the inset white lip that sells a raised surface on near-black reads as
   dirt along the top edge here. Carry the raise on a hairline instead. */
.cinema-brand{
  border-color:var(--border-2);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,248,245,.82));
  box-shadow:0 10px 30px -18px rgba(20,23,26,.35), inset 0 1px rgba(255,255,255,.9);
}
.cinema-brand .brand-project{ color:var(--text-mute); }
.cinema-brand .brand-name{ color:var(--text); }

/* (1) the four-sided vignette dissolved a photo into a near-black page; on
   paper it has to dissolve into paper, or every image sits in a dark box. */
.context-cinema{ background:var(--bg); }
.context-cinema::after{
  background:
    linear-gradient(90deg,var(--bg) 0,rgba(242,243,240,.54) 5%,transparent 16%,transparent 84%,rgba(242,243,240,.54) 95%,var(--bg) 100%),
    linear-gradient(180deg,var(--bg) 0,transparent 15%,transparent 68%,rgba(242,243,240,.72) 88%,var(--bg) 100%);
}

/* the grain was 5% dark noise in overlay, tuned to stop a near-black ground
   banding. On paper the same layer just makes the page look dirty. */
.grain{ opacity:.022; mix-blend-mode:multiply; }

/* the ambient blobs were coloured glows for a dark room. On paper they read
   as stains unless they are very faint and tinted to the accents. */
.bg-fx .blob{ opacity:.10; filter:blur(90px); }
.bg-fx .grid{ opacity:.5; }

/* The wordmark's "PROJECT" was set to #fff, which is correct on the dark
   system and invisible on paper. The "synk" gradient stays: that is the real
   brand mark, and it is the one gradient on the page that means something. */
.logo .wm .pre, .blogo .wm .pre, .brand-logo .bl-wm .bl-pre{ color:var(--text-mute); }

/* the nav bar was a dark translucent slab */
header.nav{ background:rgba(242,243,240,.72); border-bottom-color:transparent; }
header.nav.scrolled{ background:rgba(242,243,240,.90); border-bottom-color:var(--border); }

/* the announce strip inverted from a glow to a tint */
.announce{ background:linear-gradient(90deg,rgba(12,107,74,.10),rgba(10,92,143,.06)); border-bottom-color:var(--border); color:var(--text-dim); }

/* pipeline nodes were dark cards with a dark gradient fill */
.node{ background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.55)); border-color:var(--border); }
.node.is-done{ opacity:.72; }
.rec{ background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(247,248,245,.9)); border-color:var(--border-2); box-shadow:0 8px 26px -14px rgba(20,23,26,.30); }

/* The wordmark's literal stops (#00ff8f, #00a1ff) were built for a near-black
   page and measure 1.20:1 and 2.50:1 on paper, so on the light pages the mark
   takes the same green-to-blue at a depth paper can carry: 5.86:1 and 6.41:1.
   Scoped to this sheet, so the dark demo dashboards keep the neon mark, which
   is where it belongs. */
.logo .wm .nm, .blogo .wm .nm, .brand-logo .bl-wm .bl-nm{
  background:linear-gradient(90deg,#0c6b4a,#0a5c8f);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .logo .wm .nm, .blogo .wm .nm, .brand-logo .bl-wm .bl-nm{
    -webkit-text-fill-color:var(--accent); color:var(--accent); background:none;
  }
}
@media(forced-colors:active){
  .logo .wm .nm, .blogo .wm .nm, .brand-logo .bl-wm .bl-nm{
    -webkit-text-fill-color:currentColor; color:CanvasText; background:none;
  }
}