/* ==========================================================================
   CogniPrism section system  —  v3
   Second companion file. Load after cogniprism-icons.css.

   Changed from v2: Sage's ramp completed to three steps (Base, Mid, Deep),
   matching Magenta and Robin Egg. --cp-sage in cogniprism-icons.css
   (#8FAF8A) is unchanged and is this ramp's Mid step; Base and Deep are
   added here. Deep is new as of the Brand Color Reference Guide v4 update.
   ========================================================================== */

:root {

  /* ---- Text neutral -----------------------------------------------------
     Not a brand colour, and that is the point. Every colour in the guide is a
     brand colour, so text kept borrowing one, and Navy was the only one dark
     enough to work everywhere. That is how Navy drifted into a dominant role.
     Slate gives text a home outside the palette, which is what lets Navy be
     genuinely reserved.

     Slate clears body-text contrast on every surface in this file, including
     both scrim worst cases. It beats Navy everywhere by a small margin.

     Caution: Slate against Navy is 1.06:1. They read as the same colour.
     Slate text on a Navy section is invisible; use Ivory or Robin Egg there.
  -------------------------------------------------------------------------- */
  --cp-slate: #2A2F3B;

  /* ---- Canvases ---------------------------------------------------------
     Ivory is the base. Champagne is the complementary neutral. Pale Oak is a
     third neutral, used rarely, not a rhythm partner.
  -------------------------------------------------------------------------- */
  --cp-champagne: #F0E5D3;
  --cp-ivory:     #FBFAF9;
  --cp-oak-light: #DBCDBD;
  --cp-oak-dark:  #CFBAA0;

  /* ---- Tinted canvases, OPTIONAL ----------------------------------------
     Brand colours mixed over Ivory at low percentage. Cool where the neutrals
     are warm. Available when a page's accent wants a surface that holds body
     copy; not part of the default rhythm.

     All clear 10:1 with Slate text.
  -------------------------------------------------------------------------- */
  --cp-tint-cerulean: #E1E9ED;   /* Cerulean at 14% */
  --cp-tint-robin:    #E6F3F3;   /* Robin Egg at 14% */
  --cp-tint-sage:     #EAEEE7;   /* Sage at 16%, B2C only */

  /* ---- Accent ramps -----------------------------------------------------
     Hue and saturation held, lightness only. Base on Navy, Mid for large text
     and graphics on light, Deep for body text on light. No step works
     everywhere: a colour vivid enough to read on Navy cannot also be dark
     enough to read on Champagne.
  -------------------------------------------------------------------------- */
  --cp-magenta:      #CD74C9;
  --cp-magenta-mid:  #C45ABF;
  --cp-magenta-deep: #A53BA0;
  --cp-robin-mid:    #2F9095;
  --cp-robin-deep:   #257074;

  /* Sage's ramp. --cp-sage (cogniprism-icons.css, #8FAF8A) is this ramp's
     Mid step and is unchanged: nothing already using --cp-sage needs to
     change. Base and Deep are added here to complete the pattern.
     Deep exists because Mid measures 1.94:1 on Champagne and 2.32:1 on
     Ivory, both below the 3:1 graphic threshold, and read as washed out at
     diagram and fine-linework stroke weight (the 7C model diagrams are the
     reference case). Deep clears 3.69:1 / 4.41:1 on the same two surfaces.
     Deep is reliable for large graphics and fine linework on Champagne or
     Ivory, not for running body copy, and should be avoided on Pale Oak
     Light (2.95:1, below even the decorative threshold there). */
  --cp-sage-base: #9DB89A;
  --cp-sage-deep: #5F7D5A;

  --cp-tex: 160px;   /* grain tile. Never change: the wrap is only clean here. */
}

body { color: var(--cp-slate); }

/* --------------------------------------------------------------------------
   1. Canvases
   -------------------------------------------------------------------------- */

.cp-ivory     { background-color: var(--cp-ivory); }
.cp-champagne { background-color: var(--cp-champagne); }
.cp-oak       { background-color: var(--cp-oak-light); }

.cp-tint-cerulean { background-color: var(--cp-tint-cerulean); }
.cp-tint-robin    { background-color: var(--cp-tint-robin); }
.cp-tint-sage     { background-color: var(--cp-tint-sage); }

/* --------------------------------------------------------------------------
   2. Accent sections
   ONE accent colour per page, appearing two or three times, with the first
   appearance no lower than the middle of the page. Variety across the site
   comes from the accent changing between pages, not from stacking surfaces
   inside one page.

   Assignments:
     Homepage             Navy
     7S Model             Cerulean
     How We Work          Baltic
     Speaking & Training  Navy
     For Individuals      Sage
     Contact              Cerulean

   Navy is no longer a canvas utility. It is the accent on the pages assigned
   it, and it appears nowhere else.
   -------------------------------------------------------------------------- */

