/* Shiftmere identity tokens. The one source every surface reads.
   Page, film, email and one-pagers take colour, type and the UI moment from here.
   Faces: Geist (display, UI, every figure, tabular) and Source Serif 4 (text, and the italic second voice).
   Web: load from Google Fonts. Press: both faces are installed on the press and resolve by name. */

:root {
  /* Palette */
  --sm-ink:        #13213A; /* Ledger Ink. The primary. Type, the mark, dark grounds. */
  --sm-night:      #0C1628; /* Night Ledger. Deepest ground, film backgrounds. */
  --sm-slate:      #4E5868; /* Slate. Secondary text on paper (about 6.3:1 on Paper). */
  --sm-paper:      #F5F0E7; /* Payroll Paper. The warm neutral ground. */
  --sm-sheet:      #FBF8F2; /* Sheet. Cards and UI surfaces on Paper. */
  --sm-rule:       #DED5C4; /* Ruling. Hairlines, grid lines, table rules. */
  --sm-shift:      #DCE3EE; /* Shift Blue. A scheduled shift block. */
  --sm-shift-line: #9DAECA; /* Shift Edge. The block's left edge and borders. */
  --sm-premium:    #C8461B; /* Premium. THE accent. Only where money is decided: overtime flag, premium owed. */
  --sm-premium-ink:#9E3510; /* Premium text on light grounds (about 5.6:1 on Premium Tint). */
  --sm-premium-tint:#F8E1D4;/* Premium Tint. The flagged cell's ground. */

  /* Type */
  --sm-display: "Geist", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --sm-text:    "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sm-figures: "tnum" 1, "lnum" 1;   /* every number aligns */

  /* Type scale (rem, 16px root). Phone first; desktop steps up in the page. */
  --sm-step--1: 0.8125rem;  /* 13 meta, labels, uppercase tracked */
  --sm-step-0:  1.0625rem;  /* 17 body serif */
  --sm-step-1:  1.25rem;    /* 20 lead */
  --sm-step-2:  1.625rem;   /* 26 section heads */
  --sm-step-3:  2.25rem;    /* 36 hero phone */
  --sm-step-4:  3.5rem;     /* 56 hero desktop */
  --sm-step-5:  4.5rem;     /* 72 the big number */

  /* Shape */
  --sm-radius:   10px;      /* = the symbol's block corner at UI scale */
  --sm-radius-s: 4px;       /* = the symbol's line corner */
  --sm-space:    8px;       /* base unit */
}

/* The shared UI moment: one schedule cell, before publish.
   <div class="sm-cell sm-cell--flag"><span class="sm-cell__who">Ana · Line cook</span>
   <span class="sm-cell__time">Sat 4–10 pm</span>
   <span class="sm-cell__flag">+4h OT · $90.00</span></div> */
.sm-cell {
  font-family: var(--sm-display);
  font-feature-settings: var(--sm-figures);
  background: var(--sm-shift);
  border-left: 3px solid var(--sm-shift-line);
  border-radius: var(--sm-radius-s);
  color: var(--sm-ink);
  padding: 6px 8px;
  display: grid; gap: 2px;
  font-size: 12px; line-height: 1.25;
}
.sm-cell__who  { font-weight: 600; }
.sm-cell__time { color: var(--sm-slate); }
.sm-cell--flag { background: var(--sm-premium-tint); border-left-color: var(--sm-premium); }
.sm-cell__flag {
  justify-self: start;
  background: var(--sm-premium); color: #fff;
  font-weight: 600; letter-spacing: 0.01em;
  border-radius: 3px; padding: 2px 6px; margin-top: 2px;
  white-space: nowrap;
}