/* ============================================================
   PRIVATE/APP — Design tokens
   Split-palette industrial-precision system.
============================================================ */

:root {
  /* Ink (dark) palette */
  --ink-000: #0B0D10;      /* base dark surface */
  --ink-050: #11141A;      /* elevated dark */
  --ink-100: #181C23;      /* card dark */
  --ink-200: #242932;      /* border dark */
  --ink-300: #3A414D;      /* muted edge */

  /* Bone (light) palette */
  --bone-000: #F4F2ED;     /* base warm off-white */
  --bone-050: #ECEAE3;     /* subtle fill */
  --bone-100: #E3E0D7;     /* divider */
  --bone-200: #C9C5B8;     /* muted */

  /* Foreground */
  --fg-on-dark:   #E8E6E1;
  --fg-on-dark-2: #A8A59E;
  --fg-on-dark-3: #6B6962;

  --fg-on-light:   #121418;
  --fg-on-light-2: #55575C;
  --fg-on-light-3: #8A8A85;

  /* Signal — used sparingly: active, key numerals, hover */
  --signal:        #FF5A3C;
  --signal-weak:   rgba(255, 90, 60, 0.12);

  /* Operational semantic (only inside product artifacts) */
  --op-red:    #E5484D;
  --op-amber:  #F5A524;
  --op-green:  #3DD68C;
  --op-cyan:   #5AD1FF;

  /* Type */
  --ff-sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale (clamp-based, fluid) */
  --fs-micro:  11px;
  --fs-xs:     12px;
  --fs-sm:     13px;
  --fs-base:   15px;
  --fs-md:     17px;
  --fs-lg:     22px;
  --fs-xl:     clamp(28px, 3vw, 40px);
  --fs-2xl:    clamp(40px, 5vw, 64px);
  --fs-3xl:    clamp(56px, 8vw, 120px);
  --fs-hero:   clamp(64px, 10vw, 160px);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Geometry */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --border-1: 1px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in:  cubic-bezier(.5, 0, .9, .3);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 600ms;

  /* Layout */
  --maxw: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 56px;
}

/* ============================================================
   Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--fg-on-light);
  background: var(--bone-000);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--signal); color: var(--ink-000); }

/* ============================================================
   Utility primitives
============================================================ */
.mono { font-family: var(--ff-mono); font-feature-settings: "ss01","zero"; }

.kicker {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
}

.rule {
  height: 1px; width: 100%;
  background: currentColor;
  opacity: 0.15;
}

.hairline {
  height: 1px; width: 100%;
  background: currentColor;
  opacity: 0.08;
}

/* Slash glyph — the signature separator */
.slash {
  display: inline-block;
  color: var(--signal);
  font-weight: 400;
  transform: skewX(-4deg);
  margin: 0 0.12em;
}

/* Surfaces */
.surface-ink  { background: var(--ink-000); color: var(--fg-on-dark); }
.surface-bone { background: var(--bone-000); color: var(--fg-on-light); }