/* WhatsApp (Web + Windows/Mac desktop, 2025-26 look) — design tokens, light + dark.
   Study copy for internal design education. WhatsApp's brand, logo, icons and product belong to WhatsApp LLC / Meta.

   Where the values come from (every line is marked):
   [real]      read from WhatsApp's own public files: the WhatsApp Web stylesheet and scripts served on the public
               sign-in (QR code) page, web.whatsapp.com, 14 Oct 2026. Nothing was signed in to.
               Colours = WDS ("WhatsApp Design System") variables, read with Chrome from the default theme
               (class xfmqtgv) in light and in dark (prefers-color-scheme: dark). Type = WDSFontConfig + WDSFontTokenStyles.
               Motion, radius and shadow = the WDS component token set in the same stylesheet.
   [measured]  read from real 2025-26 screenshots (Microsoft Store listing Oct 2026, WABetaInfo Feb/Apr 2026, Dec 2025).
   [ours]      our estimate where nothing better was found.
   Dark mode is html.wa-dark (WhatsApp itself uses body.dark + the prefers-color-scheme block).
   .wa-light-scope / .wa-dark-scope force one theme inside a box (used to show light and dark side by side). */

@font-face { font-family: "Roboto Variable"; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url("fonts/RobotoVariable-normal-100-900.woff2") format("woff2"); }   /* [real] the exact file WhatsApp Web serves; Apache 2.0 */
@font-face { font-family: "Roboto Variable"; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap;
  src: url("fonts/RobotoVariable-italic-100-900.woff2") format("woff2"); }

