/* ============================================================================
   theme.css - the tokens.

   2026-10-24: THE STAMPED MATERIAL. Alex: "your not morphing crm layout and
   wrapping it in our design, you are rebuilding the ui of each to match out
   design theme. execpt keeping there native coloring shcemes." The design
   authority is `08 - UI Lab/client-portal.html`, walked and approved.

   WHAT IS THE MATERIAL AND WHAT IS THE COLOUR SCHEME. The material is the
   geometry and the greys: one light direction, walls that are real borders,
   pits and proud things. It is the same material in the IIS CRM. The COLOUR
   SCHEME is this product's own and is unchanged - the button grammar below is
   instruction 19, 51 and 52 and it is absolute:

     save / accept / continue / confirmed   BLUE, filled
     cancel / back                           WHITE, outlined, immediately LEFT of save
     cancel subscription / exit / sign out / delete   RED

   So --go, --stop and --done keep their exact values. What changed is the
   surface they sit on. The greys are mixed toward --go's hue, which is what
   makes a white-on-white material read as THIS product rather than a generic
   one.

   THE LIGHT. Upper left, about 315 degrees, eye in the same corner. It never
   changes, in either product. A wall is four flat faces and therefore a real
   border with four widths and four colours, never a gradient sweep; the
   unevenness is diagonal; a circle is the one place a conic gradient is
   correct; depth lives in the falloff and every hard line is 1px; nothing on
   the surface is pure white or black.

   DARK MODE IS REPLACED BY OUTDOOR MODE, and that is a decision rather than a
   deletion - recorded as D-NEW-11 in the build's DECISIONS.md. A white
   material has no dark variant: inverting it is a different material, and the
   one thing worse than no dark mode is a dark mode with invisible text in it.
   What the dark mode was FOR - an owner doing paperwork at 10pm - is a comfort
   problem; what the field actually has is a CONTRAST problem, reading a phone
   in a driveway at noon. So the axis is contrast, not luminance, and
   `html.outdoor` raises it. `color-scheme: light` is declared so native
   controls and scrollbars follow the material instead of the device.

   SIZING is unchanged, instruction 85:
     16px body, 14px the small client-info lines
     20 / 24 / 28 headings, 8px spacing grid, 12px radius, 56px tab bar
     44px minimum control height - the size a thumb hits on a phone in a truck
     1100px max content width, 16px gutter at phone width
   ============================================================================ */

