/* Cranwood Design System — all tokens in one file */

/* Lora — the only typeface. Variable weights 400–700 + italics, bundled locally from Google Fonts under OFL. */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/lora-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/lora-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The blue scale — the brand IS this scale */
  --blue-navy: #2C3A66;
  --blue-cornflower: #5B79CC; /* the constant; the dot is always this or cream */
  --blue-sky: #90A7E4; /* Thomas approved lighter Sky, October 2. */
  --blue-mist: #C3CFF0;
  --blue-ice: #EDF1FB;

  /* Neutrals — warm, never pure white or black */
  --cream: #FDFCF8;
  --ink: #262B38;
  --gray: #9A9CA4;
  --gray-disabled: #D5D6DC;
  --hairline: #E8E5DC;

  /* Green garnish — tiny doses only (a pill, a status dot) */
  --mint: #DFF3E4;
  --green: #2AA35A;
  --green-deep: #1F5B34;

  /* Semantic aliases */
  --surface-page: var(--cream);
  --surface-tint: var(--blue-ice);
  --surface-inverse: var(--blue-navy);
  --text-heading: var(--blue-navy);
  --text-body: var(--ink);
  --text-caption: var(--gray);
  --text-on-blue: var(--cream);
  --text-muted-on-navy: var(--blue-mist);
  --accent: var(--blue-cornflower);
  --accent-strong: var(--blue-navy);
  --border-input: var(--blue-mist);
  --border-card: rgba(0, 0, 0, 0.07);
  --status-good-bg: var(--mint);
  --status-good-fg: var(--green-deep);
  --status-good-dot: var(--green);
}

:root {
  --font-serif: "Lora", Georgia, serif; /* everything is Lora */

  --text-display-size: 44px;   /* Lora 500, line-height 1.15 */
  --text-title-size: 24px;     /* Lora 500, line-height 1.25 */
  --text-heading-size: 18px;   /* Lora 600, line-height 1.3 */
  --text-body-size: 14px;      /* Lora 400, line-height 1.6 */
  --text-body-lg-size: 16px;   /* long-form body, line-height 1.7 */
  --text-caption-size: 12px;   /* often italic, gray or sky */
  --text-label-size: 11px;     /* uppercase, letterspaced */

  --leading-display: 1.15;
  --leading-title: 1.25;
  --leading-body: 1.6;
  --tracking-label: 0.18em;    /* uppercase labels */
}

body {
  font-family: var(--font-serif);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }
::selection { background: var(--accent); color: var(--cream); }

:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;

  /* Radii */
  --radius-control: 6px;   /* buttons, inputs, calendar chips */
  --radius-card: 8px;      /* desktop cards, slides */
  --radius-soft: 16px;     /* mobile cards */
  --radius-tile: 32px;     /* app tiles / coin tile */
  --radius-pill: 99px;

  /* Shadow — one quiet elevation only */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
}