/* Gmail design tokens (web, Material 3 Gmail, 2022-2026). Study copy for our team, not for shipping.
   Gmail's brand, icons, fonts' names and product belong to Google.

   Where each value comes from (said on every line):
   - real      = copied from Google's own public CSS: Gmail's own stylesheet (Wayback capture of mail.google.com/_/scs/mail-static, 22 Sep 2024)
                 or Google's GM3 system tokens (accounts.google.com public sign-in page CSS, same values Gmail uses as fallbacks).
   - measured  = read from pixels of Google's own screenshots (blog.google 2022 launch PNG at 2x, Mailmeteor light/dark pair Jan 2026,
                 Workspace Updates 2026 GIF frames). See inspiration/gmail/NOTES.md for the box and line used.
   - estimated = our best guess (M3 baseline, or no picture exists). Labelled so nobody copies it as fact.

   Themes:
   - :root, .gm-light        Gmail's Default (light) theme.
   - .gm-dark, html.gm-dark  Gmail's Dark theme. This is Gmail's own NEUTRAL GREY dark theme (measured from two real dark screenshots,
                             9to5Google Jul 2022 and Mailmeteor Jan 2026), not the blue-tinted GM3 dark scheme. Parts that no dark picture shows
                             (compose window, thread, dialogs, quick settings) use GM3 dark tokens and are marked "estimated". */

