/* Design tokens (copied from the vault app; Apple system look: iOS 18 / macOS Sequoia). Loaded first.
   Light values on :root, dark values in two identical blocks (OS preference and the explicit
   [data-theme="dark"]); keep them in sync. Legacy names (--text, --muted, --accent…) alias the new ones. */
:root {
  /* type */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Segoe UI Variable Text",
    "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Segoe UI Variable Display",
    "Segoe UI Variable", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  --font-code: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  --t-large: 700 26px/32px var(--font-display);
  --t-title1: 700 22px/28px var(--font-display);
  --t-title2: 700 19px/24px var(--font-display);
  --t-title3: 600 17px/22px var(--font-display);
  --t-headline: 600 14px/19px var(--font-text);
  --t-body: 400 14px/20px var(--font-text);
  --t-callout: 400 13px/18px var(--font-text);
  --t-subhead: 400 13px/18px var(--font-text);
  --t-footnote: 400 12px/16px var(--font-text);
  --t-caption: 500 11px/14px var(--font-text);
  --tr-large: .011em; --tr-title1: .007em; --tr-title2: .016em; --tr-title3: .019em;
  --tr-body: -.012em; --tr-foot: -.006em;

  /* colours */
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #aeaeb2;
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --surface-3: #e5e5ea;
  --sidebar: #ebebf0;
  --fill-1: rgb(120 120 128 / 20%);
  --fill-2: rgb(120 120 128 / 16%);
  --fill-3: rgb(118 118 128 / 12%);
  --fill-4: rgb(116 116 128 / 8%);
  --separator: rgb(60 60 67 / 22%);
  --separator-opaque: #d1d1d6;
  --field-border: #8e8e93;
  --tint: #007aff;
  --tint-text: #0066cc;
  --accent-fill: #0071e3;
  --accent-fill-hover: #0077ed;
  --accent-soft: #e5f0ff;
  --red: #d70015;
  --red-fill: #e5251b;
  --red-soft: #ffe5e3;
  --orange: #ff9500;
  --orange-text: #b93800;
  --orange-soft: #fff1dd;
  --green: #34c759;
  --green-text: #248a3d;
  --green-soft: #e3f7e8;
  --purple-text: #8944ab;
  --hl: rgb(255 204 0 / 42%);
  --hl-ring: transparent;
  --overlay: rgb(0 0 0 / 32%);
  --zebra: #f7f7f9;
  --seg-thumb: #ffffff;
  --field-bg: #ffffff;
  --sheet-bg: #f2f2f7;
  --toast-bg: #000000;
  --focus: #0a7aff;
  --mesh-1: rgb(0 122 255 / 30%); --mesh-2: rgb(175 82 222 / 24%); --mesh-3: rgb(255 45 85 / 16%); --mesh-4: rgb(48 176 199 / 26%);
  --sec-0: #007aff; --sec-1: #34c759; --sec-2: #af52de; --sec-3: #ff2d55;
  --sec-4: #ff9500; --sec-5: #30b0c7; --sec-6: #5856d6; --sec-7: #a2845e;
  /* tasks: project palette (indexes 0..9) and priorities */
  --c0: #007aff; --c1: #34c759; --c2: #ff9500; --c3: #ff3b30; --c4: #af52de;
  --c5: #ff2d55; --c6: #30b0c7; --c7: #5856d6; --c8: #a2845e; --c9: #8e8e93;
  --p1: #e5251b; --p2: #f08c00; --p3: #2f7bf5; --p4: #aeaeb2;
  --sun: #f5a300;
  --chev-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' fill='none' stroke='%236E6E73' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E");
  --xmark-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 2.5l5 5M7.5 2.5l-5 5'/%3E%3C/svg%3E");
  --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");

  /* shape, sizes */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-sheet: 16px; --r-pill: 999px;
  --radius: var(--r-lg); --radius-sm: var(--r-sm);
  --hairline: 1px;
  --tap: 44px; --tabbar-h: 50px; --navbar-h: 44px; --toolbar-h: 52px;
  --modal-pad: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* elevation */
  --shadow-1: 0 0 0 .5px rgb(0 0 0 / 5%), 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-2: 0 0 0 .5px rgb(0 0 0 / 6%), 0 4px 14px rgb(0 0 0 / 8%), 0 1px 3px rgb(0 0 0 / 6%);
  --shadow-pop: 0 0 0 .5px rgb(0 0 0 / 12%), 0 12px 32px rgb(0 0 0 / 18%), 0 2px 6px rgb(0 0 0 / 8%);
  --shadow-sheet: 0 0 0 .5px rgb(0 0 0 / 10%), 0 28px 70px rgb(0 0 0 / 28%), 0 6px 18px rgb(0 0 0 / 10%);

  /* materials */
  --mat-bar: rgb(249 249 249 / 78%);
  --mat-thick: rgb(246 246 248 / 84%);
  --mat-solid: #f6f6f8;
  --mat-glass: rgb(255 255 255 / 58%);
  --glass-rim: rgb(255 255 255 / 55%);
  --blur-bar: saturate(180%) blur(20px);
  --blur-thick: saturate(190%) blur(30px);

  /* motion */
  --dur-press: 90ms; --dur-1: 160ms; --dur-2: 240ms; --dur-3: 340ms; --dur-4: 480ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.42, 0, .58, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

  /* legacy aliases (older rules keep working with the new palette) */
  --text: var(--label); --muted: var(--label-2); --border: var(--separator-opaque);
  --border-strong: var(--field-border); --accent: var(--tint); --accent-strong: var(--tint-text);
  --primary: var(--accent-fill); --primary-hover: var(--accent-fill-hover); --on-accent: #fff;
  --danger: var(--red); --danger-soft: var(--red-soft); --on-danger: #fff;
  --warn: var(--orange); --warn-text: var(--orange-text); --warn-soft: var(--orange-soft);
  --success: var(--green-text); --shadow: var(--shadow-1);
  color-scheme: light;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%,
      .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
    --ease-bounce: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121,
      1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%,
      .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}

