/*
 * iOS design tokens, ported from sampaio-tech/iOS-design-system (MIT):
 * lib/src/theme/colors/default.dart, system_colours.dart, typography/typography.dart.
 * Rule from the system: never hardcode colors or type styles in components; use these tokens.
 */
@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* System colors (light) */
  --system-red: #FF3B30;
  --system-orange: #FF9500;
  --system-yellow: #FFCC00;
  --system-green: #34C759;
  --system-teal: #5AC8FA;
  --system-blue: #007AFF;
  --system-indigo: #5856D6;
  --system-purple: #AF52DE;
  --system-pink: #FF2D55;
  --system-gray-01: #8E8E93;
  --system-gray-02: #AEAEB2;
  --system-gray-03: #C7C7CC;
  --system-gray-04: #D1D1D6;
  --system-gray-05: #E5E5EA;
  --system-gray-06: #F2F2F7;

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-tertiary: #FFFFFF;
  --grouped-primary: #F2F2F7;
  --grouped-secondary: #FFFFFF;

  /* Labels (100 / 60 / 30 / 18 %) */
  --label: #000000;
  --label-2: rgba(60, 60, 67, .6);
  --label-3: rgba(60, 60, 67, .3);
  --label-4: rgba(60, 60, 67, .18);

  /* Fills */
  --fill-1: rgba(120, 120, 128, .2);
  --fill-2: rgba(120, 120, 128, .16);
  --fill-3: rgba(120, 120, 128, .12);
  --fill-4: rgba(120, 120, 128, .08);

  --separator: #C6C6C8;
  --material: rgba(249, 249, 249, .78); /* system chrome material */

  /* Motion / touch (button-system skill) */
  --anim-in: 180ms;
  --anim-out: 120ms;
  --pressed-opacity: .8;
  --touch: 44px;

  /* Typography: SF on Apple devices, Inter elsewhere (SF Pro can't be self-hosted on the web) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Variable", Inter, system-ui, sans-serif;

  /* Accessible palette (acessible.dart): tinted text on surfaces needs more contrast than system colors */
  --a11y-red: #D70015; --a11y-orange: #C93400; --a11y-green: #248A3D; --a11y-teal: #0071A4;
  --a11y-blue: #0040DD; --a11y-indigo: #3634A3; --a11y-purple: #8944AB; --a11y-pink: #D30F45;

  --tint: var(--system-blue);
  --tint-text: var(--a11y-blue);
  --on-tint: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --system-red: #FF453A;
    --system-orange: #FF9F0A;
    --system-yellow: #FFD60A;
    --system-green: #32D74B;
    --system-teal: #64D2FF;
    --system-blue: #0A84FF;
    --system-indigo: #5E5CE6;
    --system-purple: #BF5AF2;
    --system-gray-02: #636366;
    --system-gray-03: #48484A;
    --system-gray-04: #3A3A3C;
    --system-gray-05: #2C2C2E;
    --system-gray-06: #1C1C1E;

    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --grouped-primary: #000000;
    --grouped-secondary: #1C1C1E;

    --label: #FFFFFF;
    --label-2: rgba(235, 235, 245, .6);
    --label-3: rgba(235, 235, 245, .3);
    --label-4: rgba(235, 235, 245, .18);

    --fill-1: rgba(120, 120, 128, .36);
    --fill-2: rgba(120, 120, 128, .32);
    --fill-3: rgba(120, 120, 128, .24);
    --fill-4: rgba(120, 120, 128, .18);

    --separator: #38383A;
    --material: rgba(30, 30, 30, .78);

    --a11y-red: #FF6961; --a11y-orange: #FFB340; --a11y-green: #30DB5B; --a11y-teal: #70D7FF;
    --a11y-blue: #409CFF; --a11y-indigo: #7D7AFF; --a11y-purple: #DA8FFF; --a11y-pink: #FF6482;
  }
}

