/* ══════════════════════════════════════════════════════════
   Human Tech Design Tokens
   Generated from Tokens Studio JSON exports
   Colors.json + spacing.json + radius.json + typography.json
══════════════════════════════════════════════════════════ */

:root {

  /* ── Non-color tokens (preserved) ── */
  --number-0: 0px;
  --number-1: 1px;
  --number-2: 2px;
  --number-4: 4px;
  --number-6: 6px;
  --number-8: 8px;
  --number-10: 10px;
  --number-12: 12px;
  --number-14: 14px;
  --number-16: 16px;
  --number-18: 18px;
  --number-20: 20px;
  --number-24: 24px;
  --number-28: 28px;
  --number-30: 30px;
  --number-32: 32px;
  --number-36: 36px;
  --number-38: 38px;
  --number-40: 40px;
  --number-44: 44px;
  --number-48: 48px;
  --number-50: 50px;
  --number-56: 56px;
  --number-60: 60px;
  --number-64: 64px;
  --number-72: 72px;
  --number-80: 80px;
  --number-90: 90px;
  --number-96: 96px;
  --number-112: 112px;
  --number-128: 128px;
  --number-144: 144px;
  --number-160: 160px;
  --number-168: 168px;
  --number-184: 184px;
  --number-999: 999px;
  --number-1_5: 1.5px;
  --number-0_5: 0px;
  --space-none: 0px;
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 10px;
  --space-xl: 12px;
  --space-2xl: 16px;
  --space-3xl: 20px;
  --space-4xl: 24px;
  --space-5xl: 32px;
  --space-6xl: 40px;
  --space-7xl: 48px;
  --space-8xl: 64px;
  --space-9xl: 72px;
  --space-10xl: 96px;
  --radi-none: 0px;
  --radi-xxs: 2px;
  --radi-xs: 4px;
  --radi-sm: 6px;
  --radi-md: 8px;
  --radi-lg: 10px;
  --radi-xl: 12px;
  --radi-2xl: 14px;
  --radi-3xl: 18px;
  --radi-4xl: 24px;
  --radi-full: 999px;
  --radi-5xl: 32px;
  /* Route-owned presentation bounds. These are responsive host contracts,
     not permission to hard-code a product shell at one size. */
  --presentation-pill-max: 420px;
  --presentation-pill-min-height: 56px;
  --presentation-pill-min-height-narrow: 64px;
  --presentation-mini-max: 360px;
  --presentation-mini-min-height: 160px;
  --presentation-sidecar-max: 420px;
  --presentation-sidecar-min-height: 480px;
  --presentation-window-max: 560px;
  --presentation-window-min-height: 520px;
  --font-family-humanist: "PP Hatton";
  --font-family-interface: "Suisse Intl";
  --font-family-code: "Suisse Int'l Mono";
  --font-family-manifest: "Suisse Works";
  --font-weight-reg: 400;
  --font-weight-reg-ita: 400;
  --font-weight-book: 450;
  --font-weight-book-ita: 450;
  --font-weight-med: 500;
  --font-weight-med-ita: 500;
  --font-weight-semi: 600;
  --font-weight-semi-ita: 600;
  --font-weight-bold: 700;
  --font-weight-bold-ita: 700;
  --font-size-text-xs: 12px;
  --font-size-text-sm: 14px;
  --font-size-text-md: 16px;
  --font-size-text-lg: 18px;
  --font-size-text-xl: 20px;
  --font-size-h6: 24px;
  --font-size-h5: 30px;
  --font-size-h4: 36px;
  --font-size-h3: 48px;
  --font-size-h2: 60px;
  --font-size-h1: 72px;
  --font-size-display: 96px;
  --font-size-display-lg: 128px;
  --font-size-display-xl: 144px;
  --font-size-display-2xl: 168px;
  --line-height-text-xs: 18px;
  --line-height-text-sm: 20px;
  --line-height-text-md: 24px;
  --line-height-text-lg: 28px;
  --line-height-text-xl: 30px;
  --line-height-h6: 32px;
  --line-height-h5: 38px;
  --line-height-h4: 44px;
  --line-height-h3: 60px;
  --line-height-h2: 72px;
  --line-height-h1: 90px;
  --line-height-display: 112px;
  --line-height-display-lg: 144px;
  --line-height-display-xl: 160px;
  --line-height-display-2xl: 184px;

  /* ── Color tokens (Light Mode) ── */
  --color-blue-5: #f5f9ff;
  --color-blue-10: #e5efff;
  --color-blue-20: #d1e3ff;
  --color-blue-30: #a8ccff;
  --color-blue-40: #80b0ff;
  --color-blue-50: #6394fd;
  --color-blue-60: #4e77f4;
  --color-blue-70: #3458ea;
  --color-blue-80: #1d3ed3;
  --color-blue-90: #1f39a3;
  --color-blue-95: #17235e;
  --color-green-5: #f1fddd;
  --color-green-10: #dbfaae;
  --color-green-20: #b0f358;
  --color-green-30: #87e515;
  --color-green-40: #76c71a;
  --color-green-50: #63ad14;
  --color-green-60: #4f920c;
  --color-green-70: #437b0f;
  --color-green-80: #386312;
  --color-green-90: #2f5214;
  --color-green-95: #183206;
  --color-yellow-5: #fffae5;
  --color-yellow-10: #fff1ad;
  --color-yellow-20: #ffe047;
  --color-yellow-30: #ffcc00;
  --color-yellow-40: #ebb000;
  --color-yellow-50: #d88e03;
  --color-yellow-60: #c66d01;
  --color-yellow-70: #ae5104;
  --color-yellow-80: #93410b;
  --color-yellow-90: #79360c;
  --color-yellow-95: #502001;
  --color-red-5: #fff5f5;
  --color-red-10: #ffebeb;
  --color-red-20: #ffd7d6;
  --color-red-30: #ffb9b8;
  --color-red-40: #ff918f;
  --color-red-50: #fc6764;
  --color-red-60: #eb302d;
  --color-red-70: #c51411;
  --color-red-80: #a11412;
  --color-red-90: #831816;
  --color-red-95: #500807;
  --color-base-black: #000000;
  --color-base-white: #ffffff;
  --color-base-transparent: #ffffff00;
  --color-neutral-5: #fafafa;
  --color-neutral-10: #f5f5f5;
  --color-neutral-20: #e5e5e5;
  --color-neutral-30: #d4d4d4;
  --color-neutral-40: #a3a3a3;
  --color-neutral-50: #737373;
  --color-neutral-60: #525252;
  --color-neutral-70: #404040;
  --color-neutral-80: #262626;
  --color-neutral-90: #171717;
  --color-neutral-95: #0a0a0a;
  --color-kiwi-5: #edfdef;
  --color-kiwi-10: #cafcd1;
  --color-kiwi-20: #97f7a2;
  --color-kiwi-30: #2be947;
  --color-kiwi-40: #20cf3b;
  --color-kiwi-50: #19b330;
  --color-kiwi-60: #119725;
  --color-kiwi-70: #117920;
  --color-kiwi-80: #146720;
  --color-kiwi-90: #12541d;
  --color-kiwi-95: #04340f;
  --color-emerald-5: #ebfff7;
  --color-emerald-10: #befee2;
  --color-emerald-20: #7bf9c9;
  --color-emerald-30: #18eca9;
  --color-emerald-40: #1bd09c;
  --color-emerald-50: #00b88a;
  --color-emerald-60: #009973;
  --color-emerald-70: #008064;
  --color-emerald-80: #006b56;
  --color-emerald-90: #005745;
  --color-emerald-95: #00382f;
  --color-sky-5: #f0f8ff;
  --color-sky-10: #e0f1ff;
  --color-sky-20: #bde4ff;
  --color-sky-30: #85d2ff;
  --color-sky-40: #3dbbff;
  --color-sky-50: #009afa;
  --color-sky-60: #0083e0;
  --color-sky-70: #0068b8;
  --color-sky-80: #005694;
  --color-sky-90: #06477a;
  --color-sky-95: #042b4e;
  --color-purple-5: #fbf5ff;
  --color-purple-10: #f5ecfe;
  --color-purple-20: #ecd7fe;
  --color-purple-30: #e0c0fc;
  --color-purple-40: #ce9af9;
  --color-purple-50: #c07bf4;
  --color-purple-60: #aa54e8;
  --color-purple-70: #932ed6;
  --color-purple-80: #7927b0;
  --color-purple-90: #65218c;
  --color-purple-95: #3d0a5c;
  --color-pink-5: #fef6fa;
  --color-pink-10: #fde7f3;
  --color-pink-20: #fcd4ea;
  --color-pink-30: #fdb4da;
  --color-pink-40: #fa8fc4;
  --color-pink-50: #f462a6;
  --color-pink-60: #e3357e;
  --color-pink-70: #bf1254;
  --color-pink-80: #9b1247;
  --color-pink-90: #81133b;
  --color-pink-95: #4d051f;
  --color-coral-5: #fff6f0;
  --color-coral-10: #ffece0;
  --color-coral-20: #ffd8c2;
  --color-coral-30: #ffbd99;
  --color-coral-40: #ff956b;
  --color-coral-50: #ff6333;
  --color-coral-60: #ef2d06;
  --color-coral-70: #c51d07;
  --color-coral-80: #a01a0e;
  --color-coral-90: #80180f;
  --color-coral-95: #510906;
  --color-orange-5: #fff8eb;
  --color-orange-10: #ffefc7;
  --color-orange-20: #ffdd99;
  --color-orange-30: #ffc14d;
  --color-orange-40: #ff990a;
  --color-orange-50: #eb7d00;
  --color-orange-60: #cc6205;
  --color-orange-70: #ac4b06;
  --color-orange-80: #8d3e0c;
  --color-orange-90: #72360d;
  --color-orange-95: #4c1e05;
  --color-alpha-light-0: #ffffff00;
  --color-alpha-light-10: #ffffff1a;
  --color-alpha-light-20: #ffffff33;
  --color-alpha-light-30: #ffffff4d;
  --color-alpha-light-40: #ffffff66;
  --color-alpha-light-50: #ffffff80;
  --color-alpha-light-60: #ffffff99;
  --color-alpha-light-70: #ffffffb3;
  --color-alpha-light-80: #ffffffcc;
  --color-alpha-light-90: #ffffffe6;
  --color-alpha-light-95: #fffffff2;
  --color-alpha-dark-0: #00000000;
  --color-alpha-dark-5: #0000000d;
  --color-alpha-dark-10: #0000001a;
  --color-alpha-dark-20: #00000033;
  --color-alpha-dark-30: #0000004d;
  --color-alpha-dark-40: #00000066;
  --color-alpha-dark-50: #00000080;
  --color-alpha-dark-60: #00000099;
  --color-alpha-dark-70: #000000b3;
  --color-alpha-dark-80: #000000cc;
  --color-alpha-dark-90: #000000e6;
  --color-alpha-dark-95: #000000f2;
  --color-background-0: #ffffff;
  --color-background-5: #fafafa;
  --color-background-10: #f5f5f5;
  --color-background-20: #e5e5e5;
  --color-background-40: #929292;
  --color-background-60: #737373;
  --color-background-80: #3b3b3b;
  --color-background-90: #0a0a0a;
  --color-text-0: #ffffff;
  --color-text-20: #f5f5f5;
  --color-text-40: #929292;
  --color-text-60: #737373;
  --color-text-80: #4d4d4d;
  --color-text-90: #0a0a0a;
  --color-border-0: #ffffff;
  --color-border-20: #ebebeb;
  --color-border-30: #d4d4d4;
  --color-border-40: #929292;
  --color-border-90: #0a0a0a;
  --color-brand-humantech: #17235e;
  /* Ratified 2026-08-11 to match what the product ships (passport-embed
     src/utils/themes.ts accent "16, 185, 129"). Was #006b56. */
  --color-brand-humanpassport: #10b981;
  /* Passport actions keep black copy on the bright emerald fill in both
     themes. These semantic tokens must exist in a fresh package build. */
  --color-passport-score-warning: rgb(245 158 11);
  --color-passport-on-accent: rgb(0 0 0);
  --shadow-passport-sm: 0 1px 2px rgb(0 0 0 / 12%);
  --shadow-passport-menu:
    0 20px 25px -5px rgb(0 0 0 / 25%),
    0 10px 10px -5px rgb(0 0 0 / 15%);
  --color-brand-humannetwork: #ff990a;
  /* Covenant's brand-500, from human-covenant src/app/globals.css. That
     ramp sits in the parent blue family and carries #17235e at brand-700. */
  --color-brand-covenant: #465fff;
  /* DEPRECATED. "Human ID" was replaced by Human Passport. Use
     --color-blue-70 for the same value. Unused inside this package as of
     2026-07-30. */
  --color-brand-humanid: #3458ea;
  /* DEPRECATED. "Human Wallet" is a retired brand name and is explicitly
     prohibited (internal-docs company/brand-architecture.md: always WaaP).
     WaaP's colour is --color-blue-70. Do not use this token; it is kept only so
     an existing consumer does not break, and should be deleted once none
     reference it. Unused inside this package as of 2026-07-30. */
  --color-brand-humanwallet: #ff6333;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-s: 0 2px 5px 0 rgba(23, 35, 94, 0.25);
  --shadow-l: 0 383px 107px 0 rgba(0, 0, 0, 0.00),
              0 245px  98px 0 rgba(0, 0, 0, 0.01),
              0 138px  83px 0 rgba(0, 0, 0, 0.05),
              0  61px  61px 0 rgba(0, 0, 0, 0.09),
              0  15px  34px 0 rgba(0, 0, 0, 0.10);
}