/* ---------- fonts (all openly licensed; see fonts/) ---------- */
@font-face { font-family: "Google Sans"; src: url("fonts/GoogleSans-normal-400-700-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Google Sans"; src: url("fonts/GoogleSans-italic-400-700-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Google Sans Flex"; src: url("fonts/GoogleSansFlex-normal-1-1000-latin.woff2") format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-normal-100-900-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/Roboto-italic-100-900-latin.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* ---------- static tokens (same in light and dark) ---------- */
:root {
  /* type: Gmail's font stacks (real, Gmail CSS). "Google Sans Text" is not openly licensed, so Google Sans stands in for it (estimated). */
  --gm-font: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;                 /* real: 358 rules in Gmail CSS */
  --gm-font-text: "Google Sans Text", "Google Sans", Roboto, Arial, sans-serif;                 /* real stack; Google Sans Text itself not shipped */
  --gm-font-roboto: Roboto, Arial, sans-serif;                                                  /* real: message bodies, older dialogs */
  --gm-type-title-l: 400 22px/28px var(--gm-font);    /* thread subject (measured 22px, T3) */
  --gm-type-title-m: 500 16px/24px var(--gm-font);    /* "Labels" heading, dialog titles (measured 16px) */
  --gm-type-body-l: 400 14px/20px var(--gm-font);     /* rows, nav, body (real: .yW font-size .875rem; line-height 20px) */
  --gm-type-body-m: 400 12px/16px var(--gm-font);     /* chips, tooltips, dates in compact UI (real: .aOe .75rem/16px) */
  --gm-type-label-l: 500 14px/20px var(--gm-font);    /* Compose, buttons, tabs (measured weight 500) */
  --gm-type-label-s: 500 12px/16px var(--gm-font);    /* rail labels (measured 12px, T1) */
  --gm-weight-unread: 700;                            /* real: .zF,.bqe { font-weight:700 } */

  /* shape (real where noted, else M3 baseline = estimated) */
  --gm-radius-xs: 4px;     /* tooltip, snackbar (real: gm3 tooltip shape 4px) */
  --gm-radius-s: 8px;      /* filter chips, menus, label chips in rows (real: .aOe radius 8px) */
  --gm-radius-m: 12px;     /* M3 baseline (estimated) */
  --gm-radius-l: 16px;     /* compose button, list card, compose window top (real: .z0>.L3 16px; measured card) */
  --gm-radius-xl: 28px;    /* dialogs (M3 baseline, estimated) */
  --gm-radius-search: 24px;/* search pill (real: .Yb.bax border-radius 24px) */
  --gm-radius-send: 18px;  /* Send button (real: .gU .btA .Uo border-radius 18px) */
  --gm-radius-full: 9999px;

  /* size (CSS px) */
  --gm-topbar-h: 64px;         /* measured T1, T3 */
  --gm-rail-w: 68px;           /* measured T1 (2022); about 72 in 2026 frames */
  --gm-nav-w: 256px;           /* real: .aeN min/max-width 256px */
  --gm-search-h: 48px;         /* real: .Yb.bax height 48px */
  --gm-search-max: 720px;      /* measured T2 (718 at 1456 wide) */
  --gm-compose-btn-h: 56px;    /* real: .z0>.L3 height 56px */
  --gm-nav-item-h: 32px;       /* measured T1, T2 */
  --gm-row-h: 40px;            /* Default density: real .zA padding 4px + 32px cell */
  --gm-row-h-comfortable: 40px;/* real CSS: same cell, chips hidden (no real picture) */
  --gm-row-h-compact: 28px;    /* real CSS: .Zs cell 20px + 4 + 4 (no real picture; estimated look) */
  --gm-side-panel-w: 56px;     /* measured T1 */
  --gm-icon: 20px;             /* real: Gmail's icon files are *_20dp */
  --gm-icon-top: 24px;         /* measured top bar */
  --gm-icon-btn: 40px;         /* real: --gm3-icon-button-*-container-height 40px */
  --gm-send-h: 36px;           /* measured T3 */
  --gm-chip-h: 32px;           /* measured search chips (M3 filter chip) */
  --gm-qs-w: 320px;            /* quick settings panel, measured 09 */

  /* motion (real Gmail CSS + M3 tokens) */
  --gm-ease-legacy: cubic-bezier(.4, 0, .2, 1);          /* real: nav + compose button .15s */
  --gm-ease-standard: cubic-bezier(.2, 0, 0, 1);         /* M3 */
  --gm-ease-decel: cubic-bezier(.05, .7, .1, 1);         /* M3 emphasized decelerate */
  --gm-ease-accel: cubic-bezier(.3, 0, .8, .15);         /* M3 emphasized accelerate */
  --gm-dur-short: 150ms;   /* real: .TN transition .15s */
  --gm-dur-medium: 250ms;  /* M3 medium1 */
  --gm-dur-long: 450ms;    /* M3 long1 */
  --gm-dur-tooltip: 150ms; /* real: .T-ays opacity 150ms */

  /* elevation (real, Gmail CSS) */
  --gm-shadow-1: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);       /* compose button, raised row */
  --gm-shadow-2: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);       /* compose button hover */
  --gm-shadow-3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3);         /* menus, compose window (estimated order) */
  --gm-shadow-row-hover: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); /* real: .zA:hover / .btb */
  --gm-shadow-compose-win: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2); /* estimated (M3 level 3-ish, matches 07) */

  /* Google product colours (real: the official M logo SVG) */
  --gm-google-blue: #4285F4; --gm-google-red: #EA4335; --gm-google-yellow: #FBBC04; --gm-google-green: #34A853; --gm-google-darkred: #C5221F;
}