/* Per-profile tint (Vivian picks one of the system colors in admin) */
[data-accent="blue"]   { --tint: var(--system-blue); --tint-text: var(--a11y-blue); }
[data-accent="indigo"] { --tint: var(--system-indigo); --tint-text: var(--a11y-indigo); }
[data-accent="purple"] { --tint: var(--system-purple); --tint-text: var(--a11y-purple); }
[data-accent="pink"]   { --tint: var(--system-pink); --tint-text: var(--a11y-pink); }
[data-accent="orange"] { --tint: var(--system-orange); --tint-text: var(--a11y-orange); --on-tint: #000; }
[data-accent="teal"]   { --tint: var(--system-teal); --tint-text: var(--a11y-teal); --on-tint: #000; }
[data-accent="green"]  { --tint: var(--system-green); --tint-text: var(--a11y-green); --on-tint: #000; }
[data-accent="red"]    { --tint: var(--system-red); --tint-text: var(--a11y-red); }

/* Text styles: size / line-height from typography.dart; Bold = 600 */
.caption2   { font-size: 11px; line-height: 13px; letter-spacing: .07px; }
.caption    { font-size: 12px; line-height: 16px; }
.footnote   { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
.subhead-r  { font-size: 15px; line-height: 20px; letter-spacing: -.24px; }
.subhead-b  { font-size: 15px; line-height: 20px; letter-spacing: -.24px; font-weight: 600; }
.callout    { font-size: 16px; line-height: 21px; letter-spacing: -.32px; }
.callout-b  { font-size: 16px; line-height: 21px; letter-spacing: -.32px; font-weight: 600; }
.body       { font-size: 17px; line-height: 22px; letter-spacing: -.41px; }
.headline   { font-size: 17px; line-height: 22px; letter-spacing: -.41px; font-weight: 600; }
.title3-b   { font-size: 20px; line-height: 25px; letter-spacing: .38px; font-weight: 600; }
.title2-b   { font-size: 22px; line-height: 28px; letter-spacing: .35px; font-weight: 700; }
.title1-b   { font-size: 28px; line-height: 34px; letter-spacing: .36px; font-weight: 700; }
.large-title{ font-size: 34px; line-height: 41px; letter-spacing: .37px; font-weight: 700; }
.label-2 { color: var(--label-2); }
.label-3 { color: var(--label-3); }

/* Buttons: sizes from button-system (Small 28/r14, Medium 34/pill, Large 50/r12) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none; font-family: inherit; font-weight: 600;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: opacity var(--anim-out) ease;
}
.btn:active { opacity: var(--pressed-opacity); transition-duration: var(--anim-in); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-sm { min-height: 28px; padding: 0 12px; border-radius: 14px; font-size: 15px; }
.btn-md { min-height: 34px; padding: 0 16px; border-radius: 50px; font-size: 17px; }
.btn-lg { min-height: 50px; padding: 0 20px; border-radius: 12px; font-size: 17px; }
.btn-tint { background: var(--tint); color: var(--on-tint); }
.btn-tint-soft { background: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint-text); }
.btn-grey { background: var(--fill-2); color: var(--tint-text); }
.btn-red { background: var(--system-red); color: #fff; }
.btn-plain { background: transparent; color: var(--tint-text); }
.btn-block { display: flex; width: 100%; }

/* Grouped table (Settings-style) */
.grouped { background: var(--grouped-secondary); border-radius: 10px; overflow: hidden; }
.grouped + .grouped { margin-top: 20px; }
.row {
  display: flex; align-items: center; gap: 12px; min-height: var(--touch); padding: 0 16px; position: relative;
  color: var(--label);
}
.row + .row::before, .row + .row-link::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--separator);
}
.row-l { flex: 0 0 auto; }
.row input, .row textarea, .row select {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--label);
  font: inherit; font-size: 17px; letter-spacing: -.41px; text-align: right; outline: none; padding: 12px 0;
}
.row input::placeholder, .row textarea::placeholder { color: var(--label-3); }
.row-link { text-decoration: none; justify-content: space-between; }
.chev { width: 20px; height: 20px; fill: none; stroke: var(--label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }