/* Design tokens — the only place a colour, radius, shadow, or font lives.
   Source of truth: the UI redesign foundation's HANDOFF.md, turns 8-9
   ("barless" layout, option 7a styling). Nothing outside this file may
   write a colour literal; docs/guides/web.md carries the rule.

   The fonts are self-hosted rather than fetched from Google: a product
   that reads people's mail should not announce every page view to a
   third party. Latin and latin-ext subsets only, variable weight axes
   intact. Re-fetch with the recipe in docs/guides/web.md. */

@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-italic-latin-ext.84155afd2a46.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-italic-latin.6989d9a11b73.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: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-normal-latin-ext.8811e895c448.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-normal-latin.392aed3eb142.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: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-italic-latin-ext.7b015a32d363.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-italic-latin.bf88700c66c9.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("../fonts/lora-normal-latin-ext.d551ed729291.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-normal-latin.662c56ecd8de.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 {
  /* ---------- palette ---------- */
  --ground: #F7F8FB;          /* the page behind everything */
  --card: #FFFFFF;            /* draft card, rail, settings panels */
  --card-raised: #FDFDFE;     /* secondary buttons, inputs */
  --wash: #EDF1F7;            /* inbound card, segmented-tab track */
  --wash-head: #FBFCFE;

  --ink: #1B2A4A;             /* navy — headings, sender names, subjects */
  --ink-body: #1F2942;        /* body copy */
  --ink-2: #49536A;
  --ink-3: #5A6579;
  --mut: #94A0B4;             /* meta, captions, timestamps */
  --on-blue: #FFFFFF;

  --line: #E3E8F0;            /* hairline */
  --line-input: #D6DDE9;      /* input and secondary-button border */
  --line-dashed: #C4CDDC;     /* honest cards — never a fake draft */
  --edge-secondary: #E7EBF2;  /* the 2px drop under a secondary button */

  --blue: #2F5AA8;            /* selection, provenance, primary action */
  --blue-wash: #EDF3FB;
  --blue-line: #C9D8EE;
  --blue-btn-line: #274B8E;
  --blue-btn-edge: #1F3D75;

  --maroon: #6E1F32;          /* badges and destructive TEXT only */
  --maroon-2: #7D2136;
  --maroon-wash: #F6E4E8;
  --maroon-line: #E7C3CC;
  --maroon-card: #FDF6F7;

  --green: #3B9E5F;           /* the ambient sync dot */
  --green-text: #2E6B45;
  --green-wash: #E2F1E6;

  /* Provider brands. Literals live here like every other colour. */
  --brand-gmail: #D44638;
  --brand-gmail-line: #B73A2D;
  --brand-gmail-edge: #96261B;
  --brand-outlook: #0A6CFF;
  --brand-outlook-line: #0858D6;
  --brand-outlook-edge: #0648AB;

  /* ---------- type ---------- */
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Lora', Georgia, serif;  /* sender names, subjects, section headers */
  --text-body: 14px;
  --text-body-lg: 15px;
  --text-meta: 12.5px;
  --text-meta-sm: 12px;
  --text-title: 16px;

  /* ---------- radii ---------- */
  --radius-rail-card: 14px;
  --radius-card: 16px;
  --radius-input: 14px;
  --radius-button: 12px;
  --radius-tile: 10px;        /* the menu tile */
  --radius-pill: 999px;

  /* ---------- edges and shadows ---------- */
  --edge-raised: 0 2px 0 var(--blue-btn-edge);
  --edge-raised-secondary: 0 2px 0 var(--edge-secondary);
  --edge-segment: 0 1.5px 0 var(--line-input);
  --shadow-inset-input: inset 0 1px 3px rgba(27, 42, 74, 0.05);
  --shadow-sheet: 0 6px 20px rgba(27, 42, 74, 0.10);   /* the ☰ menu sheet */

  /* ---------- layout ---------- */
  --rail-width: 340px;
  --column-width: 760px;
  --column-width-wide: 880px;  /* the Operator console's table (§1) */

  /* The view-as banner spans the top of the app and is the one dark
     surface in the product — an operator reading somebody else's mail
     should not be able to mistake it for a notice. */
  --banner-dark: #1B2A4A;
  --on-banner-dark: #EEF2F8;
  --stack-breakpoint: 900px;  /* mirrored in the media query below */
  --tap-target: 44px;         /* the small-screen floor for any control */
}