/* tokens.css — design tokens: iOS system colours, type scale, 8pt space,
   radii. Light by default; dark by @media (prefers-color-scheme: dark).
   Raw system hues are for fills and glyphs; words use the *-text/tint
   values (>= 4.5:1, scripts: contrast check). Phone width first. */
:root {
  color-scheme: light dark;

  --system-blue:   #007AFF;
  --system-green:  #34C759;
  --system-red:    #FF3B30;
  --system-orange: #FF9500;
  --system-yellow: #FFCC00;
  --system-gray:   #8E8E93;

  --tint:          #0066CC;   /* links, plain buttons, sheet Cancel/Save */
  --tint-fill:     #0071E3;   /* filled buttons, selected pill (white text) */
  --on-tint:       #FFFFFF;
  --tint-soft:     rgba(0, 113, 227, .12);
  --tint-on-soft:  #0056AD;   /* words on --tint-soft */
  --destructive:   #D70015;   /* red words; also the swipe Delete fill */
  --success-text:  #1B7A33;

  --label:            #000000;
  --secondary-label:  #636366;
  --tertiary-label:   #6C6C70;   /* placeholders, disabled */
  --separator:        rgba(60, 60, 67, .29);
  --separator-opaque: #C6C6C8;
  --fill:             rgba(118, 118, 128, .12);
  --fill-strong:      rgba(118, 118, 128, .20);

  --bg-grouped:      #F2F2F7;
  --bg-cell:         #FFFFFF;
  --bg-cell-pressed: #E5E5EA;
  --bg-sheet:        #F2F2F7;
  --bg-sheet-cell:   #FFFFFF;
  --bg-bar:          rgba(249, 249, 249, .9);
  --seg-thumb:       #FFFFFF;
  --toast-bg:        rgba(28, 28, 30, .94);
  --toast-text:      #FFFFFF;
  --toast-action:    #409CFF;
  --backdrop:        rgba(0, 0, 0, .35);
  --shadow-thumb:    0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
  --shadow-float:    0 10px 40px rgba(0,0,0,.18);
  --shadow-pill:     0 1px 3px rgba(0,0,0,.3);   /* a pill over the sign-in photo */
  --focus:           #007AFF;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto,
          "PingFang HK", "Noto Sans HK", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI",
          Roboto, "PingFang HK", "Noto Sans HK", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --large-title: 700 2.125rem/2.5625rem var(--font-display);  /* 34/41 */
  --title1:      700 1.75rem/2.125rem  var(--font-display);   /* 28/34 */
  --title2:      700 1.375rem/1.75rem  var(--font-display);   /* 22/28 */
  --title3:      600 1.25rem/1.5625rem var(--font-display);   /* 20/25 */
  --headline:    600 1.0625rem/1.375rem var(--font);          /* 17/22 */
  --body:        400 1.0625rem/1.375rem var(--font);          /* 17/22 */
  --callout:     400 1rem/1.3125rem var(--font);              /* 16/21 */
  --subheadline: 400 .9375rem/1.25rem var(--font);            /* 15/20 */
  --footnote:    400 .8125rem/1.125rem var(--font);           /* 13/18 */
  --caption:     400 .75rem/1rem var(--font);                 /* 12/16 */

  --sp-half: 4px; --sp-1: 8px; --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px; --sp-5: 40px; --sp-6: 48px;
  --gutter: 16px;                    /* 20px from 744px */

  --r-cell: 10px;  --r-card: 14px;  --r-pill: 999px;
  --hit: 44px;     --row-h: 44px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  --dur: 280ms;    --dur-fast: 180ms;

  --page-max: 46rem;  --page-max-wide: 60rem;

  /* #82: the members' face colours, taken in the server's member order (family-cards.js), never
     by name. White initials on each are at least 4.5:1. */
  --face-1: #0040B5; --face-2: #A80010; --face-3: #095A20; --face-4: #7A3A35;
  --face-5: #5B3A8E; --face-6: #0F6E6E; --face-7: #9A5B00; --face-8: #5D5D63;
}

@media (prefers-color-scheme: dark) {
  :root {
    --system-blue: #0A84FF; --system-green: #30D158; --system-red: #FF453A;
    --system-orange: #FF9F0A; --system-yellow: #FFD60A;
    --tint: #409CFF; --tint-fill: #0071E3; --on-tint: #FFFFFF;
    --tint-soft: rgba(64, 156, 255, .16); --tint-on-soft: #409CFF;
    --destructive: #FF6961; --success-text: #30D158;
    --label: #FFFFFF; --secondary-label: #AEAEB2; --tertiary-label: #98989F;
    --separator: rgba(84, 84, 88, .65); --separator-opaque: #38383A;
    --fill: rgba(118, 118, 128, .24); --fill-strong: rgba(118, 118, 128, .36);
    --bg-grouped: #000000; --bg-cell: #1C1C1E; --bg-cell-pressed: #2C2C2E;
    --bg-sheet: #1C1C1E; --bg-sheet-cell: #2C2C2E;
    --bg-bar: rgba(22, 22, 23, .9); --seg-thumb: #636366;
    --toast-bg: rgba(44, 44, 46, .96);
    --backdrop: rgba(0, 0, 0, .55); --shadow-float: 0 10px 40px rgba(0,0,0,.6);
    --focus: #0A84FF;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; --dur-fast: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Transitional aliases (delete once nothing names them). #82 removed every colour, radius,
   control-height and motion alias; what is left is still named by a page or styles.css. */
:root {
  --color-focus-inner: #ffffff;
  --text-sm: 0.9375rem;  --text-base: 1rem;  --text-md: 1.0625rem;
  --text-lg: 1.25rem;    --text-xl: 1.5rem;
  --weight-medium: 500;  --weight-semibold: 600;
  --leading-normal: 1.45;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
  --focus-ring-width: 3px;
}