/* ── Material skins ────────────────────────────────────
   Glass is one selectable material skin. These tokens describe material only;
   product colour remains a separate brand layer. */
:root {
  --glass-fill-top: rgba(255, 255, 255, 0.52);
  --glass-fill-mid: rgba(244, 249, 255, 0.28);
  --glass-fill-bottom: rgba(222, 234, 250, 0.38);
  --glass-rim-bright: rgba(255, 255, 255, 0.96);
  --glass-rim-muted: rgba(36, 55, 104, 0.2);
  --glass-specular: rgba(255, 255, 255, 0.72);
  --glass-shadow-near: rgba(28, 44, 89, 0.16);
  --glass-shadow-far: rgba(28, 44, 89, 0.28);
  --glass-blur: 30px;
  --glass-saturation: 170%;
  /* Compact task-shell skins: a readable fill over an unknown host. */
  --app-shell-translucent-fill: 88%;
  --app-shell-glass-fill: 64%;
  --app-shell-glass-edge-fill: 8%;
  --app-shell-glass-bevel: 20px;
  --app-shell-glass-blur: 1px;
  --app-shell-glass-saturation: 112%;
  --app-shell-translucent-blur: var(--number-16);
  --app-shell-translucent-paper-opacity: .4;
  --app-shell-glass-paper-opacity: .1;
}

