/* Design tokens: colours, type, spacing, radius; light by default, dark by prefers-color-scheme.
   The values are the ones measured on iCloud.com (iCloud.com);
   where a spec and the measurements differ, the measurements win. Plus the few rules every page
   needs (reset, icons, focus ring). */

:root {
  color-scheme: light dark;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-size: 14px;
  --text-small: 12px;
  --text-row: 15px;
  --text-large: 17px;
  --text-title: 21px;
  --line: 1.4;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 12px;

  --topbar-height: 44px;
  --row-height: 32px;
  --sidebar-width: 229px;
  --list-width: 380px;

  /* Accent blue, the five app accents and the colour of destructive actions. */
  --accent-blue: #0071e3;
  --accent: #0071e3;
  --accent-text: #fff;
  --app-mail: var(--accent-blue);
  --app-calendar: #e30000;
  --app-contacts: var(--accent-blue);
  --app-reminders: #ff9500;
  --app-notes: #e5b000;
  --danger: #d70015;

  /* Surfaces. */
  --bg-topbar: #f2f2f7;
  --border-topbar: #e5e5ea;
  --bg-content: #fff;
  --bg-sidebar: #fbfbfd;
  --border-sidebar: #d1d1d6;
  --bg-raised: #fff;
  --bg-hover: rgba(120, 120, 128, 0.08);
  --bg-selected: rgba(120, 120, 128, 0.12);
  --select-fill: #0071e3; /* a selected list card (Mail, Contacts) */
  --select-text: #fff;
  --bg-search: rgba(120, 120, 128, 0.08);
  --bg-track: rgba(120, 120, 128, 0.12); /* segmented control */
  --bg-segment: #fff;
  --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.04);

  /* Text and lines. */
  --text: rgba(0, 0, 0, 0.88);
  --text-secondary: rgba(0, 0, 0, 0.56);
  --text-tertiary: rgba(0, 0, 0, 0.38);
  --separator: rgba(0, 0, 0, 0.1);
  --backdrop: rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);

  /* Calendar colours: the seven of iCloud's picker. */
  --cal-red: rgb(255, 45, 85);
  --cal-orange: rgb(255, 149, 0);
  --cal-yellow: rgb(255, 204, 0);
  --cal-green: rgb(101, 219, 57);
  --cal-blue: rgb(52, 170, 220);
  --cal-purple: rgb(204, 115, 225);
  --cal-brown: rgb(162, 132, 94);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-blue: #009aff;
    --accent: #009aff;
    --app-calendar: #ff453a;
    --app-reminders: #ff9f0a;
    --danger: #ff453a;

    --bg-topbar: #323236;
    --border-topbar: #343436;
    --bg-content: #1c1c1e;
    --bg-sidebar: #1c1c1e;
    --border-sidebar: #343436;
    --bg-raised: #2c2c2e;
    --bg-hover: rgba(116, 116, 128, 0.16);
    --bg-selected: rgba(116, 116, 128, 0.25);
    --select-fill: #009aff;
    --bg-search: rgba(116, 116, 128, 0.24);
    --bg-track: rgba(116, 116, 128, 0.24);
    --bg-segment: #636366;
    --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.4);

    --text: rgba(255, 255, 255, 0.98);
    --text-secondary: rgba(255, 255, 255, 0.66);
    --text-tertiary: rgba(255, 255, 255, 0.42);
    --separator: rgba(255, 255, 255, 0.15);
    --backdrop: rgba(0, 0, 0, 0.6);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
}

/* The app a page belongs to sets the accent and its pane widths (iCloud.com's, measured). */
body.app-mail { --accent: var(--app-mail); --sidebar-width: 229px; --list-width: 380px; }
body.app-calendar { --accent: var(--app-calendar); --sidebar-width: 249px; --border-sidebar: #f2f2f7; }
body.app-contacts { --accent: var(--app-contacts); --sidebar-width: 249px; --list-width: 380px; --select-fill: #005dba; }
body.app-reminders { --accent: var(--app-reminders); --sidebar-width: 280px; }
body.app-notes { --accent: var(--app-notes); --sidebar-width: 260px; --list-width: 320px; }

/* Dark exceptions to those per-app values. */
@media (prefers-color-scheme: dark) {
  body.app-calendar { --border-sidebar: #343436; }
  body.app-contacts { --select-fill: #009aff; }
  body.app-notes { --bg-sidebar: #202023; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--text-size) / var(--line) var(--font);
  color: var(--text);
  background: var(--bg-content);
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}
.skip-link:focus { top: var(--space-2); }

/* Icons come from one sprite whose symbols carry no paint of their own. */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-small { width: 1em; height: 1em; }
.icon-large { width: 1.6em; height: 1.6em; }