/* Design tokens for Sísifo Creative Agency.
   Every size is expressed in "design pixels" (--u) so the whole layout scales with the viewport
   the same way the brandbook frames do (designed at 1470 × 956). Colours come from the brandbook:
   orange #E94A2E, black, gray #4B535B and white; everything else is an alpha of those. */

/* Metropolis is the open-licence stand-in for Avenir (brandbook body face). */
@font-face { font-family: "Metropolis"; src: url("/assets/fonts/Metropolis-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("/assets/fonts/Metropolis-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("/assets/fonts/Metropolis-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("/assets/fonts/Metropolis-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Quentin is the brandbook's hand-made script, used only for short accents. */
@font-face { font-family: "Quentin"; src: url("/assets/fonts/Quentin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --u: clamp(.85px, 100vw / 1470, 1.3px);

  --s4: calc(var(--u) * 4);  --s8: calc(var(--u) * 8);  --s12: calc(var(--u) * 12); --s16: calc(var(--u) * 16);
  --s24: calc(var(--u) * 24); --s32: calc(var(--u) * 32); --s48: calc(var(--u) * 48); --s72: calc(var(--u) * 72);
  --s120: calc(var(--u) * 120); --s192: calc(var(--u) * 192);

  /* Brand colours, verbatim from the brandbook. */
  --orange: #e94a2e; --black: #000; --gray: #4b535b; --white: #fff;
  /* A brighter orange for hovers and touched particles, and a deep ember for the dark end of gradients. */
  --orange-hi: #ff6747; --ember: #5c1a10;

  --site: #000;
  --bg: #0b0b0c; --panel: #141516; --card: #1d1f22; --control: #2f3338;

  --glass: rgba(20, 21, 23, .52);
  --glass-filter: blur(calc(var(--u) * 24)) saturate(1.3);

  --fill-1: rgba(255, 255, 255, .06);
  --fill-2: rgba(255, 255, 255, .1);
  --fill-3: rgba(255, 255, 255, .16);
  --rule:   rgba(255, 255, 255, .14);
  --chip-blur: blur(calc(var(--u) * 12)) saturate(1.3);

  /* Light ground used while the portfolio frame is zoomed out. */
  --l-bg: #ecebe9;
  --l-lift: 0 calc(var(--u) * 24) calc(var(--u) * 60) calc(var(--u) * -24) rgba(40, 20, 12, .22);

  --ink-1: #fff; --ink-2: #b3b7bb; --ink-3: #868d94;

  --grad-ember: linear-gradient(180deg, #000 0%, #1a0806 38%, #5c1a10 70%, #e94a2e 100%);
  --grad-glow: radial-gradient(120% 90% at 50% 110%, rgba(233, 74, 46, .55) 0%, rgba(92, 26, 16, .35) 45%, rgba(0, 0, 0, 0) 75%);

  --font-text:   "Metropolis", "Avenir Next", Avenir, system-ui, sans-serif;
  --font-script: "Quentin", "Brush Script MT", cursive;

  --t-s: calc(var(--u) * 13); --lh-s: 1.35; --tr-s: .005em;
  --t-m: calc(var(--u) * 16); --lh-m: 1.5;  --tr-m: -.005em;
  --t-l: calc(var(--u) * 28); --lh-l: 1.15; --tr-l: -.02em;
  --tr-caps: .08em;
  --d-1: min(calc(var(--u) * 132), 9.5vw); --lh-d1: .92;
  --d-2: calc(var(--u) * 56); --lh-d2: 1.02;

  --r-xs: calc(var(--u) * 6); --r-s: calc(var(--u) * 10); --r-m: calc(var(--u) * 14); --r-l: calc(var(--u) * 20);
  --r-pill: 999px; --btn-h: calc(var(--u) * 44); --gutter: var(--s48);

  --ease-out:  cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 160ms; --dur-ui: 240ms; --dur-in: 600ms; --stagger: 60ms;
  --in-blur: calc(var(--u) * 12); --in-y: calc(var(--u) * 16); --press: .97;
}
@media (max-width: 767px) {
  :root { --u: calc(100vw / 430); --t-s: max(12px, calc(var(--u) * 13)); --t-m: max(15px, calc(var(--u) * 16));
          --t-l: max(22px, calc(var(--u) * 28)); --d-1: calc(var(--u) * 64); --d-2: calc(var(--u) * 40); --gutter: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-ui: 0ms; --dur-in: 0ms; --stagger: 0ms; --in-blur: 0px; --in-y: 0px; }
}