/* Brian Brain — design tokens (DESIGN.md). The only visual source: every
   colour, radius, shadow, size and timing used by app.css comes from here,
   and app.js reads the motion tokens back with getComputedStyle. */

@font-face { font-family: 'Sora'; src: url(../fonts/sora-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sora'; src: url(../fonts/sora-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Sora'; src: url(../fonts/sora-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url(../fonts/sora-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* colour */
  --bg:      #0B0C0E;   /* the ground: home and every page */
  --mod:     #191B1F;   /* a floating module */
  --mod-2:   #202328;   /* raised inside a module, overlays */
  --mod-far: #131417;   /* a module far back in the peek stack */
  --ink:     #F2F2F2;   /* text */
  --soft:    #8A8F96;   /* secondary text */
  --dim:     #4A4E54;   /* tertiary, disabled, ticked */
  --line:    #2A2D31;   /* hairlines, empty bars */
  --acc:     #E2342D;   /* the one red: only for what needs Brian */
  --hi:      rgba(242, 242, 242, .07);   /* highlight wash on arrival */
  --hi-line: rgba(242, 242, 242, .38);   /* highlight ring on arrival */
  --scrim:   #050506;   /* what dims the layer behind */

  /* radii */
  --r-mod:   20px;      /* modules, sheets */
  --r-in:    12px;      /* photos and blocks inside a module */
  --r-chip:  9px;       /* "também em" links, inputs */
  --r-tick:  6px;       /* checkboxes */

  /* depth: four shadow levels (all with the faint top highlight) */
  --rim:     inset 0 1px 0 rgba(255, 255, 255, .06);
  --z0:      inset 0 1px 0 rgba(255, 255, 255, .04);                                          /* flat, inside a module */
  --z1:      var(--rim), 0 18px 30px -16px rgba(0, 0, 0, .9);                                 /* resting module */
  --z2:      inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 44px -18px #000, 0 0 0 1px rgba(255, 255, 255, .045); /* lifted: needs Brian */
  --z3:      inset 0 1px 0 rgba(255, 255, 255, .1), 0 50px 90px -30px #000, 0 0 0 1px rgba(255, 255, 255, .05);  /* moving / overlay */
  --z-up:    inset 0 1px 0 rgba(255, 255, 255, .08), 0 -14px 28px -12px rgba(0, 0, 0, .95);   /* peek-stack edges, lit from below */
  --lift-0:  0px;       /* resting */
  --lift-1:  -2px;      /* something due soon */
  --lift-2:  -5px;      /* needs Brian now */

  /* type: Sora only */
  --font:    'Sora', sans-serif;
  --t-micro: 11px;      /* uppercase labels, .08em tracking */
  --t-small: 12.5px;
  --t-body:  14.5px;
  --t-mod:   16px;      /* module name */
  --t-h2:    20px;
  --t-h1:    30px;      /* page title */
  --t-hello: 30px;      /* the day's headline on the home */
  --t-big:   36px;      /* a number in a module */
  --t-huge:  64px;      /* the one number that matters on a page */

  /* motion */
  --d-press: 120ms;     /* press down */
  --d-fast:  200ms;     /* ticks, small fades, reduced-motion crossfade */
  --d-base:  320ms;     /* sheets, search */
  --d-stack: 420ms;     /* peek stack opening */
  --d-depth: 560ms;     /* a module growing into its page */
  --d-back:  480ms;     /* the exact reverse */
  --d-hl:    2400ms;    /* highlight after a jump */
  --e-out:   cubic-bezier(.2, .8, .2, 1);
  --e-depth: cubic-bezier(.32, .72, 0, 1);
  --e-in:    cubic-bezier(.4, 0, 1, 1);
  --sink-scale: .92;    /* the layer behind, while a page is in front */
  --sink-dim:   .62;    /* scrim opacity over it */

  /* layout */
  --gutter:  18px;
  --stack-h: 84px;
}
@media (min-width: 900px) {
  :root {
    --r-mod: 24px; --r-in: 14px;
    --t-small: 13px; --t-body: 15px; --t-mod: 19px; --t-h2: 22px;
    --t-h1: 44px; --t-hello: 50px; --t-big: 46px; --t-huge: 104px;
    --gutter: 48px; --stack-h: 92px;
  }
}