/* ============================================================
   ASKDOCS — DESIGN TOKENS
   Swiss Grid / v1. Extracted from "AskDocs Design System.dc.html"
   and HANDOFF.md. This file is the single source of truth for
   every value in the system. Nothing below is decorative.
   ============================================================ */

:root {

  /* ---- Color ------------------------------------------------
     Warm paper, true ink, one fire red. Flat fills only —
     no gradients, no shadows, no glows anywhere in the system. */

  --paper:      #fbfbf9;              /* every light surface */
  --ink:        #111213;              /* headlines, rules, dividers */
  --ink-soft:   #4a4d50;              /* body copy, captions */
  --ink-faint:  #8b8f93;              /* placeholders, disabled */
  --red:        #ff3300;              /* the only accent */
  --stage-bg:   #0d0d0d;              /* footer / inverted regions */

  --rule:       rgba(17, 18, 19, .10); /* grid lines, row dividers */
  --rule-mid:   rgba(17, 18, 19, .20); /* panels, inputs, section borders */

  /* The system's only tint: ruled lines inside a "hot" document. */
  --red-line:   rgba(255, 51, 0, .45);

  /* Paper at 70% — scattered document scraps, so overlap reads. */
  --paper-veil: rgba(251, 251, 249, .70);

  /* Hover wash for the secondary CTA (ink at 5%). */
  --ink-wash:   rgba(17, 18, 19, .05);

  /* On --stage-bg */
  --on-dark:      #fbfbf9;
  --on-dark-soft: rgba(251, 251, 249, .55);
  --on-dark-rule: rgba(251, 251, 249, .15);


  /* ---- Type -------------------------------------------------
     Archivo 800 carries every display voice. Nunito 400 carries
     every reading voice. Hierarchy comes from weight and size
     contrast, never from color. */

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* The third voice. This is a self-hosted tool: paths, flags, image tags and
     compose commands are part of the subject matter, and setting them in the
     body face makes them look like prose about software rather than software.
     A system stack, so it costs nothing to load. */
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
               'Liberation Mono', monospace;
  --fs-mono:   .92em;   /* mono runs large against Nunito at the same px */

  /* Display — line-height .84–.99, tracking -.035 to -.045em.
     clamp() keeps it fluid; the floor never drops below 40px. */
  --fs-hero:    clamp(68px, 9vw, 132px);
  --fs-h2:      clamp(44px, 5.2vw, 76px);
  --fs-h2-lg:   clamp(46px, 5.6vw, 84px);
  --fs-h2-xl:   clamp(48px, 6vw, 92px);
  --fs-label:   28px;                 /* item label */

  --lh-hero:    .84;
  --lh-h2:      .99;
  --lh-h2-lg:   .97;

  --ls-hero:    -.045em;
  --ls-h2:      -.035em;
  --ls-h2-lg:   -.038em;
  --ls-label:   -.02em;
  --ls-cta:     -.01em;

  /* Body */
  --fs-lead:    24px;                 /* lead paragraph, 1.45 */
  --fs-item:    19px;                 /* item body, 1.42 */
  --lh-lead:    1.45;
  --lh-item:    1.42;

  /* Chrome — uppercase, 12–14px, tracked. */
  --fs-eyebrow: 13px;   --ls-eyebrow: .24em;
  --fs-nav:     13px;   --ls-nav:     .20em;
  --fs-mark:    14px;   --ls-mark:    .30em;
  --fs-caption: 12px;   --ls-caption: .20em;
  --fs-tag:     16px;   --ls-tag:     .12em;
  --fs-ordinal: 18px;   --ls-ordinal: .10em;
  --fs-band:    19px;   --ls-band:    .22em;


  /* ---- Spacing ----------------------------------------------
     8-based scale. 120 is reserved for the deck page margin and
     is never used in the web build; the web build uses fluid
     gutters and a 104px section rhythm. */

  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  60px;
  --s-7:  80px;
  --s-8:  120px;                      /* deck page margin only */

  /* Chrome lockups sit at 20px — deliberately off the 8-scale,
     tuned to the .30em wordmark tracking. Used only there. */
  --gap-lockup:  20px;

  --gutter:      clamp(24px, 5vw, 72px);  /* page gutter */
  --split-gap:   clamp(32px, 4vw, 72px);  /* column gap in a split */
  --section-y:   104px;                   /* section padding block */
  --set-lead-in: 88px;                    /* headline → set of items */
  --line-pitch:  11px;                    /* ruled-line stack pitch */


  /* ---- Borders & radii --------------------------------------
     Radius 0 everywhere. The single curve in the system is a
     pure 50% dot used as compositional counterweight. */

  --radius:    0;
  --bd-hair:   1px;                   /* grid, row dividers */
  --bd-panel:  2px;                   /* doc blocks, panels, inputs, tags */
  --bd-rail:   4px;                   /* the red process rail */
  --bd-frame:  10px;                  /* containment frame, split divider */
  --rail-w:    8px;                   /* vertical red rail */


  /* ---- Structure --------------------------------------------
     12 columns, drawn not implied. One hairline per 8.3333%.
     This is the only background texture in the system: no
     grain, no noise, no photography. */

  --col: 8.3333%;
  --grid-texture: repeating-linear-gradient(
    to right,
    transparent 0 calc(var(--col) - 1px),
    var(--rule) calc(var(--col) - 1px) var(--col)
  );

  /* The signature asymmetric split: argument 62.5% / diagram 37.5%. */
  --split-main:  520px;               /* flex-basis, argument field */
  --split-aside: 400px;               /* flex-basis, diagram field */


  /* ---- Motion -----------------------------------------------
     No bounce, no spring, no overshoot. Hover moves; it never
     glows. Delays are authored per element in ms via --d. */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop:  cubic-bezier(.2, .8, .2, 1);

  --dur-reveal: .7s;                  /* fade + 34px rise */
  --dur-x:      .8s;                  /* scaleX 0→1 from left */
  --dur-y:      .9s;                  /* scaleY 0→1 from top */
  --dur-pop:    .6s;                  /* scale .45→1 */
  --dur-hover:  .2s;
  --dur-cta:    .3s;

  --rise:  34px;                      /* reveal travel */
  --shift: 10px;                      /* CTA hover travel */
}