/* =============================================================================
   PITLINE — design tokens
   Theme: dark is the brand default; an explicit [data-theme="light"] is set by
   the inline head script so there is no flash and no duplicated palette block.
   Shape rule: radius is 0 everywhere. Primary surfaces get a diagonal notch on
   the top-right and bottom-left corners. Nothing on this page is rounded.
   Accent lock: --accent is the only accent on the page. Product colours in the
   colourway picker are photography, not UI chrome.
============================================================================= */

:root {
  color-scheme: dark;

  /* ---- surface ---------------------------------------------------------- */
  --bg:            #0c0d0f;
  --bg-2:          #121417;
  --bg-3:          #191c20;
  --bg-inset:      #08090a;
  --stage-1:       #16191c;
  --stage-2:       #0b0c0e;

  /* ---- ink -------------------------------------------------------------- */
  --fg:            #eef0f2;
  --fg-2:          #a2a9b0;
  --fg-3:          #7d858c;

  /* ---- lines ------------------------------------------------------------ */
  --line:          rgb(255 255 255 / .09);
  --line-2:        rgb(255 255 255 / .16);
  --line-3:        rgb(255 255 255 / .28);

  /* ---- accent ----------------------------------------------------------- */
  --accent:        #ff5a1f;   /* fills, rules, focus */
  --accent-text:   #ff6f38;   /* accent used as small text */
  --accent-ink:    #0c0d0f;   /* text sitting on an accent fill */
  --accent-wash:   rgb(255 90 31 / .12);

  /* ---- depth ------------------------------------------------------------ */
  --shadow-1: 0 1px 0 rgb(255 255 255 / .05), 0 18px 40px -24px rgb(0 0 0 / .9);
  --shadow-2: 0 1px 0 rgb(255 255 255 / .06), 0 40px 90px -40px rgb(0 0 0 / .95);

  /* ---- type ------------------------------------------------------------- */
  --font-fa: "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --font-la: "Archivo", "Vazirmatn", system-ui, sans-serif;

  --step--2: clamp(.70rem, .68rem + .08vw, .76rem);
  --step--1: clamp(.83rem, .80rem + .16vw, .92rem);
  --step-0:  clamp(1rem,  .97rem + .16vw, 1.06rem);
  --step-1:  clamp(1.13rem, 1.06rem + .34vw, 1.32rem);
  --step-2:  clamp(1.4rem, 1.24rem + .74vw, 1.9rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.7vw, 2.95rem);
  --step-4:  clamp(2.45rem, 1.85rem + 2.9vw, 4.5rem);
  --step-5:  clamp(3rem, 2.05rem + 4.8vw, 6.4rem);

  /* ---- space ------------------------------------------------------------ */
  --gutter:   clamp(1.15rem, 4vw, 3.5rem);
  --shell:    1440px;
  --section:  clamp(4.5rem, 9vw, 8.5rem);
  --notch:    14px;
  --notch-sm: 8px;

  /* ---- motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --dur-1: 180ms;
  --dur-2: 380ms;
  --dur-3: 720ms;

  /* ---- layers (the only z-index values used anywhere) -------------------- */
  --z-base:   0;
  --z-sticky: 20;
  --z-nav:    40;
  --z-menu:   50;
  --z-grain:  60;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #e9eaec;
  --bg-2:          #f3f4f5;
  --bg-3:          #dcdee1;
  --bg-inset:      #d3d6d9;
  --stage-1:       #f7f8f8;
  --stage-2:       #dfe2e5;

  --fg:            #14161a;
  --fg-2:          #4b535a;
  --fg-3:          #5c646b;

  --line:          rgb(16 18 22 / .12);
  --line-2:        rgb(16 18 22 / .20);
  --line-3:        rgb(16 18 22 / .34);

  --accent:        #e8420a;
  --accent-text:   #a8320a;
  --accent-ink:    #0c0d0f;
  --accent-wash:   rgb(232 66 10 / .10);

  --shadow-1: 0 1px 0 rgb(255 255 255 / .7), 0 16px 34px -22px rgb(20 22 26 / .45);
  --shadow-2: 0 1px 0 rgb(255 255 255 / .8), 0 40px 80px -40px rgb(20 22 26 / .5);
}