/* Kelly Partners Group Holdings — design tokens.
   Concept B, the Owners' Manual idiom: white page, one blue, a ruled frame.
   Colours sampled from the approved concept. Change a value here, nowhere else. */

:root{
  /* Ink */
  --ink:          #1A1D20;
  --ink-2:        #4A4F54;
  --ink-3:        #6B7075;
  --ink-inverse:  #FFFFFF;

  /* Paper */
  --paper:        #FFFFFF;
  --paper-2:      #F1F2F2;   /* hero cover card, quiet panels */
  --card:         #F3F5F6;   /* figures and panels, distinct from the page */
  --cover:        rgba(241, 242, 242, 0.94);   /* hero cover card, over the photograph */

  /* One blue, five steps */
  --blue:         #005E9E;   /* the brand blue: frame, buttons, table headers */
  --blue-deep:    #003B66;   /* latest bar on a chart, hover */
  --blue-mid:     #2D7AAE;   /* accent words in a headline */
  --blue-pale:    #EDF4FB;   /* quote bands, numbered circles */
  --blue-tint:    #DCE9F5;   /* chart ramp foot */

  /* Rules */
  --rule:         #D8DCDF;
  --rule-strong:  #A8AFB5;

  /* Signals: never red or green on a share price, per the concept */
  --up:           var(--blue);
  --down:         var(--ink);
  --warn-bg:      #FFF6E5;
  --warn-ink:     #7A5200;
  --warn-rule:    #E4C77A;

  /* Type. Montserrat is the Group's brand face and the face the current site
     serves; the concept PDF only renders in Carlito because of how it was made. */
  --font:         'Montserrat', 'Montserrat Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-num:     var(--font);

  /* Scale. The reading sizes answer to the height of the screen as well as its
     width, because a section fills the viewport: on a tall screen the type grows
     with the frame instead of floating in it. */
  --step--2:      0.78125rem;  /* 12.5px navigation and chrome */
  --step--3:      0.71875rem;  /* 11.5px fine print: a director's credentials */
  --step--1:      clamp(0.78125rem, 0.73rem + 0.13vh, 0.875rem);
  --step-0:       clamp(0.875rem, 0.8rem + 0.2vh, 1.0625rem);
  --step-1:       clamp(1rem, 0.9rem + 0.24vh, 1.1875rem);
  --step-2:       clamp(1.25rem, 1.05rem + 0.45vh, 1.625rem);
  --step-3:       clamp(1.5rem, 1.25rem + 0.7vh, 2.125rem);
  --step-4:       clamp(1.875rem, 1.45rem + 1.05vh, 2.75rem);
  /* The page title: one clear step above a section heading and well below the
     hero headline. Defined here rather than as a one-off clamp because the
     scale is redefined for a phone below, and a bespoke clamp did not follow
     it: at 834 the title came out 1.5px SMALLER than the headings under it. */
  --step-title:   clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  --step-5:       clamp(1.875rem, 1.15rem + 1.3vh + 1.25vw, 3.25rem);   /* hero */

  /* Rhythm */
  --gutter:       clamp(1rem, 0.5rem + 1.6vw, 2.25rem);
  --content:      1680px;
  --section-y:    clamp(1.5rem, 0.5rem + 4.5vh, 5rem);

  /* The document frame. Narrows on small screens, as the concept specifies. */
  --frame:        6px;
  --header-h:     72px;   /* sticky header; snapped sections clear it */
  /* Where the header ends, measured from the top of the window: the frame it
     sticks beneath, its height and its hairline. The same on every page and at
     every scroll position, so anything that has to clear the header uses this. */
  --header-clear: calc(var(--frame) + var(--header-h) + 1px);

  /* One row height shared by the label/value table and the ledger, so the rules
     on either side of a two-column section land on the same lines. Tall enough
     for a title that wraps to two lines. */
  --row-h:        clamp(3.5rem, 3rem + 1vh, 4.4rem);
  --block-top:    1.5rem;   /* distance from a heading to the block beneath it */

  /* Motion. Three durations and one curve, so every change on the page moves
     at a related speed instead of the five different ones it grew. The curve
     leaves quickly and settles slowly, which is what makes a state change read
     as answered rather than animated. */
  --dur-1:        120ms;  /* colour and other in-place changes */
  --dur-2:        180ms;  /* reveals, small movement */
  --dur-3:        260ms;  /* the menu, larger transforms */
  --ease:         cubic-bezier(.2, 0, 0, 1);
  --ease-out:     cubic-bezier(0, 0, .2, 1);
  /* Flow between blocks inside a section. Desktop keeps the measure it was
     signed off with; the phone evens it onto one step. */
  --flow-a:       0.75rem;
  --flow-b:       1.5rem;

  --focus:        0 0 0 3px #FFFFFF, 0 0 0 6px var(--blue);
}

/* Concept A's paper, applied to Concept B's structure. Toggled on <body>. */
body.paper-cream{
  --paper:       #FBF7F0;
  --paper-2:     #F4EEE4;
  --card:        #FFFFFF;
  --cover:       rgba(251, 247, 240, 0.93);
  --ink:         #1B1917;
  --ink-2:       #5A5651;
  --ink-3:       #74706A;
  --rule:        #DCD5C8;
  --rule-strong: #B7AE9D;
  --blue-pale:   #EDF1F5;
  --blue-tint:   #DFE8F1;
}

@media (max-width: 900px){ :root{ --frame: 3px; } }
/* The masthead is shorter on a phone. Anything measured against it, the snap
   offset and the menu panel's height among them, follows from this one number. */
@media (max-width: 860px){ :root{ --header-h: 64px; } }

/* Phone and portrait tablet.
   The scale above is linked to the height of the screen, because a section has
   to fit a desktop viewport for the page-at-a-time scrolling to be safe. Below
   this width that scrolling is off and the page runs freely, so the linkage
   earns nothing and costs a lot: on a 844px phone it sets body copy at 14.5px.
   Here the steps are set outright, sized for reading at arm's length, and the
   sections are given room around them. */
@media (max-width: 899px), (max-height: 619px){
  :root{
    --step--1:   0.875rem;                                   /* 14px */
    --step-0:    1rem;                                       /* 16px */
    --step-1:    clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
    /* Title, heading, quote and h3 at the proportions a phone reads well,
       close to iOS's own (Title 28, Title 2 22, Title 3 20): titles 28px,
       headings 22px, quotes 19px at 390px wide. A step larger, as they were,
       the page titles and pull quotes crowded the screen. */
    --step-2:    clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
    --step-3:    clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
    --step-4:    clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
    --step-title: clamp(1.75rem, 1.45rem + 1.25vw, 2.125rem);
    --step-5:    clamp(2.125rem, 1.4rem + 3.6vw, 3rem);      /* hero */
    --section-y: clamp(3.75rem, 3rem + 3.5vw, 5.25rem);
    --row-h:     3.25rem;
    --block-top: 1.25rem;
    --flow-a:    var(--block-top);
    --flow-b:    calc(var(--block-top) * 1.5);
  }
}