/* Ease — the app-factory design system, for the marketing sites and any HTML.
   Mirrors design-system/tokens.json and swift/EaseKit. Light first; dark redefines the same tokens. */

:root {
  color-scheme: light;
  /* ink — text is never colored */
  --ink: #2B2838; --ink-2: #6E697E; --ink-3: #A29DB3;
  /* surfaces */
  --paper: #F7F5FB; --card: #FFFFFF; --card-2: #FBFAFE;
  --hair: rgba(60, 50, 95, 0.12); --hair-strong: rgba(60, 50, 95, 0.20);
  /* accents: mark / text-on-tint / tint */
  --lilac: #8B84DB; --lilac-deep: #7B73D6; --lilac-txt: #5F57A8; --lilac-tint: #EEEBFB;
  --mint: #7FC8A9; --mint-txt: #2F7A5B; --mint-tint: #DFF4EA;
  --apricot: #F1AE72; --apricot-txt: #9A5F2E; --apricot-tint: #FCEBDD;
  --sky: #9DC3EE; --sky-txt: #4F6E9A; --sky-tint: #DCEBFA;
  --rose: #EE9DA6; --rose-txt: #A34A5A; --rose-tint: #FBE3E8;
  --gray: #B8B2CB;
  /* wallpaper */
  --wall-1: #CFDCF7; --wall-2: #E4D6F4; --wall-3: #F6D9E3; --wall-4: #FBE8D6;
  /* data series (validated, use in order, direct-label everything) */
  --series-1: #7B73D6; --series-2: #3FA986; --series-3: #E39449; --series-4: #4F8BD6; --series-5: #D86E86;
  /* elevation */
  --shadow-soft: 0 2px 12px rgba(60, 50, 95, 0.10);
  --shadow-card: 0 22px 60px rgba(90, 80, 150, 0.18);
  --shadow-button: 0 8px 24px rgba(123, 115, 214, 0.35);
  /* radius */
  --r-control: 7px; --r-row: 10px; --r-card: 14px; --r-window: 16px; --r-pill: 999px;
  /* space (4-pt grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --t-display: 600 clamp(34px, 5vw, 56px)/1.06 var(--font);
  --t-title: 600 22px/1.2 var(--font);
  --t-heading: 600 15px/1.4 var(--font);
  --t-body: 400 15px/1.55 var(--font);
  --t-secondary: 400 13px/1.5 var(--font);
  --t-caption: 500 11px/1.4 var(--font);
  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --d-micro: 120ms; --d-fade: 180ms; --d-expand: 220ms; --d-reveal: 700ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ECE9F5; --ink-2: #B9B4C9; --ink-3: #7E7894;
    --paper: #17151F; --card: #201D2B; --card-2: #262334;
    --hair: rgba(236, 233, 245, 0.10); --hair-strong: rgba(236, 233, 245, 0.18);
    --lilac: #9D96F0; --lilac-deep: #8B84DB; --lilac-txt: #C9C4FA; --lilac-tint: #2A2740;
    --mint: #6FCFA8; --mint-txt: #A9E6CC; --mint-tint: #1E3129;
    --apricot: #F2B06B; --apricot-txt: #F7CFA5; --apricot-tint: #3A2C1F;
    --sky: #78A8F0; --sky-txt: #B5D0F7; --sky-tint: #1F2B3B;
    --rose: #F08FA6; --rose-txt: #F9C1CA; --rose-tint: #3B222A;
    --gray: #6F6985;
    --wall-1: #262B45; --wall-2: #2E2740; --wall-3: #3A2A38; --wall-4: #3C3128;
    --series-1: #8B84DB; --series-2: #3F9E78; --series-3: #CC7C30; --series-4: #5B8FD9; --series-5: #D0687E;
    --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECE9F5; --ink-2: #B9B4C9; --ink-3: #7E7894;
  --paper: #17151F; --card: #201D2B; --card-2: #262334;
  --hair: rgba(236, 233, 245, 0.10); --hair-strong: rgba(236, 233, 245, 0.18);
  --lilac: #9D96F0; --lilac-deep: #8B84DB; --lilac-txt: #C9C4FA; --lilac-tint: #2A2740;
  --mint: #6FCFA8; --mint-txt: #A9E6CC; --mint-tint: #1E3129;
  --apricot: #F2B06B; --apricot-txt: #F7CFA5; --apricot-tint: #3A2C1F;
  --sky: #78A8F0; --sky-txt: #B5D0F7; --sky-tint: #1F2B3B;
  --rose: #F08FA6; --rose-txt: #F9C1CA; --rose-tint: #3B222A;
  --gray: #6F6985;
  --wall-1: #262B45; --wall-2: #2E2740; --wall-3: #3A2A38; --wall-4: #3C3128;
  --series-1: #8B84DB; --series-2: #3F9E78; --series-3: #CC7C30; --series-4: #5B8FD9; --series-5: #D0687E;
  --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.45);
}

/* base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font: var(--t-body); -webkit-font-smoothing: antialiased; background: var(--paper); }
.ease-wallpaper { background: linear-gradient(135deg, var(--wall-1) 0%, var(--wall-2) 40%, var(--wall-3) 74%, var(--wall-4) 100%) fixed; }
h1 { font: var(--t-display); letter-spacing: -0.025em; margin: 0 0 var(--s-4); }
h2 { font: var(--t-title); letter-spacing: -0.015em; margin: 0 0 var(--s-3); }
h3 { font: var(--t-heading); margin: 0 0 var(--s-2); }
p { margin: var(--s-2) 0; max-width: 66ch; }
a { color: var(--lilac-txt); text-decoration: none; } a:hover { color: var(--ink); }
small, .ease-secondary { font: var(--t-secondary); color: var(--ink-2); }
code { font-family: var(--mono); font-size: 0.86em; background: var(--paper); padding: 1px 5px; border-radius: 5px; }

/* components */
.ease-label { font: var(--t-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lilac); }
.ease-card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--s-6); }
.ease-hairline { height: 1px; background: var(--hair); border: 0; margin: var(--s-4) 0; }
.ease-btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 9px 16px; border-radius: 9px; border: 0;
  background: var(--lilac-deep); color: #fff; font: var(--t-secondary); font-weight: 500; box-shadow: var(--shadow-button);
  cursor: pointer; transition: transform var(--d-fade) var(--ease); }
