/* Family App — the locked design system.
 *
 * Every value here is specified in Family-app.md §2 and is NOT a free choice.
 * Screens 01 and 02 of docs/family-app-mockup.html are locked; these tokens are
 * what makes the shipped app match them.
 *
 * DES-1: the background is white. There is deliberately no dark-mode block and
 * no [data-theme] block in this file. Do not add one. A dark client will
 * otherwise win, and Harold has asked for white four times.
 */

:root {
  /* Surfaces — white, in all three, deliberately. */
  --paper: #FFFFFF;
  --canvas: #FFFFFF;
  --raised: #FFFFFF;

  /* Text */
  --ink: #262124;          /* warmed toward the rose, never pure black */
  --muted: #777074;
  --hair: #E8E8E8;

  /* DES-3: pink acts, rose holds. Two depths of one hue. */
  --pink: #E45E99;         /* DES-2: sampled from the pink of her party mask */
  --pink-lo: #FDF0F6;
  --rose: #A83E5F;
  --rose-lo: #FCF1F4;
  --rose-ink: #FFFFFF;

  /* Silver — the second half of the palette */
  --silver-1: #D9DDE1;
  --silver-2: #F6F8F9;
  --silver-3: #A5ADB5;

  /* The wordmark's second colour. #A83E5F rearranged — a counterpart to the
     rose, not a blue chosen at random. 5.2:1 on white. */
  --blue: #3E6FA8;

  /* Semantic, kept separate from the accent */
  --green: #2E6B4F;
  --green-lo: #EEF6F1;
  --slate: #7C8FA6;

  --shadow: 0 18px 40px -24px rgba(40, 30, 36, .22),
            0 1px 3px -1px rgba(40, 30, 36, .07);
  --shadow-sm: 0 6px 18px -12px rgba(40, 30, 36, .28);

  /* DES-4: the serif is rationed — at most twice per screen. */
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  /* Type scale, in rem.
     rem — not px — is what makes the app obey the phone's own text-size
     setting, which people Jean's daughters' age have usually already turned up.
     --scale (see src/js/prefs.js) multiplies on top of that for the case where
     the phone is fine everywhere else but this app still wants to be bigger.
     Sizes below are the rem equivalents of the px values they replaced. */
  --scale: 1;
  --t-xs: calc(0.75rem   * var(--scale));   /* was 12px    */
  --t-sm: calc(0.844rem  * var(--scale));   /* was 13.5px  */
  --t-base: calc(0.938rem * var(--scale));  /* was 15px    */
  --t-md: calc(1.031rem  * var(--scale));   /* was 16.5px  */
  --t-lg: calc(1.313rem  * var(--scale));   /* was 21px    */
  --t-xl: calc(1.563rem  * var(--scale));   /* was 25px    */
  --t-display: calc(2.875rem * var(--scale)); /* was 46px  */

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 44px;

  --radius: 16px;
  --radius-lg: 26px;

  /* DES-11: the disc is 128px on every device. Deliberately NOT scaled —
     shrinking the button because someone asked for bigger text would be
     exactly backwards, and growing it past the thumb helps nobody. */
  --disc: 128px;

  /* DES-10: one column on a phone, two on a tablet, three on a laptop. */
  --app-max: 660px;
  --wide-max: 1080px;
}

/* DES-5 — the silver edge. The single device that ties every screen together.
 * Applied as a 2px gradient border around white paper. */
.silver-edge {
  padding: 2px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--silver-3), var(--silver-2) 30%,
              var(--silver-1) 55%, var(--silver-3) 78%, var(--silver-2));
  box-shadow: var(--shadow);
}

.silver-edge > * {
  background: var(--paper);
  border-radius: calc(var(--radius-lg) - 2px);
}