/* COCO Matrix home and research pages: light by default, dark on request. Brand values from brand/tokens.css;
   OPPO Sans 4.0 is not bundled, so pages render in the guide's fallback (Helvetica Neue / Arial). */
:root {
  --ground: #ffffff; --surface: #f3f6f9; --ink: var(--coco-black); --muted: #4f5358; --chip: #eef3f7;
  --accent: var(--coco-black); --accent-ink: #ffffff;
  /* the matrix: data, hardware, models, people; on white the guide's yellow-green and pink are deepened so they read */
  --k0: #92CEFF; --k1: #131415; --k2: #C3CF6E; --k3: #EE9BE8; --link: rgba(19, 20, 21, 0.16);
  --m: 32px; --g: 24px;
  /* seven sizes: small, body, lead, sub, head, display, mega */
  --s-small: 14px; --s-body: 17px; --s-lead: clamp(19px, 1.55vw, 22px); --s-sub: clamp(30px, 3.4vw, 50px); --s-head: clamp(36px, 4.2vw, 64px); --s-display: clamp(44px, 6.2vw, 100px); --s-mega: clamp(64px, 11vw, 176px);
  /* about: the belief statement (36px at most, so it stays a statement) and the four ways the robot learns */
  --s-state: clamp(24px, 2.5vw, 36px); --s-point: clamp(24px, 2.1vw, 30px);
  /* about: the brand's rounded colour field, brand blue as the guide's large-block colour (p. 18) */
  --field: var(--coco-blue); --field-ink: var(--coco-black); --field-state: var(--coco-black);
}
[data-theme="dark"] {
  --ground: var(--coco-black); --surface: #1c1e20; --ink: #eceef0; --muted: #a9aeb4; --chip: #26292c;
  --accent: var(--coco-blue); --accent-ink: var(--coco-black);
  --k0: #92CEFF; --k1: #eceef0; --k2: #EDF2C2; --k3: #FCDBFA; --link: rgba(236, 238, 240, 0.14);
  /* dark: a deep step of the brand blue, with the statement in brand blue as on the guide's dark pages (p. 23) */
  --field: #1f2c37; --field-ink: #eceef0; --field-state: var(--coco-blue);
}
body { background: var(--ground); color: var(--ink); font-size: var(--s-body); transition: background-color 300ms ease, color 300ms ease; }
::selection { background: var(--coco-blue); color: var(--coco-black); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-inline: var(--m); }
.muted { color: var(--muted); }
.small { font-size: var(--s-small); line-height: 1.45; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-size: var(--s-small); font-weight: 500; transition: transform var(--t-press) var(--ease-out), opacity var(--t-hover); }
.btn:hover { opacity: 0.88; }
.btn:active { transform: scale(0.97); }
.btn i, .go i { font-style: normal; display: inline-block; transition: transform 300ms var(--ease-out); }
a:hover .btn i, .btn:hover i, a:hover .go i { transform: translateX(4px); }
.link { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }

/* ---------- navigation ---------- */
.nav { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 24px var(--m); font-size: var(--s-small); }
.nav .left { display: flex; align-items: center; gap: 36px; }
.nav img { height: 24px; width: auto; display: block; }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav ul a { color: inherit; text-decoration: none; }
.nav ul a:hover, .nav ul a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }
.nav .right { display: flex; align-items: center; gap: 12px; }
.theme { display: inline-flex; padding: 3px; gap: 2px; background: var(--chip); border-radius: 999px; }
.theme button { min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background-color var(--t-hover), color var(--t-hover), transform var(--t-press) var(--ease-out); }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.theme button:active { transform: scale(0.96); }

/* ---------- footer: contact, on every page ---------- */
.foot { padding: 160px var(--m) 32px; }
.foot .talk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; margin-bottom: 40px; }
.foot h2 { grid-column: 1 / 6; font-size: var(--s-head); line-height: 1; letter-spacing: -0.035em; font-weight: 500; }
.foot .mail { display: block; font-size: var(--s-display); line-height: 1; letter-spacing: -0.045em; font-weight: 500; color: var(--ink); text-decoration: none; padding-block: 8px 48px; white-space: nowrap; transition: color var(--t-hover); }
.foot .mail:hover { color: #3d9be9; }
.foot .base { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: baseline; padding-top: 28px; font-size: var(--s-small); color: var(--muted); }
.foot .base nav { display: flex; gap: 24px; }
.foot .base nav a { color: var(--ink); text-decoration: none; }
.foot .base nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.foot .base .r { text-align: right; }
.foot .base .r a { color: var(--muted); }
.foot .base .cos { color: var(--ink); }

@media (max-width: 760px) {
  :root { --m: 20px; --g: 14px; }
  .nav { padding: 18px var(--m); }
  .nav ul, .nav .right .btn { display: none; }
  .theme button { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .foot { padding-top: 112px; }
  .foot .talk { display: block; }
  .foot .mail { font-size: 11.4vw; white-space: normal; padding-bottom: 36px; }
  .foot .base { grid-template-columns: 1fr; gap: 12px; }
  .foot .base .r { text-align: left; }
}