/* ---------- GM3 system colours (real: Google's public GM3 tokens) ---------- */
:root, .gm-light {
  color-scheme: light;
  --gm3-primary: #0B57D0; --gm3-on-primary: #FFFFFF;
  --gm3-primary-container: #D3E3FD; --gm3-on-primary-container: #0842A0;
  --gm3-secondary: #00639B; --gm3-secondary-container: #C2E7FF; --gm3-on-secondary-container: #004A77;
  --gm3-tertiary: #146C2E; --gm3-tertiary-container: #C4EED0;
  --gm3-error: #B3261E; --gm3-error-container: #F9DEDC;
  --gm3-surface: #FFFFFF; --gm3-surface-lowest: #FFFFFF; --gm3-surface-low: #F8FAFD; --gm3-surface-container: #F0F4F9;
  --gm3-surface-high: #E9EEF6; --gm3-surface-highest: #DDE3EA; --gm3-surface-dim: #D3DBE5;
  --gm3-on-surface: #1F1F1F; --gm3-on-surface-variant: #444746;
  --gm3-outline: #747775; --gm3-outline-variant: #C4C7C5;
  --gm3-inverse-surface: #303030; --gm3-inverse-on-surface: #F2F2F2; --gm3-inverse-primary: #A8C7FA;

  /* ---------- Gmail roles (what the components use) ---------- */
  --gm-page: #F6F8FC;            /* measured T1 + real CSS: page behind nav and list */
  --gm-rail: #EAF1FB;            /* measured T1 (2022 rail); estimated same in 2026 */
  --gm-card: #FFFFFF;            /* measured: list card + unread rows */
  --gm-row-read: #F2F6FC;        /* real: .yO background #f2f6fc; measured T1 */
  --gm-row-selected: #C2DBFF;    /* real: .x7 background #c2dbff (checked row) */
  --gm-row-divider: rgba(100,121,143,.12); /* real: .zA inset 0 -1px 0 0 */
  --gm-search: #EAF1FB;          /* real (2024 CSS form.aJf); 2022 image reads #EEF3FC, 2026 reads #E9EEF6 */
  --gm-search-focus: #FFFFFF;    /* estimated: Gmail turns the pill white with a shadow when focused */
  --gm-compose-btn: #C2E7FF;     /* real: .z0>.L3 #c2e7ff */
  --gm-on-compose-btn: #001D35;  /* real */
  --gm-nav-selected: #D3E3FD;    /* real: .TK .TO.nZ #d3e3fd */
  --gm-on-nav-selected: #001D35; /* real CSS (T1 reads #041E49) */
  --gm-nav-hover: rgba(31,31,31,.08); /* estimated (M3 hover state layer 8% on-surface) */
  --gm-text: #1F1F1F;            /* real + measured */
  --gm-text-2: #444746;          /* real (384 rules) + measured: snippets, dates, icons */
  --gm-text-3: #5F6368;          /* measured: older grey icons in the 2022 top bar; real .y2 */
  --gm-link: #0B57D0;            /* real */
  --gm-icon-c: #444746;          /* real: nv700 icon colour */
  --gm-icon-selected: #041E49;   /* real: p900 (filled, selected) */
  --gm-primary: #0B57D0;         /* real: Send, active tab, links */
  --gm-on-primary: #FFFFFF;
  --gm-tab-active: #0B57D0;      /* measured T2 (Primary tab text + 3px bar) */
  --gm-star: #F4B400;            /* measured T2 (filled star, googyellow500 #FBBC04 in file names; reads #F4B400-#FBBC04) */
  --gm-important: #F3C769;       /* measured T2 2026 (same yellow as the star) */
  --gm-important-off: #444746;
  --gm-badge: #D93025;           /* measured T1 rail badge */
  --gm-active-dot: #1E8E3E;      /* measured T1 */
  --gm-checkbox: #444746;        /* real nv700 */
  --gm-checkbox-on: #0B57D0;     /* estimated (GM3 primary; Gmail p600 icons) */
  --gm-chip-outline: #747775;    /* real: .amr .amn>.ams border #747775 (attachment chip) */
  --gm-chip-selected: #D3E3FD;   /* measured 05 (Mail chip) */
  --gm-surface-raised: #FFFFFF;  /* menus, compose window, quick settings */
  --gm-compose-head: #F2F6FC;    /* measured 08 compose header */
  --gm-on-compose-head: #041E49; /* measured 07: "New Message" is dark navy */
  --gm-compose-line: #E0E0E0;    /* measured 07: line under To and Subject */
  --gm-qs-line: #E1E1E1;         /* measured 09: quick settings lines and outlines */
  --gm-scrim: rgba(0,0,0,.32);   /* M3 scrim (estimated) */
  --gm-snackbar: #303030;        /* GM3 inverse-surface (estimated for Gmail snackbar) */
  --gm-on-snackbar: #F2F2F2;
  --gm-snackbar-action: #A8C7FA; /* GM3 inverse-primary */
  --gm-tooltip: #303030;         /* real: gm3 tooltip inverse-surface #303030 */
  --gm-on-tooltip: #F2F2F2;      /* real */
  --gm-highlight: #FDE293;       /* measured 05: search word highlight (estimated name) */
  --gm-hover-row-actions-bg: transparent;
  --gm-state-hover: rgba(68,71,70,.08);   /* M3 8% on-surface-variant (estimated) */
  --gm-state-press: rgba(68,71,70,.12);
  --gm-focus: #0B57D0;
  /* label colours (measured T1/T2, Gmail label palette; names are ours) */
  --gm-label-blue: #4986E7; --gm-label-green: #16A765; --gm-label-yellow: #FAD165; --gm-label-red: #F83A22;
  /* label colours: measured T2 light AND dark (same values in both themes, JPEG +-3). A row's label chip uses the label colour as its background. */
  --gm-label-c1: #EFA093; --gm-label-c2: #FEBB6B; --gm-label-c3: #66DFA9; --gm-label-c4: #98D7E3; --gm-label-c5: #A3C1F3; --gm-label-c6: #CFBCF1; --gm-label-c7: #FBD3DF; --gm-label-dark: #444746;
  --gm-tag-marketing-bg: #FAD2DE; --gm-tag-marketing: #43393D;   /* measured T2 light + dark "7: marketing" chip */
  --gm-tag-fyi-bg: #FEBB6A; --gm-tag-fyi: #422B18;              /* measured T2 light + dark "2: FYI" chip */
  --gm-row-icon-idle: #B5B9BC;   /* measured T2 (2026): tick box, star and importance marker are light grey until the row is pointed at */
  --gm-row-icon-active: #444746; /* measured T2: hovered row and keyboard-cursor row */
  --gm-row-text: #1F1F1F;        /* read-row sender + subject (measured T2) */
  --gm-row-text-2: #444746;      /* read-row snippet + date (measured T2) */
  --gm-top-icon: #444746;        /* top-bar icons + search placeholder (measured T2) */
}

