/* PoolLock design tokens — spec §4.3.
 *
 * This is the only file in the project allowed to contain a colour literal.
 * A hex code anywhere else is a build failure, checked by:
 *   grep -rE '#[0-9A-Fa-f]{3,6}' assets/css --exclude=tokens.css
 *
 * Two documented departures from the spec text, both recorded in
 * docs/content-gaps.md:
 *   C1  --wrap is 1360px, not 1200px. The reference homepage
 *       (docs/brand/E1_Home_dc.html) sets 1360px on every section, and §0
 *       gives the brand files precedence over this spec.
 *   C3  --pl-mist is a fifth colour, taken from the photo placeholders in the
 *       reference homepage. It exists here so the no-hex-outside-tokens rule
 *       still holds.
 */

:root {
  /* raw palette — never used directly in modules */
  --pl-navy:  #0A2540;   /* 16.4:1 on white */
  --pl-slate: #44617B;   /*  6.5:1 on white */
  --pl-sky:   #8FBFD4;   /*  2.0:1 on white — never text on white */
  --pl-amber: #D9912F;   /*  2.6:1 on white — state/safety only */
  --pl-paper: #FFFFFF;
  --pl-mist:  #E4E7EA;   /* C3 — placeholder fill only, never a surface */
  /* C9 — Norwegian flag red, an ORIGIN DEVICE and nothing else.
   *
   * The brandbook admits it at flag proportions to say one thing: this
   * company is Norwegian. It is never type, never a fill, never a border,
   * never a call to action, never a state, never in the footer or on the
   * payoff. The whole reason the rule is that narrow is so the colour keeps
   * meaning what it means; used as an accent it stops saying anything.
   *
   * The brandbook caps it at two instances, About only. Extended on
   * 13 August, at the client's request, to the product hero — as the same
   * device, not as decoration. Recorded in docs/content-gaps.md as C19. */
  --pl-flag:  #BA0C2F;

  /* semantic — modules use ONLY these */
  --c-surface:       var(--pl-paper);
  --c-surface-inv:   var(--pl-navy);
  --c-text:          var(--pl-navy);
  --c-text-muted:    var(--pl-slate);
  --c-rule:          var(--pl-slate);
  --c-water:         var(--pl-sky);
  /* DR-01 gives sky a role in the chrome — the breadcrumb band, the active
   * navigation underline, the telephone control. Whatever sits on water is
   * navy at 7.8:1; white on sky is 2.0:1 and fails, which is why this token
   * exists and why it is deliberately NOT redefined in the dark block below.
   * Sky is sky in both themes, and navy is what goes on it in both. */
  --c-on-water:      var(--pl-navy);
  --c-state:         var(--pl-amber);   /* safety/state ONLY */
  --c-placeholder:   var(--pl-mist);    /* missing photography, never decoration */
  --c-origin:        var(--pl-flag);    /* origin device ONLY — see above */
  --c-btn-bg:        var(--pl-navy);
  --c-btn-text:      var(--pl-paper);
  --c-btn-bg-hover:  var(--pl-slate);
  --c-focus:         var(--pl-navy);    /* NOT amber — see brand law */

  /* The signature mark.
   *
   * The padlock wave from the logo, kept as a shape rather than a colour:
   * modules paint it with currentColor through a mask, so it takes the ink
   * of whatever it opens and no second copy of the palette exists. The
   * literal below is a mask alpha, not a brand colour — a mask reads only
   * opacity, and black is simply what opaque looks like. */
  --pl-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24'%3E%3Cpath d='M8 15 q10 -11 21 0 t21 0 t21 0 t21 0' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* type */
  --font-display: "Archivo", system-ui, sans-serif;   /* wdth 125 */
  --font-text:    "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --step--1: 0.8125rem;                                  /* 13px micro-labels */
  --step-0:  clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);   /* body, min 17px */
  /* Long-form reading only — the article body, which E6 sets a step above the
   * interface at 19px/1.7. A page of prose and a page of modules are not read
   * the same way, and the size that suits a two-line module paragraph is a
   * size nobody wants for nine minutes. */
  --step-read: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1.4vw, 2.5rem);
  --step-3:  clamp(2rem, 1.6rem + 2.8vw, 3.5rem);
  --step-4:  clamp(2.25rem, 1.6rem + 5.6vw, 4.5rem);     /* H1, Archivo */

  --lh-tight: 1;
  --lh-head:  1.2;
  --lh-body:  1.6;
  --track-tight: -0.02em;
  --track-label:  0.2em;

  /* space */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-6: 3rem;   --sp-8: 3.5rem;
  --sp-12: 4rem;
  --section-y: clamp(var(--sp-6), 7vw, var(--sp-12));

  /* layout */
  --wrap: 1360px;           /* C1 — 1200px in the spec, 1360px in E1 Home */
  --measure: 68ch;
  --gutter: 24px;
  --rule: 1px;
  --radius: 0;              /* immutable */
  /* DR-02 — the three product-line icons, at the size C17 draws them. One
   * value, because three icons at three sizes stop reading as one set. */
  --icon: 3.5rem;           /* 56px */
  --transition: 160ms ease;
  /* The masthead is sticky, so its height is a layout constant several other
   * things depend on: in-page anchors must clear it, the specification table's
   * heading sticks below it, and so does the article's table of contents.
   * Declared once, here, rather than repeated as a magic number in three
   * stylesheets.
   *
   * It is NOT one number. Below 48rem the phone number cannot share a row with
   * the mark and the menu control, so the bar is two rows. This was declared as
   * a flat 60px until 12 August, which made every sticky offset on a phone
   * wrong by the difference — a heading would jump behind the masthead and stay
   * there. A constant that is only true on desktop is worse than no constant.
   *
   * If the masthead's contents change, re-measure and correct these two. */
  --masthead-h: 50px;
}

