/* ==========================================================================
   Kalinotech — design tokens
   One place for type, colour, rhythm, radii and motion.
   ========================================================================== */

@font-face {
  font-family: 'YekanBakh';
  src: url('../fonts/YekanBakhEN03Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../fonts/YekanBakhEN04Regular.woff') format('woff');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../fonts/YekanBakhEN06Bold.woff') format('woff');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- surfaces ------------------------------------------------------- */
  --paper:      #F4F7FC;
  --paper-2:    #E8EEF9;
  --paper-3:    #DAE3F3;
  --night:      #040B1F;
  --night-2:    #081330;
  --night-3:    #0D1C45;

  /* --- ink ------------------------------------------------------------ */
  --ink:        #071640;
  --ink-2:      #56627F;
  --ink-3:      #8A94AD;
  --on-night:   #FFFFFF;
  --on-night-2: rgba(255, 255, 255, .62);
  --on-night-3: rgba(255, 255, 255, .34);

  /* --- accent --------------------------------------------------------- */
  --amber:      #0A7BFF;
  --amber-2:    #6CC8FF;
  --blue:       #19B5FE;
  --blue-deep:  #063C9C;
  --blue-ink:   #041534;
  --blue-abyss: #02091C;

  /* --- lines ---------------------------------------------------------- */
  --line:       rgba(7, 22, 64, .12);
  --line-2:     rgba(7, 22, 64, .07);
  --line-night: rgba(255, 255, 255, .14);
  --line-night-2: rgba(255, 255, 255, .07);

  /* --- radii ---------------------------------------------------------- */
  --r-s:  8px;
  --r-m:  16px;
  --r-l:  24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- rhythm --------------------------------------------------------- */
  --gutter: clamp(20px, 4vw, 64px);
  --shell:  1360px;
  --shell-narrow: 880px;
  --section-y: clamp(84px, 11vw, 176px);

  /* --- type ----------------------------------------------------------- */
  --font: 'YekanBakh', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --fs-display-1: clamp(2.35rem, 6vw, 5.3rem);
  --fs-display-2: clamp(2rem, 5vw, 4.25rem);
  --fs-display-3: clamp(1.6rem, 3.3vw, 2.75rem);
  --fs-h2:        clamp(1.35rem, 2.3vw, 1.95rem);
  --fs-h3:        clamp(1.12rem, 1.6vw, 1.35rem);
  --fs-body:      1.0625rem;
  --fs-small:     .875rem;
  --fs-micro:     .75rem;
  --lh-display:   1.2;
  --lh-body:      1.95;

  /* --- motion --------------------------------------------------------- */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  .3s;
  --dur:       .6s;
  --dur-slow:  .9s;

  /* --- elevation ------------------------------------------------------ */
  --shadow-s: 0 1px 2px rgba(10, 12, 20, .05), 0 6px 18px rgba(10, 12, 20, .05);
  --shadow-m: 0 2px 6px rgba(10, 12, 20, .06), 0 18px 48px rgba(10, 12, 20, .09);
  --shadow-l: 0 4px 12px rgba(10, 12, 20, .07), 0 40px 90px rgba(10, 12, 20, .14);

  /* --- layers --------------------------------------------------------- */
  --z-bg: 0;
  --z-atmos: 1;
  --z-graphic: 2;
  --z-image: 3;
  --z-type: 4;
  --z-ui: 5;
  --z-nav: 80;
  --z-cursor: 200;
}