/* Collab brand tokens. The only source of colour, type, radius, spacing and motion for Collab artwork.
   Every value is copied from an approved source. Source keys used in the comments:
   [core]      collab-visuals/lib/swamp/core.ts (Ertekin, 5 Nov 2026, live at collab.bakers.studio/brand/)
   [css]       collab-visuals/app/_brand/brand.css (same build)
   [kit]       collab-visuals/lib/swamp/kit.ts and specimens.ts (motion engine)
   [shapes]    collab-visuals/lib/swamp/shapes.ts (logo and elements lifted from Figma VlGBO7csNWoERWl6TNAxi7)
   [figma]     the 3 Nov Figma identity, as written up in deliverables/collab-identity-20261103/SPEC.md
   [x:brand]   refs/sites/collab-bakers-studio-brand/guidelines.json (Taste extraction, 9 Nov)
   [x:id]      refs/sites/collab-bakers-studio-identity/guidelines.json (Taste extraction, 9 Nov)
   [taste]     ~/.claude/design-taste.md, where it overrides the brand */

@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-semibold-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; } /* client holds a full licence (Yiliu, Slack, 2 Nov) */
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fonts/martian-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } /* OFL */

:root {
  /* ---- Colour: the main three, in the proportion the guidelines' bands give them (flex 10 / 7 / 3) [css .b-bands, core] */
  --ink: #14110C;        /* default ground, all type on light [core INK] */
  --paper: #F5ECD7;      /* light ground, all type on dark [core PAPER] */
  --lime: #D7FF2E;       /* agents, and the brand's one shout [core LIME] */
  --share-ink: 50%;      /* 10 of 20 [css .b-bands flex 10] */
  --share-paper: 35%;    /* 7 of 20 [flex 7] */
  --share-lime: 15%;     /* 3 of 20 [flex 3] */

  /* ---- Colour: cast inks. Each one is a role, used only on its character [core GROUNDS, s-foundation SECONDARY] */
  --vermilion: #FF4A1C;  /* people [core VERMILION] */
  --cobalt: #1433E6;     /* people, second group [core COBALT] */
  --pink: #FF96ED;       /* artifacts [core PINK] */
  --cyan: #65EAFF;       /* channels [core CYAN] */
  --stone: #A79C84;      /* workspace on ink [core STONE] */
  --mist: #D8CEB6;       /* workspace on light [core MIST] */
  /* helpers: tiles and sides only [core EXTRA_INKS] */
  --amber: #FFC21A;
  --periwinkle: #8F93FF; /* artifacts on light */
  --emerald: #00B66E;    /* agents on light */

  /* ---- Colour: grounds and quiet tones */
  --black: #000000;      /* the identity site's ground [figma, x:id Deep Black] */
  --white: #FFFFFF;      /* app icon ground, high-contrast plates [css .t-white] */
  --ink-2: #2A2723;      /* "dim" plate between ink plates [css .t-dim --bg] */
  --ink-3: #24221E;      /* card on ink [css .t-ink --card] */
  --setup: #949494;      /* the grey setup line before the payoff [figma, x:id Dim Gray] */
  --dim-on-ink: rgba(245, 236, 215, .55);  /* secondary type on ink [css .t-ink --dim] */
  --dim-on-paper: rgba(20, 17, 12, .55);   /* secondary type on paper and lime [css .t-paper --dim] */

  /* ---- Type: two faces. Suisse talks, Martian Mono takes notes [s-foundation Typography] */
  --font-sans: "Suisse Intl", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, monospace;
  --weight-head: 600;    /* SemiBold sets every headline [s-foundation] */
  --weight-body: 400;    /* Regular carries the body */

  /* Two working sizes, plus the poster scale for statements [taste: two sizes where possible] */
  --display: clamp(38px, 5.2vw, 84px);    /* headline [css .xl] */
  --display-lh: 1.04;
  --display-ls: -.035em;
  --body: 18px;                           /* body [css .m] */
  --body-lh: 26px;
  --body-ls: -.005em;                     /* [css .bp] */
  --poster: clamp(64px, 13.4vw, 260px);   /* one word or line as big as the frame allows [css .b-chapter-title] */
  --poster-lh: .92;
  --poster-ls: -.05em;
  --headline-1920: 128px;                 /* Figma frames: 128 over 105 at 1920, tracked -5.3px [figma] */
  --headline-lh: .82;                     /* 105 / 128 */
  --headline-ls: -.0414em;                /* -5.3 / 128 */
  --poster-max: 260px;                    /* the poster scale's top end, for fixed-size frames (posts, print) [css .b-chapter-title] */
  --lead: clamp(24px, 2.6vw, 40px);       /* the in-between size, used sparingly [css .l] */
  --lead-lh: 1.1;
  --lead-ls: -.025em;
  --small: 12px;                          /* captions and corner notes [css .s] */
  --small-lh: 16px;
  --small-ls: .01em;
  --label: 10px;                          /* Martian Mono labels, always caps [taste: mono caps 9-10px] */
  --label-ls: .06em;                      /* [taste: +.06-.08em] */

  /* ---- Radius: round or pill, nothing in between */
  --r-pill: 999px;       /* buttons, agent pills, tags [css .b-invite-btn, .b-pill] */
  --r-window: 12px;      /* a product window [css .b-browser] */
  --r-icon: 22.37%;      /* app icon, iOS-style squircle share [css .b-icon] */

  /* ---- Spacing */
  --unit: 8px;           /* most measured gaps are multiples: 16, 24, 32, 40, 64, 72, 88 [css] */
  --pad: max(32px, 3.2vw); /* page margin, corners hang off it [css .bp --pad] */
  --edge-phone: 24px;    /* phone margin [invite.tsx EDGE] */
  --corner-bottom: 36px; /* corner notes sit this far from the bottom [css .bl/.br] */
  --section-y: 88px;     /* section padding [css .b-section] */
  --gutter: 16px;        /* 12 columns at 1440 [x:brand layout; taste grid] */

  /* ---- Mark geometry, in the mark's own 100 box [shapes] */
  --mark-dot: .2222;     /* every dot is 2/9 of the box: r 22.2222 of 100 */
  --mark-clear: .2222;   /* clear space: two ninths of the mark on every side [s-foundation Logo] */
  --lockup-gap: .48;     /* wordmark starts at 148: the gap is about half the mark's height [shapes WORD_X] */
  --mark-min: 16px;      /* smallest size shown at true pixels [s-foundation sizes row] */

  /* ---- The button [css .b-invite-btn, 5 Nov] */
  --button-h: 46px;
  --button-pad: 24px;
  --button-size: 16px;   /* SemiBold */

  /* ---- Motion: one curve, two durations, stop motion inside scenes */
  --ease: cubic-bezier(.16, 1, .3, 1);   /* fast out, long settle: every page move [css --ease, figma site] */
  --ease-pop: linear(0, .3844, .6672, .8628, .9856, 1.05, 1.0704, 1.0612, 1.0368, 1.0116, 1); /* back.out(2.2), sampled [kit backOut] */
  --spring: linear(0, .0312, .1122, .2257, .3569, .4934, .6258, .7473, .8533, .9415, 1.0111, 1.0625, 1.0973, 1.1176, 1.1258, 1.1245, 1.1161, 1.1029, 1.0869, 1.0697, 1.0527, 1.0368, 1.0227, 1.0108, 1.0012, .994, .9889, .9858, .9843, .9841, .9849, .9864, .9883, .9905, .9926, .9947, .9966, .9982, .9995, 1.0005, 1); /* the 3 Nov identity's CTA spring [x:id]; the 5 Nov button moved to --ease, so this is kept for reference only */
  --t-short: .45s;       /* state changes, pills, hover [x:id, css .45s] */
  --t-long: .7s;         /* type rising out of its mask [s-system TIMES Reveal 700ms, figma site] */
  --t-hover: .3s;        /* the button grows on the page curve [css .b-invite-btn transition .3s var(--ease)] */
  --hover-scale: 1.04;   /* [css .b-invite-btn:hover, 5 Nov; the 3 Nov identity used 1.03] */
  --t-press: .12s;       /* press down to .94 [x:id cta-active-scale; the 5 Nov button has no press state, so this carries over] */
  --press-scale: .94;    /* [x:id] */
  --stagger: 60ms;       /* line to line on arrive [figma site] */
  --fps: 10;             /* scenes move in visible hops, ten a second [s-system PRINCIPLES] */
  --t-hop: 100ms;        /* one frame at 10 fps [s-system TIMES Hop] */
  --t-pop: 240ms;        /* a state change: back-out, overshoot, hold [TIMES Pop] */
  --held: .16;           /* share of frames held, the stop-motion stutter [specimens MOTION_FACTS] */
  --t-orbit: 3s;         /* one full turn of the agents [TIMES Orbit] */
  --t-loop: 12s;         /* one whole scene, always seamless [TIMES Loop] */
  --orbit-tilt: 68deg;   /* the tight orbit, picked 30 Oct [collab-logo-motion-20261030/motion.js TILT] */
  --shade-light: .09;    /* what's in front shades what's behind: black at this opacity on light grounds [motion.js, index.html --shade] */
  --shade-dark: .165;    /* the same on dark grounds */

  /* ---- Print: the riso pass */
  --grain-size: 512px;   /* the 1024px scan tile shown at 2x, so specks stay about one pixel at 1x */
  --misregister: 3px;    /* furthest a plate lands off register [riso.ts MAX_SHIFT] */
  --boil-fps: 8;         /* prints per second when boiling; a loop is a whole number of them [riso.ts BOIL_FPS] */
  --grain-colour: .6;    /* grain strength on colour grounds [s-scenes RISO_FACTS Grain 60%] */
  --grain-ink: .25;      /* on ink, "or the ground turns to noise" [RISO_FACTS Grain 25%] */

  /* ---- Bakers document chrome: the book and the app wrappers only, never Collab artwork
     [Agency Work/BAKERS_DOCUMENT_DESIGN.md, Visual system] */
  --doc-bg: #171717;     /* "Dark-only canvas" */
  --doc-text: #f5f5f5;   /* headings, key figures, logo */
  --doc-muted: #a8a8a8;  /* supporting and body text */
  --doc-fill: #262626;   /* a filled pill on the canvas; separation by fill, never a rule [design-taste: no strokes] */
  --doc-select: #d5d5d5; /* text selection on the canvas */
  --doc-font: 14px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* the reference's system sans stack */
  --doc-logo-w: 104px;   /* "The reference displays it at 104×13px" */
}

/* "Nothing leaves without texture. Type stays clean." [s-scenes riso facts]
   .riso prints whatever it wraps: paper shows through the ink in specks, as on the press.
   The mask is the approved wet scan's solid plate, inverted (collab-visuals/public/riso/wet.jpg, red channel).
   Declared here, not as a variable, so the path resolves against this file wherever it's used. */
.riso { position: relative; isolation: isolate; }
.riso::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--speck, var(--paper));
  opacity: var(--grain, var(--grain-colour));
  -webkit-mask: url("marks/print/grain.webp") 0 0 / var(--grain-size) repeat;
          mask: url("marks/print/grain.webp") 0 0 / var(--grain-size) repeat;
}