:root, .wa-light-scope {
  /* ---------- fonts ---------- */
  /* [real] WDSText picks "WindowsSystemFontMetrics" on windowsWeb and the Apple system font on macWeb: the chat UI uses the
     operating-system font (Segoe UI on Windows, SF Pro on Mac). Roboto Variable is loaded for WDS parts and other systems. */
  --wa-font: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Roboto Variable", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wa-font-roboto: "Roboto Variable", Roboto, "Helvetica Neue", Helvetica, sans-serif;   /* [real] body font of the sign-in page */
  --wa-font-mono: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "Courier New", monospace;  /* [real] --font-family-monospace */

  /* ---------- type scale [real] WDSFontConfig (web) + WDSFontTokenStyles ---------- */
  --wa-type-large-title-1: 400 32px/40px var(--wa-font);
  --wa-type-large-title-2: 400 28px/36px var(--wa-font);
  --wa-type-headline-1: 400 24px/32px var(--wa-font);
  --wa-type-headline-2: 400 22px/28px var(--wa-font);
  --wa-type-body-1: 400 16px/24px var(--wa-font);
  --wa-type-body-1-em: 545 16px/24px var(--wa-font);      /* [real] emphasized = weight 545 (Segoe UI shows it as semibold) */
  --wa-type-body-2: 400 14px/20px var(--wa-font);         /* + letter-spacing .01rem */
  --wa-type-body-2-em: 545 14px/20px var(--wa-font);
  --wa-type-body-3: 400 12px/16px var(--wa-font);
  --wa-type-body-3-em: 545 12px/16px var(--wa-font);
  --wa-ls-body-2: .01rem;
  /* [measured] in the desktop/web chat screens */
  --wa-type-panel-title: 600 21px/28px var(--wa-font);    /* "Chats", "Updates" (semibold) */
  --wa-type-chat-name: 400 16px/21px var(--wa-font);      /* chat-list name, header name */
  --wa-type-chat-preview: 400 14.5px/20px var(--wa-font); /* last message preview */
  --wa-type-chat-time: 400 12.5px/16px var(--wa-font);
  --wa-type-message: 400 14.5px/20px var(--wa-font);      /* bubble text, 2025-26 look (was 14.2px before) [measured] */
  --wa-type-meta: 400 11.5px/15px var(--wa-font);         /* time inside bubbles */
  --wa-type-sender: 600 13px/22px var(--wa-font);         /* group sender name above a message */

  /* ---------- palette [real] WDS primitive colours (same in both modes) ---------- */
  --wa-green-75: #e7fce3; --wa-green-100: #d9fdd3; --wa-green-200: #acfcac; --wa-green-300: #71eb85; --wa-green-400: #25d366;
  --wa-green-450: #21c063; --wa-green-500: #1daa61; --wa-green-600: #1b8755; --wa-green-700: #15603e; --wa-green-750: #144d37; --wa-green-800: #103529;
  --wa-emerald-100: #d5fded; --wa-emerald-400: #06cf9c;
  --wa-teal-200: #95dbd4; --wa-teal-300: #42c7b8; --wa-teal-400: #02a698;
  --wa-cobalt-200: #99cafe; --wa-cobalt-300: #53a6fd; --wa-cobalt-400: #007bfc;
  --wa-sky-blue-200: #93d7f5; --wa-sky-blue-300: #53bdeb; --wa-sky-blue-400: #009de2;
  --wa-purple-200: #d1c4ff; --wa-purple-300: #a791ff; --wa-purple-400: #7f66ff; --wa-purple-500: #5e47de;
  --wa-pink-200: #ffabc7; --wa-pink-300: #ff72a1; --wa-pink-400: #ff2e74;
  --wa-red-75: #fde8eb; --wa-red-200: #fa99a4; --wa-red-300: #fb5061; --wa-red-400: #ea0038; --wa-red-500: #b80531; --wa-red-800: #321622;
  --wa-orange-200: #fdc1ad; --wa-orange-300: #fc9775; --wa-orange-400: #fa6533; --wa-orange-500: #c4532d;
  --wa-yellow-75: #fff7e5; --wa-yellow-100: #fff0d4; --wa-yellow-200: #ffe4af; --wa-yellow-300: #ffd279; --wa-yellow-400: #ffb938; --wa-yellow-500: #c58730; --wa-yellow-800: #362c1f;
  --wa-warm-gray-75: #f7f5f3; --wa-warm-gray-100: #f1eeeb; --wa-warm-gray-200: #dbd8d4; --wa-warm-gray-300: #c2bdb8; --wa-warm-gray-800: #262524; --wa-warm-gray-900: #171616;
  --wa-cream-85: #f1ebe3;
  --wa-gray-50: #fafafa; --wa-gray-75: #f4f4f4; --wa-gray-100: #eeeeee; --wa-gray-300: #bdbdbd; --wa-gray-400: #959393; --wa-gray-500: #757778;
  --wa-gray-700: #424445; --wa-gray-800: #242626; --wa-gray-850: #1d1f1f; --wa-gray-900: #161717; --wa-gray-1000: #0a0a0a;
  --wa-brand: #25D366;            /* [real] WhatsApp brand green (logo tile, activity dot) */

  /* ---------- semantic colours, LIGHT [real] WDS default theme ---------- */
  --wa-accent: #1DAA61;                         /* WDS-accent: selected chip text, send, toggles */
  --wa-accent-emphasized: #15603E;
  --wa-accent-deemphasized: #D9FDD3;            /* selected filter chip, my bubble */
  --wa-on-accent: #FFFFFF;
  --wa-action-emphasized: #1B8755;              /* green links, "typing…", unread time */
  --wa-link: #1B8755;                           /* WDS-content-external-link */
  --wa-text: #0A0A0A;                           /* WDS-content-default */
  --wa-text-2: rgba(0, 0, 0, .6);               /* WDS-content-deemphasized: previews, times, icons */
  --wa-text-disabled: #BDBDBD;
  --wa-icon: rgba(0, 0, 0, .6);                 /* --icon */
  --wa-icon-strong: #0A0A0A;                    /* WDS-content-action-default */
  --wa-read: #007BFC;                           /* WDS-content-read: blue double tick */
  --wa-unread-badge: #1DAA61;                   /* [measured] count badge = accent */
  --wa-page: #FFFFFF;                           /* WDS-background-wash-plain / --app-background */
  --wa-surface: #FFFFFF;                        /* WDS-surface-default: chat list, header */
  --wa-surface-2: #F7F5F3;                      /* WDS-surface-emphasized: nav rail, title bar */
  --wa-nav: #F7F5F3;                            /* WDS-components-surface-nav-bar */
  --wa-elevated: #FFFFFF;                       /* WDS-surface-elevated-default: menus, dialogs */
  --wa-elevated-2: #F7F5F3;
  --wa-highlight: rgba(194, 189, 184, .15);     /* WDS-surface-highlight: hover, search field */
  --wa-active-row: rgba(194, 189, 184, .15);    /* WDS-components-active-list-row: open chat row */
  --wa-pressed: rgba(0, 0, 0, .2);
  --wa-inverse: #242626; --wa-on-inverse: #FFFFFF;
  --wa-divider: rgba(0, 0, 0, .1);              /* WDS-lines-divider */
  --wa-outline: #959393;                        /* WDS-lines-outline-default */
  --wa-outline-2: rgba(0, 0, 0, .2);            /* WDS-lines-outline-deemphasized: chip borders */
  --wa-filter-selected: #D9FDD3;                /* WDS-components-filter-surface-selected */
  --wa-filter-selected-text: #15603E;           /* [measured] selected chip text (accent-emphasized) */
  --wa-wallpaper: #F5F1EB;                      /* WDS-systems-chat-background-wallpaper */
  --wa-wallpaper-doodle: #EAE0D3;               /* WDS-systems-chat-foreground-wallpaper (doodle ink) */
  --wa-bubble-out: #D9FDD3;                     /* WDS-systems-bubble-surface-outgoing */
  --wa-bubble-in: #FFFFFF;                      /* WDS-systems-bubble-surface-incoming */
  --wa-bubble-system: rgba(255, 255, 255, .9);  /* date pills, "Messages are end-to-end encrypted" */
  --wa-bubble-e2e: #FFF0D4;
  --wa-bubble-business: #D5FDED;
  --wa-bubble-meta: rgba(0, 0, 0, .6);          /* time + ticks inside bubbles */
  --wa-bubble-overlay: rgba(194, 189, 184, .15);
  --wa-bubble-shadow: 0 1px .5px rgba(11, 20, 26, .13);   /* [ours] matches the 1px soft line under bubbles */
  --wa-composer: #FFFFFF;                       /* WDS-systems-chat-surface-composer */
  --wa-tray: #F7F5F3;                           /* WDS-systems-chat-surface-tray */
  --wa-status-seen: #C2BDB8;                    /* WDS-systems-status-seen (grey ring) */
  --wa-status-unseen: #25D366;                  /* --status-ring-unread [real] light */
  --wa-activity: #25D366;                       /* WDS-persistent-activity-indicator: new-update dot */
  --wa-verified: #0085F4;
  --wa-negative: #EA0038; --wa-negative-bg: #FDE8EB; --wa-negative-strong: #B80531;
  --wa-warning: #FFB938; --wa-warning-bg: #FFF7E5;
  --wa-positive: #1DAA61; --wa-positive-bg: #E7FCE3;
  --wa-dimmer: rgba(0, 0, 0, .32);              /* WDS-background-dimmer: behind dialogs */
  --wa-ptt-played: #4FC3F7; --wa-ptt-unplayed: #09D261;   /* voice-note thumb */
  --wa-ptt-wave-in: #CED0D1; --wa-ptt-wave-in-played: #858A8D; --wa-ptt-wave-out: #B0CEAE; --wa-ptt-wave-out-played: #728977;
  --wa-titlebar: #F7F5F3;                       /* [measured] desktop title bar = nav colour */
  --wa-window-line: #E0DEDF;                    /* [measured] line under the title bar */
  /* profile-photo colour pairs (initials avatars) [real] */
  --wa-pp-green-bg: #D9FDD3; --wa-pp-green: #1B8755;   --wa-pp-teal-bg: #CBF2EE; --wa-pp-teal: #028377;
  --wa-pp-sky-bg: #CAECFA; --wa-pp-sky: #027EB5;       --wa-pp-cobalt-bg: #D2E8FE; --wa-pp-cobalt: #0063CB;
  --wa-pp-purple-bg: #E8E0FF; --wa-pp-purple: #5E47DE; --wa-pp-pink-bg: #FFDAE7; --wa-pp-pink: #D42A66;
  --wa-pp-red-bg: #FBD8DC; --wa-pp-red: #B80531;       --wa-pp-orange-bg: #FEE2D8; --wa-pp-orange: #C4532D;
  --wa-pp-yellow-bg: #FFF0D4; --wa-pp-yellow: #9D6C2C; --wa-pp-brown-bg: #F4DED1; --wa-pp-brown: #855538;
  --wa-pp-gray-bg: #EEEEEE; --wa-pp-gray: #757778;
  /* group sender name colours [measured] T1: purple, green, blue */
  --wa-sender-1: #7F66FF; --wa-sender-2: #1DAA61; --wa-sender-3: #007BFC; --wa-sender-4: #C4532D; --wa-sender-5: #D42A66; --wa-sender-6: #02A698;

  /* ---------- shape [real] WDS component tokens + [measured] ---------- */
  --wa-radius-xs: 4px;        /* shape-100 */
  --wa-radius-s: 8px;         /* shape-200 + bubbles [measured 7.5px] */
  --wa-radius-m: 12px;        /* shape-300, --radius-app: list rows, panels */
  --wa-radius-l: 16px;        /* shape-400: cards, media */
  --wa-radius-xl: 24px;       /* shape-600 */
  --wa-radius-dialog: 32px;   /* dialog-corner-radius */
  --wa-radius-full: 9999px;   /* chips, search, composer, buttons */
  --wa-radius-bubble: 8px;    /* [measured] */
  --wa-radius-row: 12px;      /* [measured] selected chat row */

  /* ---------- size + space [real] where named, else [measured] ---------- */
  --wa-rail-w: 64px;          /* [real] --navbar-width */
  --wa-header-h: 64px;        /* [measured] list header + conversation header */
  --wa-row-h: 72px;           /* [measured] chat-list row */
  --wa-avatar: 48px;          /* [measured] list avatar */
  --wa-avatar-s: 40px;        /* [measured] conversation header avatar */
  --wa-avatar-xs: 28px;       /* [measured] group sender avatar */
  --wa-search-h: 40px;        /* [measured] */
  --wa-chip-h: 32px;          /* [measured] */
  --wa-composer-h: 52px;      /* [measured] */
  --wa-footer-h: 62px;        /* [real] --height-pane-footer */
  --wa-icon-size: 24px;
  --wa-space-1: 4px; --wa-space-2: 8px; --wa-space-3: 12px; --wa-space-4: 16px; --wa-space-5: 20px; --wa-space-6: 24px; --wa-space-8: 32px;

  /* ---------- shadows [real] ---------- */
  --wa-shadow-menu: 0 2px 5px rgba(11, 20, 26, .26), 0 2px 10px rgba(11, 20, 26, .16);  /* menus, popovers */
  --wa-shadow-card: 0px 8px 20px 0px rgba(0, 0, 0, .2), 0px 2px 4px 0px rgba(0, 0, 0, .1); /* dialogs, cards */
  --wa-shadow-elevated: 0px 4px 12px rgba(10, 19, 23, .12);
  --wa-shadow-persistent: 0px 6px 16px rgba(10, 19, 23, .16);
  --wa-shadow-chip: 0 1px 1px rgba(11, 20, 26, .06), 0 2px 5px rgba(11, 20, 26, .2);
  --wa-focus-ring: 0 0 0 2px var(--wa-page), 0 0 0 4px var(--wa-accent);   /* [ours] WDS uses #1877F2; WhatsApp shows green */

  /* ---------- motion [real] WDS animation tokens ---------- */
  --wa-dur-xfast: 100ms; --wa-dur-xfast-max: 150ms;
  --wa-dur-fast: 250ms; --wa-dur-fast-min: 200ms; --wa-dur-fast-max: 300ms;
  --wa-dur-short-in: 280ms; --wa-dur-short-out: 200ms;
  --wa-dur-medium: 500ms; --wa-dur-slow: 2000ms;
  --wa-ease-responsive: cubic-bezier(.1, 1, .36, 1);       /* things that answer a click */
  --wa-ease-responsive-max: cubic-bezier(0, 1, .2, 1);
  --wa-ease-organic: cubic-bezier(.6, 0, .1, 1);           /* panels sliding in */
  --wa-ease-organic-in: cubic-bezier(.9, 0, .1, 1);
  --wa-ease-elastic: cubic-bezier(.25, 1.4, .5, 1);        /* reactions popping in */
  --wa-ease-ambient: cubic-bezier(0, 0, 1, 1);
  --wa-ease-legacy: cubic-bezier(.1, .82, .25, 1);         /* [ours] classic WhatsApp Web drawer curve */

  color-scheme: light;
}

