/* Coroom brand tokens, v1 (2026-10-28). Source of truth for apps/web styling.
   Authored light; dark is a derived theme (each participant color lifted one step).
   Rule: the brand has no accent of its own. The participants are the color. */

:root {
  /* surfaces and ink, light */
  --c-paper: #f7f6f1;      /* page background */
  --c-surface: #ffffff;    /* documents, cards, sheets */
  --c-panel: #efede7;      /* rails, hints, the approval bar */
  --c-ink: #1b1b19;        /* text, the mark, primary buttons */
  --c-muted: #6b6860;      /* secondary text, eyebrows, timestamps */
  --c-line: #e0ddd4;       /* hairlines between regions */
  --c-rule: #cfccc2;       /* borders on controls */

  /* participant colors (identity only, never semantic). Contrast of text on a solid plate, light theme:
     coral-plate with white 4.7, moss with white 4.9, marigold with ink 7.9, plum with white 6.4, sea with white 4.7. All AA at 13 px bold. */
  --coral: #e2654b;
  --moss: #4f7a5b;
  --marigold: #e0a52a;
  --plum: #7a4e8c;
  --sea: #2e7f86;
  --on-coral: #ffffff;     /* white, Dio's call 2026-10-29; the solid plate fill is --coral-plate so the pair passes AA */
  --on-moss: #ffffff;
  --on-marigold: #1b1b19;
  --on-plum: #ffffff;
  --on-sea: #ffffff;
  --coral-plate: #c94a31;  /* fill of a solid coral plate behind white text, 4.7:1; coral itself stays #e2654b for tints, underlines, cursors, swatches */

  /* agent plate derivation: tint of the person's color over the surface, text deepened toward ink */
  --tint: 16%;
  --deep: 70%;
  --deep-marigold: 52%;

  /* type */
  --disp: "Fraunces", Georgia, "Times New Roman", serif;   /* headlines, document titles, the wordmark; opsz 144 for heroes, 24 to 72 in product */
  --body: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* links and codes only */

  /* shape and depth */
  --r-control: 10px;       /* inputs, small cards */
  --r-sheet: 14px;         /* documents, cards, the admission card */
  --r-plate: 999px;        /* plates, buttons */
  --r-avatar-agent: 0.26em; /* the agent's square, relative to plate font size */
  --shadow: 0 10px 36px rgba(27, 27, 25, .10), 0 1px 2px rgba(27, 27, 25, .08);

  /* plate sizes (font-size drives the whole plate) */
  --plate-lg: 16px;
  --plate: 13px;
  --plate-sm: 11.5px;
}

/* dark theme: product toggle, never the brand default */
[data-theme="dark"] {
  --c-paper: #1a1917;
  --c-surface: #23221f;
  --c-panel: #1e1d1b;
  --c-ink: #f0eee8;
  --c-muted: #a39f95;
  --c-line: #34322d;
  --c-rule: #45423c;

  --coral: #ef8468;
  --moss: #7fad8a;
  --marigold: #eebb4d;
  --plum: #ae86c0;
  --sea: #5fb3b9;
  --on-coral: #1a1917;
  --on-moss: #1a1917;
  --on-marigold: #1a1917;
  --on-plum: #1a1917;
  --on-sea: #1a1917;
  --coral-plate: var(--coral);   /* lifted coral with dark ink is 6.8:1, no deeper fill needed */

  --tint: 20%;
  --deep: 100%;            /* in dark, agent plate text is the lifted color itself */
  --deep-marigold: 100%;
  --shadow: 0 10px 36px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* participant color classes: set --pc (the color) and --po (text on it) */
.c-coral { --pc: var(--coral); --po: var(--on-coral); --pf: var(--coral-plate); }
.c-moss { --pc: var(--moss); --po: var(--on-moss); }
.c-marigold { --pc: var(--marigold); --po: var(--on-marigold); --deep: var(--deep-marigold); }
.c-plum { --pc: var(--plum); --po: var(--on-plum); }
.c-sea { --pc: var(--sea); --po: var(--on-sea); }

/* the plate: one component for every participant */
.pl {
  display: inline-flex; align-items: center; gap: .5em;
  height: 2.05em; padding: 0 .85em 0 .32em; border-radius: var(--r-plate);
  font-family: var(--body); font-size: var(--plate); font-weight: 600; line-height: 1; white-space: nowrap;
  background: var(--pf, var(--pc)); color: var(--po); vertical-align: middle;   /* --pf: a deeper fill for solid plates when the color needs it */
}
.pl i {
  width: 1.42em; height: 1.42em; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: .8em; font-weight: 700; background: var(--po); color: var(--pc); flex: none;
}
.pl.ag {                                     /* an agent: tinted plate, square avatar with the host's icon */
  background: color-mix(in srgb, var(--pc) var(--tint), var(--c-surface));
  color: color-mix(in srgb, var(--pc) var(--deep), var(--c-ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 28%, transparent);
}
.pl.ag i { background: var(--pc); color: var(--po); border-radius: var(--r-avatar-agent); }
.pl i svg { width: 66%; height: 66%; fill: currentColor; display: block; }
.pl.lg { font-size: var(--plate-lg); }
.pl.sm { font-size: var(--plate-sm); height: 1.95em; }
.pl.grp em { font-style: normal; font-weight: 500; margin-left: .1em; opacity: .85; }   /* attendance: "Maya +1 agent" */

/* bare avatars for presence rows */
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--pf, var(--pc)); color: var(--po); box-shadow: 0 0 0 2px var(--c-surface); }
.av.ag { border-radius: 7px; }
.av svg { width: 66%; height: 66%; fill: currentColor; display: block; }

/* cursor flag: the plate hangs below the caret, in the participant's color */
.mark { display: inline-block; width: 2px; height: 1.15em; vertical-align: -.2em; background: var(--pc); position: relative; margin: 0 1px; }
.mark .pl { position: absolute; left: -1px; top: calc(100% + 3px); height: 1.7em; font-size: 11px; padding-right: .7em; border-radius: 2px 7px 7px 7px; }

/* suggestions (tracked changes) */
.ins { text-decoration: underline; text-decoration-color: var(--pc, var(--moss)); text-decoration-thickness: 2px; text-underline-offset: 3px; background: color-mix(in srgb, var(--pc, var(--moss)) 14%, transparent); border-radius: 2px; }
.del { text-decoration: line-through; text-decoration-color: var(--pc, var(--moss)); color: var(--c-muted); }

/* buttons */
.btn { font: inherit; font-weight: 600; font-size: 14px; border-radius: var(--r-plate); padding: 10px 18px; border: 1px solid var(--c-rule); background: var(--c-surface); color: var(--c-ink); line-height: 1.2; }
.btn.ink { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.btn.sm { font-size: 13px; padding: 7px 13px; }
.btn.lg { font-size: 16px; padding: 13px 24px; }

/* the approval request: neutral surface, ink rule; never a participant's color as a background */
.askbar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--c-line); background: var(--c-panel); box-shadow: inset 3px 0 0 var(--c-ink); }

.eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.h-disp { font-family: var(--disp); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 144; }