/* Rebar — design tokens (design.md §7)
 *
 * The iOS system palette. Every colour in app.css references a token here;
 * literals in component CSS are a review defect.
 *
 * CONTRAST RULE: --label-tertiary and --fill are NON-TEXT tokens. Any rule
 * putting light type on a surface must state what is behind it — light type
 * is only ever applied under a selector that guarantees a dark backdrop.
 */

:root {
  /* Backgrounds */
  --bg-system:        #F2F2F7;
  --bg-secondary:     #FFFFFF;
  --bg-grouped:       #F2F2F7;

  /* Labels */
  --label:            #000000;
  --label-secondary:  rgba(60, 60, 67, 0.60);
  --label-tertiary:   rgba(60, 60, 67, 0.30);  /* non-text only */
  --label-on-color:   #FFFFFF;                 /* only on a saturated fill */

  /* Separators + fills */
  --separator:        rgba(16, 24, 40, 0.10);
  --border:           rgba(16, 24, 40, 0.09);
  --separator-opaque: #C6C6C8;
  --fill:             rgba(120, 120, 128, 0.12); /* non-text only */
  --fill-strong:      rgba(120, 120, 128, 0.20);

  /* Form fields.
   * A white input on a white card behind a 9% border is invisible — on the
   * karigar rate table the boxes could not be found at all. Inputs therefore
   * get their OWN border token, several steps stronger than a decorative
   * separator, so an empty field still reads as somewhere to type. */
  --field-bg:          #FFFFFF;
  --field-border:      rgba(16, 24, 40, 0.24);
  --field-border-hov:  rgba(16, 24, 40, 0.42);
  --field-shadow:      inset 0 1px 2px rgba(16, 24, 40, 0.06);
  --field-label:       rgba(16, 24, 40, 0.80);
  --field-placeholder: rgba(16, 24, 40, 0.40);

  /* System colours */
  --blue:             #007AFF;
  --green:            #34C759;
  --orange:           #FF9500;
  --purple:           #AF52DE;
  --red:              #FF3B30;
  --teal:             #30B0C7;

  /* Tinted chip backgrounds — ~15% of the colour (design.md §7 badges) */
  --blue-soft:        rgba(0, 122, 255, 0.15);
  --green-soft:       rgba(52, 199, 89, 0.15);
  --orange-soft:      rgba(255, 149, 0, 0.15);
  --purple-soft:      rgba(175, 82, 222, 0.15);
  --red-soft:         rgba(255, 59, 48, 0.15);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-large-title: 24px;
  --fs-title:       18px;
  --fs-headline:    14px;
  --fs-body:        13.5px;
  --fs-callout:     13.5px;
  --fs-subhead:     13px;
  --fs-footnote:    12px;
  --fs-caption:     11px;

  /* Radii (design.md §7) */
  --r-card:   8px;
  --r-list:   8px;
  --r-chip:   6px;
  --r-input:  6px;
  --r-pill:   999px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 10px;
  --sp-4: 14px;
  --sp-5: 18px;
  --sp-6: 20px;
  --sp-8: 28px;

  /* Chrome heights */
  --tabbar-h: 49px;
  --navbar-h: 44px;

  /* Safe areas — notch and home indicator in standalone mode (§7) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
}