/* ---------- semantic colours, DARK [real] WDS default theme under prefers-color-scheme: dark ---------- */
html.wa-dark, .wa-dark-scope {
  --wa-accent: #21C063;
  --wa-accent-emphasized: #D9FDD3;
  --wa-accent-deemphasized: #103529;
  --wa-on-accent: #0A0A0A;
  --wa-action-emphasized: #21C063;
  --wa-link: #21C063;
  --wa-text: #FAFAFA;
  --wa-text-2: rgba(255, 255, 255, .6);
  --wa-text-disabled: #424445;
  --wa-icon: rgba(255, 255, 255, .6);
  --wa-icon-strong: #FAFAFA;
  --wa-read: #53BDEB;
  --wa-unread-badge: #21C063;
  --wa-page: #161717;
  --wa-surface: #161717;
  --wa-surface-2: #1D1F1F;
  --wa-nav: #1D1F1F;
  --wa-elevated: #1D1F1F;
  --wa-elevated-2: #242626;
  --wa-highlight: rgba(255, 255, 255, .1);
  --wa-active-row: rgba(255, 255, 255, .1);
  --wa-pressed: rgba(255, 255, 255, .2);
  --wa-inverse: #EEEEEE; --wa-on-inverse: #0A0A0A;
  --wa-divider: rgba(255, 255, 255, .1);
  --wa-outline: #757778;
  --wa-outline-2: rgba(255, 255, 255, .1);
  --wa-filter-selected: #103529;
  --wa-filter-selected-text: #D9FDD3;
  --wa-wallpaper: #161717;
  --wa-wallpaper-doodle: rgba(255, 255, 255, .1);
  --wa-bubble-out: #144D37;
  --wa-bubble-in: #242626;
  --wa-bubble-system: #1D1F1F;
  --wa-bubble-e2e: #1D1F1F;
  --wa-bubble-business: #1D1F1F;
  --wa-bubble-meta: rgba(255, 255, 255, .6);
  --wa-bubble-overlay: rgba(0, 0, 0, .2);
  --wa-bubble-shadow: 0 1px .5px rgba(0, 0, 0, .13);
  --wa-composer: #242626;
  --wa-tray: #161717;
  --wa-status-seen: #757778;
  --wa-status-unseen: #008069;   /* [real] --status-ring-unread in dark; WDS screens show #21C063 */
  --wa-negative: #FB5061; --wa-negative-bg: #321622; --wa-negative-strong: #FA99A4;
  --wa-warning: #FFD279; --wa-warning-bg: #362C1F;
  --wa-positive: #71EB85; --wa-positive-bg: #103529;
  --wa-dimmer: rgba(0, 0, 0, .32);
  --wa-ptt-played: #53BDEB; --wa-ptt-unplayed: #09D261;
  --wa-ptt-wave-in: #636B70; --wa-ptt-wave-in-played: #A6ABAD; --wa-ptt-wave-out: #4D8D81; --wa-ptt-wave-out-played: #99BEB7;
  --wa-titlebar: #1D1F1F;
  --wa-window-line: #343535;
  --wa-pp-green-bg: #103529; --wa-pp-green: #25D366;   --wa-pp-teal-bg: #092D2F; --wa-pp-teal: #42C7B8;
  --wa-pp-sky-bg: #0B2A3A; --wa-pp-sky: #53BDEB;       --wa-pp-cobalt-bg: #092642; --wa-pp-cobalt: #53A6FD;
  --wa-pp-purple-bg: #242447; --wa-pp-purple: #A791FF; --wa-pp-pink-bg: #36192A; --wa-pp-pink: #FF72A1;
  --wa-pp-red-bg: #321622; --wa-pp-red: #FB5061;       --wa-pp-orange-bg: #35221E; --wa-pp-orange: #FC9775;
  --wa-pp-yellow-bg: #362C1F; --wa-pp-yellow: #FFD279; --wa-pp-brown-bg: #35271E; --wa-pp-brown: #E0B69C;
  --wa-pp-gray-bg: #242626; --wa-pp-gray: #BDBDBD;
  --wa-sender-1: #A791FF; --wa-sender-2: #25D366; --wa-sender-3: #53A6FD; --wa-sender-4: #FC9775; --wa-sender-5: #FF72A1; --wa-sender-6: #42C7B8;
  --wa-shadow-menu: 0 2px 5px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .3);
  --wa-shadow-card: 0px 8px 20px 0px rgba(0, 0, 0, .5), 0px 2px 4px 0px rgba(0, 0, 0, .3);
  color-scheme: dark;
}