/* ==========================================================================
   Monksheets design tokens

   BLOCK 1 is MON-2's extraction, verbatim from
   monksuite.io (/assets/styles-Bu9NsXm6.css?v=66deeb8). Dark-only palette —
   monksuite has no light theme. If MON-2 ever re-runs, REPLACE BLOCK 1
   WHOLESALE and leave block 2 alone.

   BLOCK 2 is this site's own additions: values MON-2 had no opinion on
   (focus ring, form controls, the unresolved-value marker) expressed as
   tokens so the "no raw hex, no raw px font size outside tokens.css" rule
   holds everywhere else. website/check.sh enforces that.
   ========================================================================== */

/* ==========================================================================
   BLOCK 1 — MON-2, extracted from monksuite.io. Do not hand-edit.
   ========================================================================== */

:root {
  /* ---------- Surfaces ------------------------------------------------- */
  --ms-bg:                #0f1014;  /* page background                     */
  --ms-surface:           #191b21;  /* raised: cards, stat boxes           */
  --ms-surface-sunken:    #14161b;  /* recessed: media panels, modal shell */
  --ms-surface-footer:    #16181d;  /* footer band                         */

  --ms-bg-nav:            #0f1014d1; /* 82% — sticky nav, behind blur(14px) */
  --ms-bg-nav-mobile:     #0f1014f7; /* 97% — mobile nav dropdown           */
  --ms-bg-scrim:          #050609d1; /* 82% — modal scrim, behind blur(8px) */

  /* ---------- Text ----------------------------------------------------- */
  --ms-text:              #f4f5f6;  /* primary: headings, emphasis         */
  --ms-text-soft:         #c4c9cf;  /* footer links at rest, pipe arrows    */
  --ms-text-muted:        #9aa1ab;  /* secondary: body copy, nav at rest    */
  --ms-text-dim:          #8a9199;  /* tertiary: eyebrows, kickers, meta    */
  --ms-text-dimmer:       #6b7079;  /* quaternary: footer headings, legal   */

  /* Text on filled surfaces */
  --ms-on-light:          #16181d;  /* on --ms-text / ink fills             */
  --ms-on-accent:         #0f1014;  /* on accent fills                      */

  /* ---------- Accents -------------------------------------------------- */
  --ms-accent:            #52c9b8;  /* primary brand accent (teal)          */
  --ms-accent-hris:       #a088c4;  /* violet                               */
  --ms-accent-crm:        #728cc9;  /* periwinkle                           */
  --ms-accent-erp:        #ff6d89;  /* coral                                */
  --ms-accent-tint-cool:  #bffff0;  /* light mint                           */
  --ms-accent-tint-warm:  #e2c2ff;  /* light violet                         */

  /* Source aliases — keep if you want to mirror monksuite naming */
  --ms-teal:              #52c9b8;
  --ms-violet:            #a088c4;
  --ms-periwinkle:        #728cc9;
  --ms-coral:             #ff6d89;

  /* ---------- State ---------------------------------------------------- */
  /* monksuite has no amber. warn and danger share #ff6d89, differing only  */
  /* in fill opacity (16% vs 20%). Do not place warn and danger adjacent.   */
  --ms-success:           #52c9b8;
  --ms-warn:              #ff6d89;
  --ms-danger:            #ff6d89;
  --ms-success-fill:      color-mix(in srgb, var(--ms-success) 16%, transparent);
  --ms-warn-fill:         color-mix(in srgb, var(--ms-warn)    16%, transparent);
  --ms-danger-fill:       color-mix(in srgb, var(--ms-danger)  20%, transparent);

  /* ---------- Borders -------------------------------------------------- */
  --ms-line:              #ffffff1a;  /* 10% — default border               */
  --ms-line-soft:         #ffffff14;  /*  8% — subtle divider               */
  --ms-line-chip:         #ffffff29;  /* 16% — chip at rest                 */
  --ms-line-strong:       #ffffff38;  /* 22% — ghost button, inactive dots  */
  --ms-line-hover:        #ffffff66;  /* 40% — chip hover                   */

  /* ---------- White washes (micro-elevation) --------------------------- */
  --ms-wash-1:            #ffffff05;  /*  2% — mock window bar              */
  --ms-wash-2:            #ffffff08;  /*  3% — table header                 */
  --ms-wash-3:            #ffffff0d;  /*  5% — icon button hover            */
  --ms-wash-4:            #ffffff1a;  /* 10% — progress track               */
  --ms-wash-5:            #ffffff2e;  /* 18% — mock window dots             */

  /* ---------- Accent mix ratios (used with var(--c)) ------------------- */
  --ms-mix-tile-fill:     11%;
  --ms-mix-badge-fill:    16%;
  --ms-mix-danger-fill:   20%;
  --ms-mix-tile-border:   30%;
  --ms-mix-media-glow:    32%;
  --ms-mix-underline:     45%;
  --ms-mix-shadow:        55%;

  /* ---------- Typography: families ------------------------------------- */
  --ms-font-sans:  "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ms-font-mono:  "Space Mono", ui-monospace, monospace;
  --ms-font-quote: Georgia, serif;   /* decorative quote mark only          */

  /* ---------- Typography: weights -------------------------------------- */
  --ms-weight-regular:  400;
  --ms-weight-medium:   500;  /* nav links                                  */
  --ms-weight-semibold: 600;  /* buttons, interactive text                  */
  --ms-weight-bold:     700;  /* headings, mono labels                      */
  --ms-weight-black:    800;  /* display, metrics                           */

  /* ---------- Typography: display -------------------------------------- */
  --ms-text-display-1:  clamp(40px, 6vw, 68px);  /* home hero h1            */
  --ms-text-display-2:  clamp(36px, 6vw, 62px);  /* subpage hero h1         */
  --ms-text-display-3:  clamp(30px, 5vw, 44px);  /* contact h2              */
  --ms-text-display-4:  clamp(26px, 4vw, 40px);  /* cover h2                */

  /* ---------- Typography: headings ------------------------------------- */
  --ms-text-h1-alt:     30px;    /* 27px below 760px — feature title        */
  --ms-text-h1-alt-sm:  27px;
  --ms-text-h2:         clamp(22px, 3vw, 30px);
  --ms-text-h2-page:    26px;
  --ms-text-h2-legal:   22px;
  --ms-text-h3:         20px;
  --ms-text-h4:         16px;
  --ms-text-h5:         15px;

  /* ---------- Typography: body ----------------------------------------- */
  --ms-text-lead-hero:  clamp(16px, 1.6vw, 19px);
  --ms-text-lead:       18px;
  --ms-text-body-lg:    16px;
  --ms-text-body:       15px;
  --ms-text-body-sm:    14.5px;  /* default paragraph size                  */
  --ms-text-body-xs:    14px;

  /* ---------- Typography: UI ------------------------------------------- */
  --ms-text-nav:        14.5px;  /* 15px on mobile                          */
  --ms-text-btn:        15px;    /* hero pills                              */
  --ms-text-btn-sm:     14px;    /* standard buttons                        */
  --ms-text-ui-sm:      13.5px;
  --ms-text-ui-xs:      13px;
  --ms-text-mock:       12.5px;
  --ms-text-label:      12px;

  /* ---------- Typography: mono labels (always uppercase) --------------- */
  --ms-text-mono-lg:    12px;    /* section tag                             */
  --ms-text-mono:       11.5px;  /* eyebrow, chip, footer legal             */
  --ms-text-mono-sm:    11px;    /* footer heading, kicker, step label      */
  --ms-text-mono-xs:    10.5px;  /* industry line, table header             */
  --ms-text-mono-2xs:   9.5px;   /* case tag                                */

  /* ---------- Typography: metrics -------------------------------------- */
  --ms-text-metric:     44px;
  --ms-text-metric-sm:  24px;

  /* ---------- Typography: line-heights --------------------------------- */
  --ms-leading-display:  1.04;  /* 68px headline                            */
  --ms-leading-hero:     1.05;
  --ms-leading-tight:    1.1;
  --ms-leading-heading:  1.14;
  --ms-leading-snug:     1.2;
  --ms-leading-title:    1.28;
  --ms-leading-lead:     1.5;
  --ms-leading-sub:      1.55;
  --ms-leading-body:     1.6;
  --ms-leading-prose:    1.7;   /* legal / about long-form                  */
  --ms-leading-none:     1;     /* metric numerals                          */

  /* ---------- Typography: letter-spacing ------------------------------- */
  --ms-tracking-metric:  -0.03em;
  --ms-tracking-display: -0.025em;
  --ms-tracking-heading: -0.02em;
  --ms-tracking-title:   -0.01em;
  --ms-tracking-mono-xs:  0.04em;  /* footer legal                          */
  --ms-tracking-mono-sm:  0.06em;  /* mock table header                     */
  --ms-tracking-mono:     0.08em;  /* chip, case tag                        */
  --ms-tracking-mono-md:  0.1em;   /* industry line                         */
  --ms-tracking-mono-lg:  0.12em;  /* footer heading                        */
  --ms-tracking-mono-xl:  0.14em;  /* section tag, kicker, step label       */
  --ms-tracking-mono-2xl: 0.16em;  /* stat card label                       */
  --ms-tracking-mono-3xl: 0.18em;  /* legal stamp                           */
  --ms-tracking-eyebrow:  0.24em;  /* hero eyebrow — widest on the site     */

  /* ---------- Measures (prose width caps) ------------------------------ */
  --ms-measure-headline: 15ch;
  --ms-measure-quote:    22ch;
  --ms-measure-sub:      52ch;
  --ms-measure-prose:    62ch;
  --ms-measure-blurb:    300px;

  /* ---------- Layout --------------------------------------------------- */
  --ms-maxw:            1180px;  /* .container                             */
  --ms-maxw-about:       980px;
  --ms-maxw-modal:       980px;
  --ms-maxw-legal:       820px;
  --ms-maxw-head:        620px;  /* centred section intro                  */
  --ms-media-col:        320px;  /* feature card media column (>=760px)    */

  --ms-pad:               32px;  /* container gutter — 20px <=620px        */
  --ms-nav-h:             70px;
  --ms-scroll-offset:     80px;  /* scroll-margin-top under sticky nav     */

  /* ---------- Spacing scale (2px-quantized, as measured) --------------- */
  --ms-space-3xs:   4px;
  --ms-space-2xs:   6px;
  --ms-space-xs:    8px;
  --ms-space-sm:   10px;
  --ms-space-md:   12px;
  --ms-space-lg:   14px;
  --ms-space-xl:   16px;
  --ms-space-2xl:  18px;
  --ms-space-3xl:  22px;
  --ms-space-4xl:  26px;
  --ms-space-5xl:  28px;
  --ms-space-6xl:  32px;
  --ms-space-7xl:  34px;
  --ms-space-8xl:  36px;
  --ms-space-9xl:  40px;
  --ms-space-10xl: 48px;
  --ms-space-11xl: 66px;
  --ms-space-12xl: 84px;
  --ms-space-13xl: 96px;

  /* ---------- Section rhythm ------------------------------------------- */
  --ms-section-pt:      84px;
  --ms-section-pb:      90px;
  --ms-section-pt-tight: 40px;  /* section that follows a hairline rule    */
  --ms-hero-pt:         96px;
  --ms-hero-pb:         84px;
  --ms-hero-pt-sm:      64px;
  --ms-hero-pb-sm:      60px;
  --ms-footer-pt:       66px;
  --ms-footer-pb:       40px;

  /* ---------- Radii ---------------------------------------------------- */
  --ms-radius-xs:    2px;   /* hamburger bars                              */
  --ms-radius-sm:    4px;   /* progress bar                                */
  --ms-radius-md:   10px;   /* small icon buttons                          */
  --ms-radius-lg:   14px;   /* mock window, small tile, table wrapper      */
  --ms-radius-xl:   16px;   /* stat box                                    */
  --ms-radius-2xl:  18px;   /* case card, card icon tile                   */
  --ms-radius-3xl:  22px;   /* PRIMARY card radius                         */
  --ms-radius-4xl:  24px;   /* feature card (largest)                      */
  --ms-radius-full: 999px;  /* buttons, chips, badges, marker bars         */

  /* ---------- Shadows -------------------------------------------------- */
  /* The only two shadows on monksuite — both accent-tinted hover states.   */
  /* There is NO resting elevation shadow. Depth = surface + 10% hairline.  */
  --ms-shadow-card-hover: 0 18px 40px -20px
    color-mix(in srgb, var(--c, var(--ms-accent)) 55%, transparent);
  --ms-shadow-card-hover-sm: 0 18px 40px -22px
    color-mix(in srgb, var(--c, var(--ms-accent)) 55%, transparent);

  /* ---------- Blur ----------------------------------------------------- */
  --ms-blur-nav:   blur(14px);
  --ms-blur-scrim: blur(8px);

  /* ---------- Motion --------------------------------------------------- */
  --ms-dur-fast:   0.2s;   /* colour, border, opacity — default hover      */
  --ms-dur-snap:   0.25s;  /* small transforms                             */
  --ms-dur-base:   0.3s;   /* card transform + border + shadow             */
  --ms-dur-slide:  0.4s;   /* modal track                                  */
  --ms-dur-slow:   0.5s;   /* media background shift                       */
  --ms-dur-reveal: 0.6s;   /* scroll reveal                                */
  --ms-dur-float:  3.4s;   /* floaty loop (3.6s variant on large pictos)   */

  --ms-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ms-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --ms-lift-sm:  -2px;   /* solid button                                   */
  --ms-lift-md:  -4px;   /* compact case card                              */
  --ms-lift-lg:  -6px;   /* product card                                   */
  --ms-lift-xl: -10px;   /* pipeline step                                  */
  --ms-float-y:  -8px;   /* floaty amplitude                               */
  --ms-reveal-y: 16px;   /* scroll reveal offset                           */

  /* ---------- Decorative dot grid -------------------------------------- */
  --ms-dot-grid:      26px;      /* hero                                   */
  --ms-dot-grid-sm:   22px;      /* inside cards and slides                */
  --ms-dot-size:      1.5px;
  --ms-dot-size-lg:   1.7px;
  --ms-dot-size-sm:   1.4px;
  --ms-dot-base:      #ffffff29; /* 16% — hero base layer                  */
  --ms-dot-bright:    #ffffff70; /* 44% — top-left bloom                   */
  --ms-dot-mid:       #ffffff57; /* 34% — bottom-right bloom               */
  --ms-dot-card:      #ffffff1a; /* 10% — card media                       */
  --ms-dot-slide:     #ffffff12; /*  7% — slide background                 */

  /* ---------- Component specifics -------------------------------------- */
  --ms-logo-h:            20px;  /* nav brandmark                          */
  --ms-logo-h-footer:     24px;
  --ms-tile:              60px;  /* product card icon tile                 */
  --ms-tile-sm:           48px;  /* case card icon tile                    */
  --ms-tile-lg:           92px;  /* cover glyph                            */
  --ms-picto:             76px;  /* pipeline pictogram (50px <=620px)      */
  --ms-picto-lg:         110px;  /* feature media pictogram                */
  --ms-iconbtn:           36px;  /* modal buttons                          */
  --ms-iconbtn-lg:        38px;  /* pager buttons                          */
  --ms-tag-rule:          22px;  /* .tag ::before dash width               */
  --ms-marker-w:           6px;  /* heading marker bar                     */
  --ms-marker-h:          26px;
  --ms-accent-bar:         3px;  /* card top accent rule                   */
  --ms-underline-h:        4px;  /* hero headline underline                */
  --ms-underline-pos:     86%;   /* background-position y                  */

  /* ---------- Breakpoints (reference — not usable in @media) ----------- */
  /* --ms-bp-sm: 620px;  --ms-bp-md: 720px;                                */
  /* --ms-bp-lg: 760px;  --ms-bp-xl: 960px;                                */
  /* Custom properties cannot be used in media queries. Write the px       */
  /* values literally, or generate them at build time.                    */
}

