/* Design tokens — observed from Outlook 5.2642.0, not invented.
 *
 * Source: string table of ReactResources/index.mobile.v2.bundle.hbc and the
 * CSS declarations in meRenderer_iOS.js / cardRenderer-ios.js.
 * Frequencies and file:line provenance: evidence/design/css-values.json,
 * evidence/design/colours.txt.
 *
 * Rule: a token here either carries a provenance comment or is marked DERIVED
 * (a judgement made while building, to be replaced once a screen is measured).
 */

:root, [data-theme="light"] {
  /* --- surfaces ------------------------------------------------------- */
  --surface: #ffffff;              /* #ffffff x142, dominant */
  --surface-sunken: #eeeeee;       /* #eeeeee x31, list separation */
  --surface-raised: #ffffff;
  --hairline: #d2d0ce;             /* #d2d0ce x41, 1px separators */
  --hairline-strong: #605e5c;      /* #605e5c x33 */

  /* --- text ----------------------------------------------------------- */
  --text: #242424;                 /* Fluent Neutral 900 */
  --text-muted: #616161;           /* Fluent Neutral 600 */
  --text-subtle: #8a8886;          /* Fluent Neutral 500 */
  --text-on-brand: #ffffff;

  /* --- header chrome (reference: App Store screenshots 01/06/08) ------ */
  --header-bg: #0f6cbd;            /* sampled: 17,323 px of #0f6cbd in reference/shot01 */
  --brand: #0f6cbd;                /* sampled brand blue, replaces Office #0078d4 */
  --brand-pressed: #115ea3;        /* Fluent brand shade 10 */
  --brand-ink: #0e4775;            /* sampled dark blue text on white */
  --header-text: #ffffff;
  --header-sub: rgba(255, 255, 255, .82);
  --seg-track: rgba(255, 255, 255, .22);
  --seg-active: #ffffff;
  --seg-active-text: var(--brand);
  --pill-track: rgba(0, 0, 0, .22);

  /* --- brand and accents (Fluent family) ------------------------------ */
  --brand-old: #0078d4;            /* renderer CSS value; chrome uses --brand above */
  --brand-pressed-old: #005a9e;
  --accent-cyan: #62d3ff;
  --accent-green: #6ddc96;
  --accent-yellow: #f8d22a;
  --accent-pink: #ffb2bd;
  --danger: #a4262c;               /* DERIVED: Fluent red, unconfirmed here */

  /* --- calendar event tints (sampled from reference/shot08) ------------ */
  --tint-peach: #fae5d3;  --bar-peach: #c55a11;
  --tint-purple: #ebdef0; --bar-purple: #7719aa;
  --tint-green: #d5f5e3;  --bar-green: #107c41;

  /* --- swipe action (sampled #cff0da in reference/shot01) -------------- */
  --swipe-archive: #cff0da; --swipe-archive-ink: #0b5a2b;

  /* --- type ----------------------------------------------------------- */
  /* Observed sizes: 11, 12, 14, 15, 16, 17, 18px — 14px dominant (x18). */
  --font: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --fs-caption: 11px;
  --fs-metadata: 12px;
  --fs-body: 14px;
  --fs-body-lg: 15px;
  --fs-title-sm: 16px;
  --fs-title: 17px;
  --fs-title-lg: 18px;
  --lh-body: 20px;                 /* line-height: 20px observed alongside 14px */
  --fw-regular: 400;               /* observed weights: 400, 600, 700 */
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.01em;       /* DERIVED */

  /* --- spacing (from observed padding/margin literals) ----------------- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 16px;
  --sp-8: 24px;
  --row-gutter: 10px;              /* 4px 10px 5px 10px, 6.5px 24px 6.5px 10px */
  --row-inset: 16px;               /* DERIVED trailing edge */

  /* --- radii (all observed) -------------------------------------------- */
  --r-xs: 2px;                     /* x15 */
  --r-sm: 4px;                     /* x6 */
  --r-md: 8px;                     /* x4 */
  --r-pill: 28px;                  /* x4 */
  --r-round: 50%;                  /* x12, avatars */

  /* --- elevation (observed) -------------------------------------------- */
  --shadow-row: 0 1.9px 4.5px rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 0 10px #eeeeee;
  --ring-focus: 0 0 0 2px #e3eff9;

  /* --- layout ---------------------------------------------------------- */
  --row-height: 88px;              /* DERIVED: two-line row at --lh-body */
  --bar-height: 44px;
  --tab-height: 49px;
  --hairline-w: 0.5px;             /* retina hairline */

  /* --- motion (identifiers observed: spring, decay, timing, Easing) ----- */
  --dur-instant: 90ms;             /* DERIVED */
  --dur-fast: 190ms;
  --dur-base: 260ms;
  --dur-sheet: 340ms;
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS sheet/back feel */
  --spring-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark theme.
 * Values are Fluent 2 semantic tokens, which is what the binary consumes:
 * the app links FluentUI and calls brandBackground1, brandBackgroundTint1/2
 * and separatorDefaultColor (see the Swift symbols in the main executable).
 * The light brand value is confirmed by pixel sampling (#0f6cbd, 17,323 px in
 * reference/shot01); the dark surface #1e1e1e appears literally in the app's
 * own card CSS (cardRenderer-ios.js, 7 uses). The rest are Fluent 2 dark tokens.
 */
[data-theme="dark"] {
  --surface: #1e1e1e;                 /* cardRenderer-ios.js background-color */
  --surface-sunken: #292929;          /* Fluent 2 colorNeutralBackground2 (dark) */
  --surface-raised: #292929;
  --hairline: #3d3d3d;
  --hairline-strong: #616161;

  --text: #ffffff;
  --text-muted: #c7c7c7;
  --text-subtle: #a0a0a0;

  --header-bg: #115ea3;               /* Fluent 2 brandBackground1 (dark) */
  --brand: #2899f5;                   /* dark link/accent used in cardRenderer-ios.js */
  --brand-pressed: #4f9fe0;
  --brand-ink: #c7e0f4;

  --seg-track: rgba(255, 255, 255, .14);
  --seg-active: #ffffff;
  --seg-active-text: #115ea3;
  --pill-track: rgba(0, 0, 0, .35);

  --ring-focus: 0 0 0 2px #0f6cbd;
  --shadow-row: 0 1.9px 4.5px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --surface: #1e1e1e;
    --surface-sunken: #292929;
    --surface-raised: #292929;
    --hairline: #3d3d3d;
    --hairline-strong: #616161;
    --text: #ffffff;
    --text-muted: #c7c7c7;
    --text-subtle: #a0a0a0;
    --header-bg: #115ea3;
    --brand: #2899f5;
    --brand-pressed: #4f9fe0;
    --brand-ink: #c7e0f4;
    --seg-track: rgba(255, 255, 255, .14);
    --seg-active: #ffffff;
    --seg-active-text: #115ea3;
    --pill-track: rgba(0, 0, 0, .35);
    --ring-focus: 0 0 0 2px #0f6cbd;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-sheet: 1ms;
  }
}