@media (min-resolution: 2dppx) { :root { --hairline: .5px; } }

/* phones: iOS text sizes */
@media (max-width: 680px) {
  :root {
    --t-large: 700 34px/41px var(--font-display);
    --t-title1: 700 28px/34px var(--font-display);
    --t-title2: 700 22px/28px var(--font-display);
    --t-title3: 600 20px/25px var(--font-display);
    --t-headline: 600 17px/22px var(--font-text);
    --t-body: 400 17px/22px var(--font-text);
    --t-callout: 400 16px/21px var(--font-text);
    --t-subhead: 400 15px/20px var(--font-text);
    --t-footnote: 400 13px/18px var(--font-text);
    --t-caption: 500 12px/16px var(--font-text);
    --tr-body: -.024em;
    --modal-pad: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --label: #f5f5f7; --label-2: #98989d; --label-3: #636366;
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --sidebar: #161618;
    --fill-1: rgb(120 120 128 / 36%); --fill-2: rgb(120 120 128 / 32%); --fill-3: rgb(118 118 128 / 24%); --fill-4: rgb(118 118 128 / 18%);
    --separator: rgb(84 84 88 / 60%); --separator-opaque: #38383a; --field-border: #6c6c70;
    --tint: #0a84ff; --tint-text: #2997ff; --accent-fill: #0071e3; --accent-fill-hover: #1a82f0; --accent-soft: #15304f;
    --red: #ff6961; --red-soft: #3b1716; --orange: #ff9f0a; --orange-text: #ffb340; --orange-soft: #3a2a10;
    --green: #30d158; --green-text: #30db5b; --green-soft: #12301b; --purple-text: #d59cff;
    --hl: rgb(255 214 10 / 30%); --overlay: rgb(0 0 0 / 55%); --zebra: #232325; --seg-thumb: #636366; --field-bg: #2c2c2e; --sheet-bg: #1c1c1e; --toast-bg: #2c2c2e; --focus: #3d9bff;
    --mesh-1: rgb(10 132 255 / 42%); --mesh-2: rgb(191 90 242 / 34%); --mesh-3: rgb(255 55 95 / 22%); --mesh-4: rgb(64 200 224 / 28%);
    --sec-0: #0a84ff; --sec-1: #30d158; --sec-2: #bf5af2; --sec-3: #ff375f;
    --sec-4: #ff9f0a; --sec-5: #40c8e0; --sec-6: #5e5ce6; --sec-7: #ac8e68;
    --c0: #0a84ff; --c1: #30d158; --c2: #ff9f0a; --c3: #ff453a; --c4: #bf5af2; --c5: #ff375f; --c6: #40c8e0; --c7: #5e5ce6; --c8: #ac8e68; --c9: #98989d;
    --p1: #ff6961; --p2: #ffa53d; --p3: #4c9bff; --p4: #636366; --sun: #ffc233;
    --chev-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' fill='none' stroke='%2398989D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E");
    --shadow-1: 0 0 0 .5px rgb(255 255 255 / 8%);
    --shadow-2: 0 0 0 .5px rgb(255 255 255 / 10%), 0 6px 18px rgb(0 0 0 / 45%);
    --shadow-pop: 0 0 0 .5px rgb(255 255 255 / 14%), 0 16px 40px rgb(0 0 0 / 60%);
    --shadow-sheet: 0 0 0 .5px rgb(255 255 255 / 12%), 0 30px 80px rgb(0 0 0 / 70%);
    --mat-bar: rgb(29 29 31 / 72%); --mat-thick: rgb(44 44 46 / 80%); --mat-glass: rgb(30 30 32 / 55%); --glass-rim: rgb(255 255 255 / 12%); --mat-solid: #2c2c2e;
    color-scheme: dark;
  }
}