/* Responsive gutter — the one spacing token monksuite changes */
@media (max-width: 620px) {
  :root { --ms-pad: 20px; }
}

/* ==========================================================================
   BLOCK 2 — Monksheets site additions. MON-2 has no opinion on these.
   Anything added here must be a token, so the no-raw-values rule enforced
   by website/check.sh holds in base/layout/components.
   ========================================================================== */

:root {
  /* ---------- Focus ----------------------------------------------------- */
  /* MON-2 documents no focus treatment. A visible ring is not optional, so
     this is ours: the brand accent, 3px, which clears AA non-text contrast
     against every surface on the site. */
  --ms-focus:          var(--ms-accent);
  --ms-focus-w:        3px;
  --ms-focus-offset:   2px;

  /* ---------- Unresolved-value marker ---------------------------------- */
  /* The 14 values the founder still owes (tracked on MON-8) render as a
     dashed coral chip. Nothing on this site invents a value it was not
     given, and nothing unresolved may read as finished copy. */
  --ms-todo:           var(--ms-coral);
  --ms-todo-fill:      color-mix(in srgb, var(--ms-coral) 14%, transparent);
  --ms-todo-border:    color-mix(in srgb, var(--ms-coral) 55%, transparent);

  /* ---------- Form controls -------------------------------------------- */
  /* monksuite.io has no form on it — there was nothing to extract. These
     follow the card anatomy: sunken surface, 10% hairline, pill only on the
     submit button. */
  --ms-field-bg:       var(--ms-surface-sunken);
  --ms-field-border:   var(--ms-line-chip);
  --ms-field-radius:   var(--ms-radius-md);
  --ms-field-pad-y:    var(--ms-space-md);
  --ms-field-pad-x:    var(--ms-space-lg);
  --ms-field-text:     var(--ms-text-body-lg); /* >=16px: iOS must not zoom */

  /* ---------- Accent-tinted quote / example rule ----------------------- */
  --ms-quote-bar:      3px;   /* left rule on the AI example cards         */

  /* ---------- Inline code ---------------------------------------------- */
  /* Relative on purpose: inline code should track whatever it sits inside
     rather than jump to a fixed size mid-sentence. */
  --ms-text-code:      0.92em;

  /* ---------- Wide headline measure ------------------------------------ */
  /* MON-2's --ms-measure-headline is 15ch, taken from a monksuite headline
     of six words. This site's hero headline is eleven, and at 15ch it wraps
     to four short lines instead of the three the design calls for. Widened
     here rather than by editing block 1. */
  --ms-measure-headline-wide: 21ch;
}