[data-theme='dark'] {
  --glass-fill-top: rgba(42, 52, 74, 0.72);
  --glass-fill-mid: rgba(23, 31, 47, 0.56);
  --glass-fill-bottom: rgba(13, 19, 31, 0.68);
  --glass-rim-bright: rgba(255, 255, 255, 0.2);
  --glass-rim-muted: rgba(0, 0, 0, 0.52);
  --glass-specular: rgba(160, 194, 255, 0.2);
  --glass-shadow-near: rgba(0, 0, 0, 0.38);
  --glass-shadow-far: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] {
  /* ── Color tokens (Dark Mode) ── */
  --color-blue-5: #111a45;
  --color-blue-10: #142569;
  --color-blue-20: #152e9c;
  --color-blue-30: #2d4dcc;
  --color-blue-40: #496fe3;
  --color-blue-50: #6191f7;
  --color-blue-60: #75a9ff;
  --color-blue-70: #96c2ff;
  --color-blue-80: #b5d2ff;
  --color-blue-90: #d1e3ff;
  --color-blue-95: #ebf3ff;
  --color-green-5: #112404;
  --color-green-10: #1d330c;
  --color-green-20: #2b4d0e;
  --color-green-30: #38660c;
  --color-green-40: #48850b;
  --color-green-50: #62ab14;
  --color-green-60: #73c219;
  --color-green-70: #87e515;
  --color-green-80: #cbfe87;
  --color-green-90: #e9ffc9;
  --color-green-95: #f1fddd;
  --color-yellow-5: #331401;
  --color-yellow-10: #421e07;
  --color-yellow-20: #592707;
  --color-yellow-30: #7a3903;
  --color-yellow-40: #a15801;
  --color-yellow-50: #bd7e07;
  --color-yellow-60: #e5ac00;
  --color-yellow-70: #ffd220;
  --color-yellow-80: #ffe16b;
  --color-yellow-90: #fff2b3;
  --color-yellow-95: #fffae5;
  --color-red-5: #330504;
  --color-red-10: #450d0c;
  --color-red-20: #5c0b0a;
  --color-red-30: #800d0b;
  --color-red-40: #a62220;
  --color-red-50: #bf4e4c;
  --color-red-60: #e58281;
  --color-red-70: #ffb9b8;
  --color-red-80: #ffd7d6;
  --color-red-90: #ffebeb;
  --color-red-95: #fff5f5;
  --color-base-black: #ffffff;
  --color-base-white: #000000;
  --color-base-transparent: #00000000;
  --color-neutral-5: #1f1f1f;
  --color-neutral-10: #292929;
  --color-neutral-20: #383838;
  --color-neutral-30: #4a4a4a;
  --color-neutral-40: #5c5c5c;
  --color-neutral-50: #808080;
  --color-neutral-60: #a3a3a3;
  --color-neutral-70: #c4c4c4;
  --color-neutral-80: #dedede;
  --color-neutral-90: #f2f2f2;
  --color-neutral-95: #fafafa;
  --color-kiwi-5: #032b0d;
  --color-kiwi-10: #0d3d15;
  --color-kiwi-20: #105219;
  --color-kiwi-30: #0f6b1c;
  --color-kiwi-40: #108f23;
  --color-kiwi-50: #18ab2e;
  --color-kiwi-60: #3aea55;
  --color-kiwi-70: #6cf580;
  --color-kiwi-80: #acf2b4;
  --color-kiwi-90: #d1fcd7;
  --color-kiwi-95: #edfdef;
  --color-emerald-5: #002620;
  --color-emerald-10: #003d31;
  --color-emerald-20: #004f40;
  --color-emerald-30: #006952;
  --color-emerald-40: #008a67;
  --color-emerald-50: #00ad82;
  --color-emerald-60: #1bd09c;
  --color-emerald-70: #17e3a3;
  --color-emerald-80: #66f9c1;
  --color-emerald-90: #b7fedf;
  --color-emerald-95: #ebfff7;
  --color-sky-5: #031e36;
  --color-sky-10: #043257;
  --color-sky-20: #004475;
  --color-sky-30: #00599e;
  --color-sky-40: #0076c9;
  --color-sky-50: #0095f2;
  --color-sky-60: #5cc3ff;
  --color-sky-70: #99d5ff;
  --color-sky-80: #b5e1ff;
  --color-sky-90: #d4ebff;
  --color-sky-95: #f0f8ff;
  --color-purple-5: #2c0742;
  --color-purple-10: #401559;
  --color-purple-20: #581c80;
  --color-purple-30: #7424a8;
  --color-purple-40: #8a44bd;
  --color-purple-50: #b574e5;
  --color-purple-60: #cb93f9;
  --color-purple-70: #dbb5fc;
  --color-purple-80: #e7cbfe;
  --color-purple-90: #ebd8fe;
  --color-purple-95: #fbf5ff;
  --color-pink-5: #2e0312;
  --color-pink-10: #4d0b23;
  --color-pink-20: #6e0d32;
  --color-pink-30: #a61049;
  --color-pink-40: #bf2264;
  --color-pink-50: #fa64aa;
  --color-pink-60: #fd81c2;
  --color-pink-70: #fda7d4;
  --color-pink-80: #fcc2e2;
  --color-pink-90: #fddcee;
  --color-pink-95: #fef6fa;
  --color-coral-5: #330604;
  --color-coral-10: #4f0f09;
  --color-coral-20: #70120a;
  --color-coral-30: #961605;
  --color-coral-40: #c22405;
  --color-coral-50: #f04815;
  --color-coral-60: #ff7a45;
  --color-coral-70: #ffa878;
  --color-coral-80: #ffc9ab;
  --color-coral-90: #ffe0cc;
  --color-coral-95: #fff6f0;
  --color-orange-5: #331403;
  --color-orange-10: #4f2509;
  --color-orange-20: #6b2f09;
  --color-orange-30: #8c3d05;
  --color-orange-40: #b55704;
  --color-orange-50: #db7500;
  --color-orange-60: #f69813;
  --color-orange-70: #fcc358;
  --color-orange-80: #ffdd99;
  --color-orange-90: #ffecbd;
  --color-orange-95: #fff8eb;
  --color-alpha-light-0: #00000000;
  --color-alpha-light-10: #0000001a;
  --color-alpha-light-20: #00000033;
  --color-alpha-light-30: #0000004d;
  --color-alpha-light-40: #00000066;
  --color-alpha-light-50: #00000080;
  --color-alpha-light-60: #00000099;
  --color-alpha-light-70: #000000b3;
  --color-alpha-light-80: #000000cc;
  --color-alpha-light-90: #000000e6;
  --color-alpha-light-95: #000000f2;
  --color-alpha-dark-0: #ffffff00;
  --color-alpha-dark-5: #ffffff0d;
  --color-alpha-dark-10: #ffffff1a;
  --color-alpha-dark-20: #ffffff33;
  --color-alpha-dark-30: #ffffff4d;
  --color-alpha-dark-40: #ffffff66;
  --color-alpha-dark-50: #ffffff66;
  --color-alpha-dark-60: #ffffff99;
  --color-alpha-dark-70: #ffffffb3;
  --color-alpha-dark-80: #ffffffcc;
  --color-alpha-dark-90: #ffffffe6;
  --color-alpha-dark-95: #fffffff2;
  --color-background-0: #141414;
  --color-background-5: #242424;
  --color-background-10: #333333;
  --color-background-20: #474747;
  --color-background-40: #a8a8a8;
  --color-background-60: #c4c4c4;
  --color-background-80: #dbdbdb;
  --color-background-90: #ffffff;
  --color-text-0: #0a0a0a;
  --color-text-20: #404040;
  --color-text-40: #737373;
  --color-text-60: #999999;
  --color-text-80: #dbdbdb;
  --color-text-90: #ffffff;
  --color-border-0: #0a0a0a;
  --color-border-20: #525252;
  --color-border-30: #787878;
  --color-border-40: #d4d4d4;
  --color-border-90: #ffffff;
}