.ease-btn:hover { transform: translateY(-1px); }
.ease-btn-ghost { display: inline-flex; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--hair); background: transparent; color: var(--ink-2); font: var(--t-secondary); cursor: pointer; }
.ease-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--hair); color: var(--ink-2); font: var(--t-secondary); }
.ease-chip.is-selected { background: var(--lilac-tint); border-color: var(--lilac); color: var(--lilac-txt); }
.ease-chip.tint-lilac { background: var(--lilac-tint); color: var(--lilac-txt); border-color: transparent; }
.ease-chip.tint-mint { background: var(--mint-tint); color: var(--mint-txt); border-color: transparent; }
.ease-chip.tint-apricot { background: var(--apricot-tint); color: var(--apricot-txt); border-color: transparent; }
.ease-chip.tint-sky { background: var(--sky-tint); color: var(--sky-txt); border-color: transparent; }
.ease-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle; }
.ease-dot.good { background: var(--mint); } .ease-dot.attention { background: var(--apricot); } .ease-dot.off { background: var(--gray); }
.ease-dot.clear { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }
.ease-capsule { display: inline-flex; align-items: center; gap: 9px; height: 26px; padding: 0 14px 0 12px; border-radius: 13px;
  background: rgba(255,255,255,0.6); backdrop-filter: blur(12px); box-shadow: var(--shadow-soft); font: var(--t-secondary); color: var(--ink); }
.ease-tile { border-radius: var(--r-card); padding: var(--s-5) var(--s-6); }
.ease-tile.lilac { background: var(--lilac-tint); } .ease-tile.mint { background: var(--mint-tint); } .ease-tile.apricot { background: var(--apricot-tint); } .ease-tile.sky { background: var(--sky-tint); }
.ease-number { font: 500 26px/1.1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* motion — one curve, no bounce, and nothing moves for people who asked it not to */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity var(--d-fade) linear; }
  .ease-btn:hover { transform: none; }
  * { animation-duration: 0.01ms !important; }
}