/* Explicit dark theme; keep in sync with the block above. */
:root[data-theme="dark"] {
  --label: #f5f5f7; --label-2: #98989d; --label-3: #636366;
  --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #3a3a3c; --sidebar: #161618;
  --fill-1: rgb(120 120 128 / 36%); --fill-2: rgb(120 120 128 / 32%); --fill-3: rgb(118 118 128 / 24%); --fill-4: rgb(118 118 128 / 18%);
  --separator: rgb(84 84 88 / 60%); --separator-opaque: #38383a; --field-border: #6c6c70;
  --tint: #0a84ff; --tint-text: #2997ff; --accent-fill: #0071e3; --accent-fill-hover: #1a82f0; --accent-soft: #15304f;
  --red: #ff6961; --red-soft: #3b1716; --orange: #ff9f0a; --orange-text: #ffb340; --orange-soft: #3a2a10;
  --green: #30d158; --green-text: #30db5b; --green-soft: #12301b; --purple-text: #d59cff;
  --hl: rgb(255 214 10 / 30%); --overlay: rgb(0 0 0 / 55%); --zebra: #232325; --seg-thumb: #636366; --field-bg: #2c2c2e; --sheet-bg: #1c1c1e; --toast-bg: #2c2c2e; --focus: #3d9bff;
  --mesh-1: rgb(10 132 255 / 42%); --mesh-2: rgb(191 90 242 / 34%); --mesh-3: rgb(255 55 95 / 22%); --mesh-4: rgb(64 200 224 / 28%);
  --sec-0: #0a84ff; --sec-1: #30d158; --sec-2: #bf5af2; --sec-3: #ff375f;
  --sec-4: #ff9f0a; --sec-5: #40c8e0; --sec-6: #5e5ce6; --sec-7: #ac8e68;
  --c0: #0a84ff; --c1: #30d158; --c2: #ff9f0a; --c3: #ff453a; --c4: #bf5af2; --c5: #ff375f; --c6: #40c8e0; --c7: #5e5ce6; --c8: #ac8e68; --c9: #98989d;
  --p1: #ff6961; --p2: #ffa53d; --p3: #4c9bff; --p4: #636366; --sun: #ffc233;
  --chev-updown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' fill='none' stroke='%2398989D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5l3-3 3 3M2 9l3 3 3-3'/%3E%3C/svg%3E");
  --shadow-1: 0 0 0 .5px rgb(255 255 255 / 8%);
  --shadow-2: 0 0 0 .5px rgb(255 255 255 / 10%), 0 6px 18px rgb(0 0 0 / 45%);
  --shadow-pop: 0 0 0 .5px rgb(255 255 255 / 14%), 0 16px 40px rgb(0 0 0 / 60%);
  --shadow-sheet: 0 0 0 .5px rgb(255 255 255 / 12%), 0 30px 80px rgb(0 0 0 / 70%);
  --mat-bar: rgb(29 29 31 / 72%); --mat-thick: rgb(44 44 46 / 80%); --mat-glass: rgb(30 30 32 / 55%); --glass-rim: rgb(255 255 255 / 12%); --mat-solid: #2c2c2e;
  color-scheme: dark;
}

/* no backdrop-filter: opaque materials */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --mat-bar: #f9f9f9; --mat-thick: #f6f6f8; --mat-glass: #ffffff; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mat-bar: #1d1d1f; --mat-thick: #2c2c2e; --mat-glass: #1c1c1e; } }
  :root[data-theme="dark"] { --mat-bar: #1d1d1f; --mat-thick: #2c2c2e; --mat-glass: #1c1c1e; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --mat-bar: var(--surface); --mat-thick: var(--surface); --mat-glass: var(--surface); }
}

/* higher contrast */
@media (prefers-contrast: more) {
  :root {
    --label-2: #3c3c43; --separator: #8e8e93; --separator-opaque: #8e8e93; --fill-3: rgb(118 118 128 / 22%);
    --tint-text: #0040dd; --field-border: #6c6c70;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --label-2: #ebebf5; --tint-text: #409cff; } }
  :root[data-theme="dark"] { --label-2: #ebebf5; --tint-text: #409cff; }
}