/* ── Motion ────────────────────────────────────────── */
:root {
  /* Duration */
  --dur-instant:  80ms;   /* tap/press micro-feedback */
  --dur-fast:    150ms;   /* hover, color, border changes */
  --dur-normal:  280ms;   /* content fade, element enter */
  --dur-enter:   320ms;   /* panels, sheets, slides */
  --dur-screen:  380ms;   /* full-screen transitions */
  --dur-slow:    600ms;   /* emphasis, celebration */

  /* Easing */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);          /* general */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);         /* entering — decelerate */
  --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);         /* exiting — accelerate */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);      /* bounce: icons, active states */
  --ease-slide:   cubic-bezier(0.32, 0.72, 0, 1);         /* panel/screen slide (iOS-like) */

  /* Ambient, looping motion ONLY — a drift, a breath, a float. Sinusoidal:
     velocity is zero only at the two turning points and maximal exactly between
     them, which is what a body on a current does.

     It exists because --ease-default was being used for this and is wrong for
     it. --ease-default holds noticeably at both ends of every segment it runs,
     so a looping drift authored with it spends a measurable share of its cycle
     stopped — and on a keyframe list with any INTERIOR stop it stops there too,
     mid-travel. Measured on the shipped Cryptex glyph fade: 880 to 1000ms held
     at opacity 0.150 in the middle of its own dissolve, every cycle, on every
     glyph. See scripts/visual/prism-curve.mjs. */
  --ease-drift:   cubic-bezier(0.37, 0, 0.63, 1);         /* looping ambient drift — sine */
}