/* Design tokens — the single source of truth for the look.
   Every colour, size, gap and shadow in the app comes from here.
   Nothing downstream is allowed to hand-type a value. */

:root{
  /* ---- Colour ------------------------------------------------------ */
  /* The page behind the framed panel. Dark, so the cream panel glows. */
  --page:        #1A1A1C;
  --page-ink:    #E6E3DA;
  --page-ink-dim:#9C9A92;

  /* The panel itself. */
  --ground:      #FBF7EC;   /* cream paper */
  --card:        #FFFFFF;   /* a raised row or pill */
  --card-quiet:  rgba(255,255,255,.5); /* an unmarked row */

  --ink:         #1C2320;   /* primary text */
  --ink-soft:    #656E67;   /* secondary text — deepened to 4.95:1 on the cream ground; #7C857E measured 3.56:1 and failed AA */
  --ink-quiet:   #55605A;   /* primary text on an unmarked row */

  --green:       #0D4A32;
  --green-pale:  #EEF4F0;
  --green-deep:  linear-gradient(160deg,#155C3E,#0B3F2A);
  --green-tick:  #14653F;

  --gold:        #86641C;   /* flat gold, for text — deepened to 5.14:1 on the cream ground; #9A7524 measured 3.96:1 and failed AA */
  --gold-line:   rgba(160,138,86,.26); /* the hairline on every row */
  --gold-sheen:  linear-gradient(140deg,#F0DDAA 0%,#D8B865 18%,#B28F35 46%,
                                 #E6CE90 62%,#C09A3F 82%,#EBD7A4 100%);
  --grey-line:   #D5CDB8;   /* empty status ring */
  --grey-mark:   #B3AB95;   /* absent cross */

  /* ---- Type -------------------------------------------------------- */
  --font-display: "Marcellus", ui-serif, Georgia, serif;
  --font-ui:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   11.5px;  /* uppercase micro label */
  --text-sm:   12.5px;  /* row subtitle */
  --text-base: 13px;    /* date line */
  --text-md:   14px;    /* number inside a circle */
  --text-lg:   17.5px;  /* button face */
  --text-xl:   19px;    /* student name */
  --text-2xl:  32px;    /* group name */

  --track-wide: .32em;  /* the spaced-out micro label */
  --track-mid:  .16em;
  --track-tight:.035em;

  /* ---- Space ------------------------------------------------------- */
  --s1: 4px;   --s2: 7px;   --s3: 9px;   --s4: 11px;  --s5: 13px;
  --s6: 15px;  --s7: 18px;  --s8: 26px;  --s9: 40px;

  /* ---- Shape ------------------------------------------------------- */
  --r-sm:   17px;   /* a student row */
  --r-md:   20px;   /* the footer count pill */
  --r-lg:   28px;   /* the main button */
  --r-panel:30px;   /* the framed panel */
  --r-full: 50%;

  /* ---- Depth ------------------------------------------------------- */
  --lift-soft:   0 1px 2px rgba(90,75,35,.10), 0 3px 9px rgba(90,75,35,.07);
  --lift-quiet:  0 1px 2px rgba(90,75,35,.08), 0 5px 16px rgba(90,75,35,.08);
  --lift-green:  0 2px 5px rgba(11,63,42,.32), 0 7px 18px rgba(11,63,42,.20);
  --lift-button: 0 2px 4px rgba(9,52,35,.26), 0 10px 26px rgba(9,52,35,.22),
                 inset 0 1px 0 rgba(255,255,255,.12);
  --lift-panel:  0 2px 8px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.55);
  --edge-row:    inset 0 0 0 1px var(--gold-line);

  /* ---- Layout ------------------------------------------------------ */
  --frame-w:   390px; /* panel width on a phone: edge to edge */
  --rail-w:    300px; /* the Groups column on a wide screen */
  --shell-w:  1200px; /* the framed column stops growing here */
  --line-out:  11px;  /* outer gold line, fixed distance from the edge */
  --line-in:   23px;  /* inner gold line, fixed distance from the edge */
  --arch-h:   209px;  /* outer arch height; overridden on a laptop */
  --gutter:    var(--s9); /* space inside the frame, left and right */
  --arch-clear:118px; /* headroom the arch needs before text starts */
  --tap-min:  48px;   /* nothing you touch may be smaller */
  /* Desktop starts at 900px. A media query cannot read a token,
     so 900px is typed literally in base.css — change both together. */
}