@media (min-width: 48rem) {
  :root {
    --masthead-h: 60px;
  }
}

/* Theme contract: every module root carries data-theme="light|dark|water".
 * Modules never define colours conditionally — they read the semantic
 * variables, and these blocks redefine them. One implementation, three
 * appearances. */
[data-theme="dark"] {
  --c-surface:      var(--pl-navy);
  --c-text:         var(--pl-paper);
  --c-text-muted:   var(--pl-sky);
  --c-rule:         var(--pl-slate);
  --c-placeholder:  var(--pl-slate);
  --c-btn-bg:       var(--pl-paper);
  --c-btn-text:     var(--pl-navy);
  --c-btn-bg-hover: var(--pl-sky);
  --c-focus:        var(--pl-sky);
}

/* Water — the third ground.
 *
 * Sky is water in this system, and until now it appeared only in the chrome:
 * the breadcrumb band, the active-item underline, the phone pill. A page built
 * entirely of light modules has no colour in it at all, and Contact was five
 * white sections in a row before the navy safety statement at the foot.
 *
 * This is a deliberate widening of DR-01's rule that sky lives in the chrome —
 * see C43. What does not change is the part of that rule which is a contrast
 * fact rather than a preference: **no white type on sky, ever.** Every value
 * below is measured against #8FBFD4:
 *
 *   navy on sky ................ 7.82:1  AA everywhere, AAA at large sizes
 *   muted (80% navy) on sky .... 5.11:1  AA body text, with headroom
 *   slate on sky ............... 3.26:1  FAILS — which is why muted is not slate
 *   white on sky ............... 1.99:1  FAILS — the rule DR-01 is right about
 *
 * The muted tone is mixed from two tokens we already own rather than added as a
 * fourth blue, so the palette stays the size it was. The plain declaration
 * before each mix is the fallback for a browser without color-mix: it lands on
 * navy, which is darker than asked for and therefore always safe.
 *
 * Buttons, focus and the rest are inherited from :root unchanged — a navy
 * button on sky is the same 7.82:1, so there was nothing to restate. */
[data-theme="water"] {
  --c-surface:     var(--pl-sky);
  --c-text:        var(--pl-navy);

  --c-text-muted:  var(--pl-navy);
  --c-text-muted:  color-mix(in srgb, var(--pl-navy) 80%, var(--pl-sky));

  --c-rule:        var(--pl-navy);
  --c-rule:        color-mix(in srgb, var(--pl-navy) 45%, var(--pl-sky));

  --c-placeholder: var(--pl-mist);
  --c-placeholder: color-mix(in srgb, var(--pl-navy) 10%, var(--pl-sky));
}

/* Band — the category ground.
 *
 * The catalogue, Knowledge, the selector and Trade all open on this tint. It
 * is mixed from sky rather than added as a new blue, for the reason the water
 * block gives above: the palette stays the size it was. Sky at 22% lands on
 * #E6F1F6, within a channel or two of the tint the design asks for, and the
 * hairline at 60% on #BCD9E5.
 *
 * Measured against that ground:
 *
 *   navy on band ............... 13.69:1  AAA at every size
 *   slate on band ............... 5.71:1  AA body text — the eyebrow, the muted
 *   sky at 60% .................. hairline only, never type
 *
 * --c-rule is deliberately NOT redefined here. A secondary button on the band
 * takes its border from that token, and a hairline faint enough to sit under a
 * title is not a border anyone can find on a control. The band's own rule is a
 * separate token, read only by the band.
 *
 * The plain declaration before each mix is the fallback for a browser without
 * color-mix: paper, which is the light ground and therefore always safe.
 */
[data-theme="band"] {
  --c-surface: var(--pl-paper);
  --c-surface: color-mix(in srgb, var(--pl-sky) 22%, var(--pl-paper));

  --c-text:       var(--pl-navy);
  --c-text-muted: var(--pl-slate);

  --c-band-rule: var(--pl-sky);
  --c-band-rule: color-mix(in srgb, var(--pl-sky) 60%, var(--pl-paper));
}