/* Design tokens for CHA Star Holdings.
 *
 * THE ONLY FILE IN THIS SITE WITH A HEX COLOR IN IT. Everything else says
 * var(--navy). checks/check-slice1.sh (G17) fails the build if a hex appears
 * anywhere else, because a second copy of a brand color is a color that drifts.
 *
 * The brand values are inherited verbatim from the STAR Prints store so the
 * family reads as one operation. Do not re-pick them here.
 */

:root {
  /* ---- brand ----------------------------------------------------------- */
  --midnight: #000101;   /* header bar, top of the stage gradient */
  --navy: #162639;       /* text on the sky button */
  --dusk: #2C4B71;       /* bottom of the gradient */
  --sky: #82D5F4;        /* THE ONE ACCENT. Dark backgrounds only. */
  --white: #FFFFFF;
  --haze: #C5D3E3;       /* secondary text on dark */

  /* ---- the stage ------------------------------------------------------- */
  --stage: linear-gradient(180deg, #000101 0%, #162639 50%, #2C4B71 100%);

  /* ---- surfaces drawn on the stage ------------------------------------- */
  /* Tints of --white and --midnight. Kept here so every color lives in one
     file, even the ones that are not brand colors. */
  --card-fill: rgba(255, 255, 255, 0.045);
  --card-fill-hover: rgba(255, 255, 255, 0.075);
  --card-line: rgba(255, 255, 255, 0.14);
  --card-line-hover: rgba(255, 255, 255, 0.26);
  --card-shadow: rgba(0, 1, 1, 0.35);
  --card-shadow-lift: rgba(0, 1, 1, 0.55);
  --hairline: rgba(255, 255, 255, 0.12);

  /* The header is glass: a tint of --midnight over a blur of whatever is
     passing beneath it. Two depths, because the bar has two jobs. At the top
     of the page it sits on flat --midnight, so the resting tint is kept low
     enough to vanish into the stage entirely. Once a card is sliding under it
     the deeper tint takes over and the wordmark keeps its contrast against
     whatever colour arrives. Both are --midnight, never black: #000101 is
     faintly green and plain black over it reads as a grey smear. */
  --header-glass: rgba(0, 1, 1, 0.04);
  --header-glass-stuck: rgba(0, 1, 1, 0.44);

  /* The popover hanging off the menu button. It is the same glass as the bar
     above it, but deeper: the bar has the whole page behind it and can afford
     to vanish, whereas the menu has a card sliding under it and has to stay
     readable. --menu-hover is the same tint of --white the cards use. */
  --menu-fill: rgba(0, 1, 1, 0.92);
  --menu-line: rgba(255, 255, 255, 0.16);
  --menu-shadow: rgba(0, 1, 1, 0.5);
  --menu-hover: rgba(255, 255, 255, 0.07);

  /* The reverse of a card, and the --sky bloom behind the front one.
   *
   * The bloom is four stops of ONE colour at falling alpha, and the last one
   * is --sky at zero alpha, not the keyword `transparent`. `transparent` is
   * transparent BLACK: fading --sky to it walks the gradient through grey and
   * draws a visible grey rim across the middle of the card. Fading a colour
   * to itself at alpha zero has no rim at all. */
  --face-back-fill: rgba(255, 255, 255, 0.075);
  --glow: rgba(130, 213, 244, 0.20);
  --glow-soft: rgba(130, 213, 244, 0.11);
  --glow-faint: rgba(130, 213, 244, 0.035);
  --glow-fade: rgba(130, 213, 244, 0);

  /* ---- type ------------------------------------------------------------ */
  --font-display: "League Spartan", sans-serif;   /* 700 only */
  --font-body: "Overpass", sans-serif;

  --size-display: clamp(34px, 24.586px + 2.5104vw, 52px);   /* 34 -> 52 */
  --line-display: 1.05;
  --size-lede: clamp(17px, 15.993px + 0.2685vw, 19px);      /* 17 -> 19 */
  --line-lede: 1.5;
  --size-name: clamp(20px, 18.993px + 0.2685vw, 22px);      /* 20 -> 22 */
  --line-name: 1.1;
  --size-body: 16px;      /* never goes below this to make the fold fit */
  --line-body: 1.55;
  --size-small: 13px;
  --line-small: 1.35;
  --tracking-tag: 0.08em;

  --measure: 62ch;        /* longest a paragraph may get */

  /* ---- shape ----------------------------------------------------------- */
  --radius-card: 14px;
  --radius-button: 10px;
  --radius-pill: 999px;

  /* Glass. The saturation lift is what stops a blur of the --sky bloom
     turning into grey soup behind the bar. */
  --header-blur: 18px;
  --header-saturate: 140%;

  /* ---- the carousel ---------------------------------------------------- */
  /* One card is the body of the page. The gutter left over on each side is
     what you see of the next card, so the width is the whole layout. */
  --deck-card-w: clamp(248px, 72vw, 600px);
  /* The card is no longer sized from the window: it fills the rail, and the
     rail fills the fold left under the header. These two are its limits.
     --deck-card-h is the FLOOR -- the shortest a card may be before the page
     gives up on one screen and scrolls -- and --deck-card-max is the ceiling
     that keeps a card on a tall monitor from stretching into a column. */
  --deck-card-h: clamp(400px, 62vh, 524px);
  --deck-card-max: 760px;
  --deck-gap: clamp(12px, 3vw, 32px);
  --deck-rest-scale: 0.88;    /* a card that is not the front one */
  --deck-rest-opacity: 0.42;
  --deck-perspective: 1500px;

  /* The shadow under the front card, and the room the rail has to leave for
   * it. A horizontal scroller CANNOT show vertical overflow -- the moment
   * overflow-x is auto, overflow-y computes to auto as well -- so anything
   * the shadow reaches past the rail's padding box is sliced off in a hard
   * straight line. These two figures are what a drop shadow actually covers:
   * blur - offset above the box, blur + offset below it. The rail's padding
   * is calculated from them so the two can never drift apart. */
  --card-lift-y: 30px;
  --card-lift-blur: 64px;
  --deck-clear-top: calc(var(--card-lift-blur) - var(--card-lift-y));
  --deck-clear-bottom: calc(var(--card-lift-blur) + var(--card-lift-y));

  /* ---- space: an 8px grid ---------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --header-height: 64px;
  --content-max: 1120px;

  /* ---- motion: two moments, nothing else ------------------------------- */
  --dur-expand: 250ms;      /* a card opens */
  --dur-flip: 620ms;        /* a card turns over */
  --dur-slide: 380ms;       /* a card walks to the front */
  --delay-flip: 170ms;      /* come forward first, then turn */
  --dur-hover: 160ms;
  --dur-enter: 420ms;       /* the one-time stagger on load */
  --stagger-step: 70ms;
  --lift-distance: -4px;
  --enter-distance: 16px;
  --ease-flip: cubic-bezier(0.2, 0.75, 0.2, 1);

  /* The menu button and its popover. The stagger is what makes the three
     bars read as one mechanism: opening, the middle bar leaves first and the
     outer two follow it into the X; closing, the outer two sweep back first
     and the middle bar returns last. */
  --dur-menu: 260ms;
  --menu-stagger: 90ms;

  /* ---- the wrap ---------------------------------------------------------
     The deck does not travel five cards to get back to the first one: it
     dissolves, the scroll position moves in one frame while nothing can be
     seen, and it re-forms on the other side. Out is shorter than in, so the
     deck leaves quickly and arrives gently. */
  --dur-wrap-out: 140ms;
  --dur-wrap-in: 240ms;
  --wrap-dim: 0.06;       /* how far down the rail goes at the dark point */

  /* ---- focus ----------------------------------------------------------- */
  --focus-width: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-expand: 0ms;
    --dur-flip: 0ms;
    --dur-slide: 0ms;
    --delay-flip: 0ms;
    --dur-hover: 0ms;
    --dur-enter: 0ms;
    --stagger-step: 0ms;
    --dur-menu: 0ms;
    --menu-stagger: 0ms;
    --dur-wrap-out: 0ms;
    --dur-wrap-in: 0ms;
    --wrap-dim: 1;
    --lift-distance: 0px;
    --enter-distance: 0px;
    --deck-rest-scale: 1;
  }
}