:root {
  /* --- the grammar. Three colours and no others carry meaning. UNCHANGED. */
  --go: #1d4ed8;          /* save, accept, continue, confirmed */
  --go-ink: #ffffff;
  --go-soft: #eef2ff;
  --stop: #c2283a;        /* cancel subscription, exit, sign out, delete */
  --stop-soft: #fdeef0;
  --done: #15803d;        /* the green "copied" state, instruction 20 */
  --done-soft: #eafaf0;
  --warn: #92400e;
  --warn-soft: #fef6e7;

  /* --- surface. The old flat --paper/--sunk/--line keep their NAMES and their
     meanings, because 3,219 lines of screen code and 44 component classes read
     them. Only the values moved onto the material. */
  --paper: #edf0f5;        /* a proud face: a row, a card front, a key */
  --sunk:  #e2e5ea;        /* a floor: the bottom of a pit */
  --line:        #c9ced7;  /* a quiet divider inside a floor */
  --line-strong: #9b9ea6;  /* the lit wall of a proud thing */

  /* --- ink */
  --ink:        #3f434a;
  --ink-soft:   #82868e;
  --ink-faint:  #9ba0a8;
  --ink-strong: #272b33;   /* a thing's own name */
  --ink-key:    #4f535b;   /* the legend on a key */

  /* --- THE MATERIAL. The void the plane sits on, and the plane. */
  --void:      #060708;
  --void-lift: #13151a;

  --stage:    #e5e7ec;
  --stage-hi: #f2f4f8;
  --stage-lo: #d3d6dd;

  --floor:    #e2e5ea;
  --floor-lo: #dadde4;
  --floor-hi: #e9ecf1;

  /* a pit's walls: top and left are in shadow, bottom and right catch light */
  --wall-top:    #63666d;
  --wall-left:   #75787f;
  --wall-right:  #eff2f7;
  --wall-bottom: #f9fbff;
  --wall-top-deep:  #54575e;   /* a field with focus is cut deeper */
  --wall-left-deep: #666970;

  /* a proud thing's walls: the mirror of a pit's */
  --key-top:    #fafcff;
  --key-left:   #f4f7fc;
  --key-right:  #9b9ea6;
  --key-bottom: #8a8d95;
  --proud-hi: #f4f6fa;
  --proud:    #edf0f5;
  --proud-lo: #e4e7ed;

  --cut:      rgba(18, 20, 26, .9);    /* the hard top line of a pit */
  --catch:    rgba(255, 255, 255, .9); /* the light catch at its foot */
  --hairline: rgba(40, 46, 60, .14);

  /* THE PRIMARY KEY carries --go, still machined out of the same material:
     the geometry does not change, only the faces. One per screen. */
  --accent:        #1d4ed8;
  --accent-hi:     #3b67e6;
  --accent-lo:     #1740b4;
  --accent-ink:    #ffffff;
  --accent-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  --accent-top:    #5b86f5;
  --accent-left:   #4674ec;
  --accent-right:  #163da8;
  --accent-bottom: #112f82;
  --accent-soft:   #eef2ff;

  /* THE ONE LOUD THING. Reserved for "this is wrong" and used nowhere else, so
     it reads as wrong from across the room. It is --stop, because in this
     product red already means stop. */
  --alert:      #c2283a;
  --alert-ink:  #fff1f3;
  --alert-soft: #fdeef0;

  /* the live mark: the one place the material glows, saying the assistant has
     an answer waiting. The CRM's is neon green; this product's is its own
     blue. */
  --live:      #4da3ff;
  --live-glow: rgba(77, 163, 255, .6);

  /* --- type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --t-body: 16px;
  --t-small: 14px;        /* the client-info lines, instruction 20 */
  --t-tiny: 12.5px;
  --t-h3: 20px;
  --t-h2: 24px;
  --t-h1: 28px;

  /* --- the 8px grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --tap: 44px;            /* minimum control height. Never smaller. */
  --tabbar: 56px;
  --maxw: 1100px;
  --gutter: 16px;

  /* the shadow tiers. Nothing invents its own. Shadow length scales with how
     far a thing stands off its ground. */
  --shadow-1: 0 1px 1px rgba(40, 46, 60, .2),
              1px 3px 4px -2px rgba(30, 36, 48, .3);
  --shadow-2: 0 1px 1px rgba(40, 46, 60, .26),
              2px 4px 6px -3px rgba(30, 36, 48, .4),
              3px 8px 12px -6px rgba(26, 32, 44, .3);
  --shadow-pop: 0 2px 2px rgba(0, 0, 0, .3),
                0 24px 40px -16px rgba(10, 14, 22, .5),
                0 56px 80px -40px rgba(10, 14, 22, .55);

  --t: 90ms cubic-bezier(.2, .7, .3, 1);

  /* the material is a light surface and says so, so native controls and
     scrollbars follow it rather than the device */
  color-scheme: light;
}

/* ===================================================== OUTDOOR MODE
   Same geometry, same light direction, more contrast. The ink goes near black,
   the carved marks come up, the walls darken so edges survive glare, and the
   grain goes off because a multiply layer spends contrast the eye has not got
   to spare in direct sun. Set from Settings, and from the sun key in the bar,
   because the moment you need it you are standing outside. */
html.outdoor {
  --ink:        #15181d;
  --ink-soft:   #42464e;
  --ink-faint:  #565a62;
  --ink-strong: #080a0e;
  --ink-key:    #1b1e24;

  --line:        #8e949e;
  --line-strong: #6a6e76;

  --wall-top:  #44474e;
  --wall-left: #565960;
  --cut:       rgba(6, 8, 12, .96);

  --accent-hi: #2b56cc;
  --accent:    #1740b4;
  --accent-lo: #102f8c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* the plane sits on the void, which is what makes it read as an object with
     a thickness rather than as a page with a background */
  background:
    radial-gradient(110% 60% at 50% -6%, var(--void-lift) 0%, var(--void) 55%),
    var(--void);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* THE TAP RULE, Alex 2026-10-20: "from now on everything you build must be
   mobile and desktop optimize which means it needs a click and tap."
   touch-action: manipulation removes the 300ms double-tap-zoom delay, which is
   what makes a tap feel like a tap rather than a lag. */
button, a, [role="button"], input, select, textarea, summary {
  touch-action: manipulation;
  font-family: inherit;
  font-size: inherit;
}

/* No horizontal page scroll at phone width. A sideways scrollbar on a phone is
   the single most common layout defect and it is always a bug. */
body { overflow-x: hidden; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; color: var(--ink-strong); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

/* text on the material is CARVED: a hairline of light under every glyph is
   what makes it read as cut into the surface rather than printed on it */
h1, h2, h3, p, label, span, td, th, li, dt, dd {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .88);
}
html.outdoor h1, html.outdoor h2, html.outdoor h3,
html.outdoor p, html.outdoor label, html.outdoor span,
html.outdoor td, html.outdoor th, html.outdoor li,
html.outdoor dt, html.outdoor dd {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

a { color: var(--go); }

/* Focus is visible. A keyboard user must be able to see where they are, and
   Alex's tap rule is proven by dispatching a real KEY as well as a tap. */
:focus-visible {
  outline: 3px solid var(--go);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Respect a person who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}