/* ---------- Gmail Dark theme ---------- */
.gm-dark, html.gm-dark {
  color-scheme: dark;
  /* GM3 dark (real tokens) */
  --gm3-primary: #A8C7FA; --gm3-on-primary: #062E6F;
  --gm3-primary-container: #0842A0; --gm3-on-primary-container: #D3E3FD;
  --gm3-secondary: #7FCFFF; --gm3-secondary-container: #004A77; --gm3-on-secondary-container: #C2E7FF;
  --gm3-tertiary: #6DD58C; --gm3-tertiary-container: #0F5223;
  --gm3-error: #F2B8B5; --gm3-error-container: #8C1D18;
  --gm3-surface: #131314; --gm3-surface-lowest: #0E0E0E; --gm3-surface-low: #1B1B1B; --gm3-surface-container: #1E1F20;
  --gm3-surface-high: #282A2C; --gm3-surface-highest: #333537; --gm3-surface-dim: #131314;
  --gm3-on-surface: #E3E3E3; --gm3-on-surface-variant: #C4C7C5;
  --gm3-outline: #8E918F; --gm3-outline-variant: #444746;
  --gm3-inverse-surface: #E3E3E3; --gm3-inverse-on-surface: #303030; --gm3-inverse-primary: #0B57D0;

  /* Gmail Dark theme roles: measured from real dark screenshots unless marked */
  --gm-page: #111111;            /* measured T2 dark + 9to5 2022 (#101010-#121212) */
  --gm-rail: #111111;            /* estimated: no dark rail picture; the page colour */
  --gm-card: #2C2C2C;            /* measured T2 dark list card + 9to5 2022 */
  --gm-row-read: #161616;        /* measured T2 dark read rows (in dark, read rows are DARKER than the card) */
  --gm-row-selected: #3D4A5C;    /* estimated */
  --gm-row-divider: rgba(255,255,255,.08); /* estimated (too thin in the JPEG) */
  --gm-search: #474747;          /* measured T2 dark */
  --gm-search-focus: #5E5E5E;    /* estimated */
  --gm-compose-btn: #FFFFFF;     /* measured T2 dark: white Compose with dark text */
  --gm-on-compose-btn: #1F1F1F;  /* measured */
  --gm-nav-selected: #595959;    /* measured T2 dark */
  --gm-on-nav-selected: #FFFFFF; /* measured */
  --gm-nav-hover: rgba(255,255,255,.08);
  --gm-text: #E3E3E3;            /* GM3 on-surface (JPEG reads #B3B3B3-#FFFFFF): estimated */
  --gm-text-2: #C4C7C5;          /* GM3 on-surface-variant: estimated */
  --gm-text-3: #9AA0A6;          /* estimated */
  --gm-link: #A8C7FA;
  --gm-icon-c: #C4C7C5;          /* estimated */
  --gm-icon-selected: #FFFFFF;
  --gm-primary: #A8C7FA;         /* GM3 dark primary: real token, not seen in a dark picture */
  --gm-on-primary: #062E6F;
  --gm-tab-active: #FFFFFF;      /* measured T2 dark: Primary tab is white with a light bar */
  --gm-star: #B18415;            /* measured T2 dark (importance marker; star assumed the same) */
  --gm-important: #B18415;       /* measured T2 dark (median inside the marker) */
  --gm-important-off: #C4C7C5;
  --gm-checkbox: #C4C7C5;
  --gm-checkbox-on: #A8C7FA;
  --gm-chip-outline: #8E918F;
  --gm-chip-selected: #004A77;
  --gm-surface-raised: #2C2C2C;  /* estimated: same grey as the list card */
  --gm-compose-head: #3C3C3C;    /* estimated */
  --gm-on-compose-head: #E3E3E3; /* estimated */
  --gm-compose-line: #444746;    /* estimated (GM3 dark outline-variant) */
  --gm-qs-line: #444746;         /* estimated */
  --gm-scrim: rgba(0,0,0,.5);
  --gm-snackbar: #E3E3E3;        /* GM3 inverse (estimated) */
  --gm-on-snackbar: #303030;
  --gm-snackbar-action: #0B57D0;
  --gm-tooltip: #E3E3E3;
  --gm-on-tooltip: #303030;
  --gm-highlight: #6B5A1E;       /* estimated */
  --gm-state-hover: rgba(227,227,227,.08);
  --gm-state-press: rgba(227,227,227,.12);
  --gm-focus: #A8C7FA;
  --gm-label-dark: #C4C7C5;
  --gm-tag-marketing-bg: #FAD2DE; --gm-tag-marketing: #43393D;   /* measured T2 dark: chips keep their light colours */
  --gm-tag-fyi-bg: #FEBB6A; --gm-tag-fyi: #422B18;
  --gm-row-icon-idle: #5E5E5E;   /* measured T2 dark */
  --gm-row-icon-active: #E3E3E3; /* measured T2 dark (#E7E7E7 in the JPEG) */
  --gm-row-text: #B3B3B3;        /* measured T2 dark: read rows are dimmer than the menu (sender/subject #B8B8B8, JPEG) */
  --gm-row-text-2: #8A8A8A;      /* measured T2 dark: snippet + date (#8C8C8C, JPEG) */
  --gm-top-icon: #E3E3E3;        /* measured T2 dark: top-bar icons and "Search mail" are near-white */
}