.cp-accent-navy   { background-color: var(--cp-navy);     color: #C6DCE9; }
.cp-accent-baltic { background-color: var(--cp-baltic);   color: #CFE2EC; }
.cp-accent-sage   { background-color: #8FAF8A;            color: var(--cp-navy); }

.cp-accent-navy   h1, .cp-accent-navy   h2,
.cp-accent-baltic h1, .cp-accent-baltic h2 { color: var(--cp-robin); }
.cp-accent-sage   h1, .cp-accent-sage   h2 { color: var(--cp-navy); }

/* Cerulean as an accent SURFACE holds a headline but not body copy: Ivory on
   Cerulean is 4.10:1. If the section has paragraphs, use .cp-tint-cerulean
   instead of full strength. */
.cp-accent-cerulean { background-color: var(--cp-cerulean); color: var(--cp-ivory); }
.cp-accent-cerulean h1, .cp-accent-cerulean h2 { color: var(--cp-ivory); }

/* --------------------------------------------------------------------------
   3. Gradients
   Only within the neutrals. A gradient carries one canvas into the next, which
   is the one case where adjacent sections may share a colour at the boundary.

   Baltic-to-Navy was removed: it made Navy a dominant field.
   Cerulean-to-Navy was never included: its light end is 4.10:1 and cannot
   carry body copy.
   -------------------------------------------------------------------------- */

.cp-grad-down { background: linear-gradient(180deg, var(--cp-champagne), var(--cp-ivory)); }
.cp-grad-up   { background: linear-gradient(180deg, var(--cp-ivory), var(--cp-champagne)); }

/* Gradient plus grain in one declaration, so the texture rides the colour. */
.cp-grad-down.cp-grain {
  background-image: url('../surfaces/textures/cp-texture-grain.webp'),
                    linear-gradient(180deg, var(--cp-champagne), var(--cp-ivory));
  background-size: var(--cp-tex) var(--cp-tex), auto;
  background-repeat: repeat, no-repeat;
}
.cp-grad-up.cp-grain {
  background-image: url('../surfaces/textures/cp-texture-grain.webp'),
                    linear-gradient(180deg, var(--cp-ivory), var(--cp-champagne));
  background-size: var(--cp-tex) var(--cp-tex), auto;
  background-repeat: repeat, no-repeat;
}

/* --------------------------------------------------------------------------
   4. Surfaces
   -------------------------------------------------------------------------- */

.cp-grain {
  background-image: url('../surfaces/textures/cp-texture-grain.webp');
  background-size: var(--cp-tex) var(--cp-tex);
  background-repeat: repeat;
}

.cp-plaster {
  background-image: url('../surfaces/textures/cp-texture-plaster-soft.webp');
  background-size: 320px 320px;
  background-repeat: repeat;
}
.cp-plaster--medium {
  background-image: url('../surfaces/textures/cp-texture-plaster-medium.webp');
}

.cp-facet {
  background-image: url('../surfaces/patterns/cp-pattern-facet.svg');
  background-size: 40px 40px;
  background-repeat: repeat;
}

/* --------------------------------------------------------------------------
   5. THE TWO RULES
   These are the load-bearing part of this file. Everything else is variables.

   RULE 1, canvas.
     Adjacent sections differ in canvas colour, unless a gradient carries one
     into the next.

   RULE 2, texture cadence.
     Never two textured sections in a row. Any texture is followed by a plain
     or dissolving surface. Covers grain, plaster, facet, and the lattice
     equally.

     Exception: the same texture on a continuous canvas reads as one surface,
     not two. A hero on Ivory grain followed by a section on Ivory grain is
     correct. Grain followed by plaster is not, even when the canvas changes.

   The second rule is the stronger one. Rule 1 only catches same-canvas
   collisions, so plaster into grain passes it and still looks wrong.

   One more, for the seamless-blend move: a surface can appear continuous
   across a section boundary with grain or plaster, never with facet or the
   lattice. The tile restarts at each boundary. With random noise that is
   invisible, because any row meeting any other row is statistically
   identical. With a geometric pattern the reset is a hard line.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Lattice
   -------------------------------------------------------------------------- */

.cp-lattice-corner { position: relative; overflow: hidden; }
.cp-lattice-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../surfaces/patterns/cp-lattice-corner.svg');
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(255deg, #000 8%, transparent 52%);
          mask-image: linear-gradient(255deg, #000 8%, transparent 52%);
}
.cp-lattice-corner > * { position: relative; z-index: 1; }

.cp-lattice-panel {
  background-image: url('../surfaces/patterns/cp-lattice-panel.svg');
  background-repeat: repeat;
  padding: 34px;
}

/* --------------------------------------------------------------------------
   7. Dividers
   -------------------------------------------------------------------------- */

.cp-divider {
  height: 2px;
  border: 0;
  margin: 30px 0;
  background: linear-gradient(90deg, transparent,
    rgba(66,129,164,.6) 22%, rgba(66,129,164,.6) 78%, transparent);
}
.cp-accent-navy .cp-divider,
.cp-accent-baltic .cp-divider {
  background: linear-gradient(90deg, transparent,
    rgba(251,250,249,.45) 22%, rgba(251,250,249,.45) 78%, transparent);
}

/* --------------------------------------------------------------------------
   8. Dissolve
   -------------------------------------------------------------------------- */

.cp-dissolve {
  height: 170px;
  background-color: inherit;
  background-image: url('../surfaces/textures/cp-texture-grain.webp');
  background-size: var(--cp-tex) var(--cp-tex);
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
}

/* --------------------------------------------------------------------------
   9. Chevron element
   A placed element, once per page. Not a repeating field. Built for a
   trio-of-cards layout that has not been designed yet, so it currently has
   no assigned home in the page rhythm.
   -------------------------------------------------------------------------- */

.cp-chevron { margin: 0; line-height: 0; }
.cp-chevron img, .cp-chevron svg { display: block; width: 100%; height: auto; }

.cp-chevron-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: -62px;
  position: relative;
  z-index: 2;
}
.cp-chevron-trio > * {
  background: var(--cp-ivory);
  padding: 20px;
  box-shadow: 0 8px 24px -6px rgba(7,53,91,.24);
}

@media (max-width: 700px) {
  .cp-chevron-trio { grid-template-columns: 1fr; margin-top: 16px; }
}

@media print {
  .cp-grain, .cp-plaster, .cp-facet, .cp-dissolve,
  .cp-lattice-corner::before { background-image: none; }
}