/* Kapable design language 1.36.0: tokens.
   Source: kv2-launchpad static/next/next.css after D30 (the /next desktop).
   Every custom property name and value below is copied verbatim from that file.
   Only the dark-theme selectors differ: /next keys its own theme on data-kd-theme,
   apps key on data-theme. check-drift.py proves this file and next.css agree.

   Do not change a value here first. Change next.css, then copy it here with
   check-drift.py green (DESIGN.md, "How to change the language").

   The four --accent tokens hold a default (#ab4725). Every app must replace them
   with the org's colour at runtime, in both themes (DESIGN.md, "The org accent"). */

:root {
  --host-top: 0px;
  --host-bottom: 0px;
  --font-sans: 'InterK', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --menubar-h: 36px;
  --dock-h: 74px;
  /* Motion (1.26.0, D94): five durations and three curves. Things that arrive use --ease-out or
     --ease; things that leave use --ease-in and a shorter duration (DESIGN.md section 15). */
  --motion-press: 80ms;
  --motion-fast: 120ms;
  --motion-enter: 160ms;
  --motion-move: 240ms;
  --motion-window: 280ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --accent: #ab4725;
  --accent-text: #ab4725;
  --accent-soft: rgb(171 71 37 / 0.12);
  --accent-wash: rgb(171 71 37 / 0.12);
  --accent-ring: var(--accent-text);
  --accent-ring-desk: color-mix(in srgb, var(--accent-text) 8%, #000);

  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --hover: rgb(20 24 32 / 0.06);
  --press: rgb(20 24 32 / 0.1);
  --pressed: rgb(20 24 32 / 0.15);
  --field: rgb(20 24 32 / 0.05);
  --chrome: rgb(250 251 252 / 0.8);
  --w-bg: #ffffff;
  --w-line: rgb(255 255 255 / 0.6);
  /* The title bar of the window in use (D72) and its three inks, so a look can draw its own bar
     (presets D38). In a look whose accent reach is action-only it never takes the accent. */
  --w-bar-key: var(--accent-wash);
  --w-bar-key-text: var(--text);
  --w-bar-key-text-2: var(--text-2);
  --w-bar-key-text-3: var(--text-3);
  /* A person's avatar: the accent, or the look's ink in an action-only look (presets D34). */
  --avatar-fill: var(--accent);
  /* Its initials: white, or in an action-only look whichever of white and the look's ground reads
     on its ink (a light ink in dark, PLAT-1153). */
  --avatar-text: #ffffff;
  /* Text on an accent fill: the primary button, a send button, the switch knob, a selected desk
     tile's name. White, or a look's own ink where its dark button turns light (presets D45). */
  --on-accent: #ffffff;
  --line: rgb(18 22 30 / 0.09);
  --line-strong: rgb(18 22 30 / 0.15);
  --text: #16181d;
  --text-2: #4b515c;
  --text-3: #5f6673;
  --ok: #137b43;
  --ok-fill: #126b37;
  --ok-soft: rgb(23 138 76 / 0.12);
  --warn: #a56a07;
  --bad: #bd3737; /* 4.88:1 on --surface-3/--bg, 5.58:1 on --surface; white on it 5.58:1 (Folio finding, D37) */
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #d5d8de;
  --shadow-pop: 0 0 0 1px rgb(18 22 30 / 0.06), 0 12px 32px -8px rgb(12 16 24 / 0.24), 0 4px 10px -4px rgb(12 16 24 / 0.12);
  --shadow-widget: 0 1px 1px rgb(12 16 24 / 0.06), 0 10px 28px -10px rgb(12 16 24 / 0.32);
  --shadow-win: 0 0 0 1px rgb(18 22 30 / 0.1), 0 26px 56px -14px rgb(8 10 16 / 0.42), 0 10px 20px -8px rgb(8 10 16 / 0.2);
  --shadow-win-idle: 0 0 0 1px rgb(18 22 30 / 0.09), 0 12px 30px -12px rgb(8 10 16 / 0.3);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.35) inset, 0 18px 40px -12px rgb(8 10 16 / 0.4);
  /* App icons on the desk and in the dock, and the desk's folder tile: their shadows, the folder
     tile's ground and corner. A flat look sets the shadows to none (PLAT-1271). */
  --icon-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.2)) drop-shadow(0 5px 12px rgb(0 0 0 / 0.22));
  --dock-icon-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.18)) drop-shadow(0 4px 8px rgb(0 0 0 / 0.16));
  --folder-tile-shadow: 0 1px 2px rgb(0 0 0 / 0.22), 0 5px 12px rgb(0 0 0 / 0.18);
  --folder-tile-bg: rgb(245 247 251 / 0.82);
  --folder-tile-radius: calc(var(--radius-tile) * 15 / 14);
  --label: #ffffff;
  --label-shadow: 0 1px 2px rgb(0 0 0 / 0.6), 0 0 8px rgb(0 0 0 / 0.32);
  /* The desk's own text on its wallpaper (greeting, tile names; group titles and empty notes; the
     date line), its shadow, and the scrim behind the desk's left side. A look with a pale day
     wallpaper sets them to a dark ink, and the desktop uses that ink only while the look's own
     wallpaper is on screen (presets D42, PLAT-1153). --label stays white for text on an image. */
  --desk-text: var(--label);
  --desk-text-2: rgb(255 255 255 / 0.86);
  --desk-text-3: rgb(255 255 255 / 0.84);
  --desk-text-shadow: var(--label-shadow);
  --desk-scrim: linear-gradient(90deg, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0) 46%);
  --scroll-thumb: color-mix(in srgb, var(--text) 36%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--text) 52%, transparent);
  /* Preset tokens (taste presets, DESIGN 2.1; PLAT-1171). Each holds the value the rules below
     use today, so the default look is unchanged. No rule reads them yet: PLAT-1147 moves the
     rules onto them, and a preset overrides them. */
  /* Corners per shape role. Button and field are separate roles (presets D26). */
  --radius-tag: 6px;
  --radius-row: 7px;
  --radius-button: 8px;
  --radius-field: 8px;
  --radius-note: 10px;
  --radius-card: 12px;
  --radius-sheet: 18px;
  --radius-launcher: 16px;
  --radius-dock: 21px;
  --radius-tile: 14px;
  /* A button that holds only a glyph; it follows the button corner unless a look sets its own
     (presets D38). */
  --radius-icon-button: var(--radius-button);
  /* Type: size per role, heading weight, tracking on large titles, faces and their features. */
  --type-badge: 9.5px;
  --type-tag: 11px;
  --type-meta: 12px;
  --type-secondary: 12.5px;
  --type-control: 13px;
  --type-description: 13.5px;
  --type-body: 14px;
  --type-subheading: 15px;
  --type-dialog-title: 17px;
  --type-view-title: 22px;
  --type-greeting: 30px;
  --heading-weight: 650;
  --title-tracking: -0.015em;
  /* Titles set in the display face (view, notes and dialog titles) and the text of controls,
     menu items, row titles and labels, each apart from the heading weight (presets D38). */
  --title-weight: var(--heading-weight);
  --control-weight: 600;
  --font-ui: var(--font-sans);
  --font-display: var(--font-sans);
  --font-ui-features: 'cv11', 'ss01';
  --font-display-features: 'cv11', 'ss01';
  /* Body text and the titles of list rows, apart from controls and titles: a window's address and
     page name, launcher and window-switcher rows, voice lines. kapable sets them in the UI face at
     the control weight; a look may give them a face and weight of their own (presets D45). */
  --font-body: var(--font-ui);
  --row-title-weight: var(--control-weight);
  /* Density: padding and gaps are written as today's pixels times the factor. */
  --control-h: 30px;
  --row-h: 32px;
  /* Rows of a list (launcher results, window switcher, start doors, first-run actions, voice
     lines), apart from menu rows above (presets D37). */
  --list-row-h: 36px;
  --pad-factor: 1;
  /* Depth and edges. The window, popover, widget and dock shadows are the tokens above. */
  --shadow-banner: var(--shadow-pop), inset 0 0 0 1px var(--line);
  --shadow-launcher: 0 0 0 1px var(--line), 0 30px 80px -20px rgb(0 0 0 / 0.5);
  --shadow-toast: 0 10px 30px -8px rgb(0 0 0 / 0.5);
  --card-edge: inset 0 0 0 1px var(--line);
  /* The edge of a control (buttons, fields, the segmented control, composers, swatches), apart
     from a card's so a look can edge one and not the other (PLAT-1153). */
  --control-edge: inset 0 0 0 1px var(--line);
  --row-rule: none;
  --chrome-blur: saturate(1.7) blur(22px);
  /* The dock's own blur, a little stronger than the menu bar's. A look with blur off sets both
     to none (PLAT-1153). */
  --dock-blur: blur(24px) saturate(1.7);
  /* The primary button's raised shading (presets D38). */
  --shadow-primary: inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.12);
  /* Control glyphs, the accent's reach (presets D27) and the theme for a person who never chose
     (presets D6). */
  --glyph-stroke: 1.6;
  --glyph-cap: round;
  --glyph-join: round;
  --accent-reach: full;
  --default-theme: auto;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* Scrollbars: a transparent track and a quiet text-colour thumb in both themes.
   Firefox and Chromium read scrollbar-color; Safari paints the pseudo-elements. */
*:not(:root):not(body):hover {
  scrollbar-color: var(--scroll-thumb-hover) transparent;
}
*::-webkit-scrollbar {
  background: transparent;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 8px; /* raw: scrollbar thumb, browser chrome, no shape role (PLAT-1147) */
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
/* The square where two scrollbars meet is opaque white by default (D56). */
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark: follows the system unless the page sets data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
    --accent-ring-desk: var(--accent-ring);
    --bg: #0e0f12;
    --surface: #17181c;
    --surface-2: #1c1d22;
    --surface-3: #25272d;
    --hover: rgb(255 255 255 / 0.07);
    --press: rgb(255 255 255 / 0.11);
    --pressed: rgb(255 255 255 / 0.16);
    --field: rgb(255 255 255 / 0.06);
    --chrome: rgb(24 25 30 / 0.76);
    --w-bg: #1a1b20;
    --w-line: rgb(255 255 255 / 0.07);
    --line: rgb(255 255 255 / 0.08);
    --line-strong: rgb(255 255 255 / 0.14);
    --text: #eceef2;
    --text-2: #b4bac4;
    --text-3: #969ca8;
    --ok: #4cc488;
    --ok-fill: #126b37;
    --ok-soft: rgb(76 196 136 / 0.14);
    --warn: #e0a441;
    --bad: #f06a6a;
    --bad-fill: #b52626;
    --neutral-fill: #4b515c;
    --light-idle: #3b3e45;
    --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
    --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
    --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
    --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
    --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
    --folder-tile-bg: rgb(42 46 56 / 0.86);
  }
}

/* Dark: chosen explicitly. */
:root[data-theme="dark"] {
  --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
  --accent-ring-desk: var(--accent-ring);
  --bg: #0e0f12;
  --surface: #17181c;
  --surface-2: #1c1d22;
  --surface-3: #25272d;
  --hover: rgb(255 255 255 / 0.07);
  --press: rgb(255 255 255 / 0.11);
  --pressed: rgb(255 255 255 / 0.16);
  --field: rgb(255 255 255 / 0.06);
  --chrome: rgb(24 25 30 / 0.76);
  --w-bg: #1a1b20;
  --w-line: rgb(255 255 255 / 0.07);
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --text: #eceef2;
  --text-2: #b4bac4;
  --text-3: #969ca8;
  --ok: #4cc488;
  --ok-fill: #126b37;
  --ok-soft: rgb(76 196 136 / 0.14);
  --warn: #e0a441;
  --bad: #f06a6a;
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #3b3e45;
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
  --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
  --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
  --folder-tile-bg: rgb(42 46 56 / 0.86);
}

/* Always-dark region (1.12.0, D76): an element with data-scheme="dark" and everything inside it
   takes the dark values in both themes, for a surface that stays dark whatever the page does:
   a call room around live video, a photo or video viewer. The values are the dark block's,
   verbatim (check-drift.py proves it). The scrollbar thumb is declared again because its
   :root value was computed from the page's --text. The app also runs applyAccent() on the
   region element with dark = true (DESIGN.md section 7), so links and fills inside it take
   the dark accent while the page around it keeps the light one. */
[data-scheme="dark"] {
  color-scheme: dark;
  --accent-ring: color-mix(in srgb, var(--accent-text) 55%, #fff);
  --accent-ring-desk: var(--accent-ring);
  --bg: #0e0f12;
  --surface: #17181c;
  --surface-2: #1c1d22;
  --surface-3: #25272d;
  --hover: rgb(255 255 255 / 0.07);
  --press: rgb(255 255 255 / 0.11);
  --pressed: rgb(255 255 255 / 0.16);
  --field: rgb(255 255 255 / 0.06);
  --chrome: rgb(24 25 30 / 0.76);
  --w-bg: #1a1b20;
  --w-line: rgb(255 255 255 / 0.07);
  --line: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.14);
  --text: #eceef2;
  --text-2: #b4bac4;
  --text-3: #969ca8;
  --ok: #4cc488;
  --ok-fill: #126b37;
  --ok-soft: rgb(76 196 136 / 0.14);
  --warn: #e0a441;
  --bad: #f06a6a;
  --bad-fill: #b52626;
  --neutral-fill: #4b515c;
  --light-idle: #3b3e45;
  --shadow-pop: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-widget: 0 0 0 1px rgb(255 255 255 / 0.04), 0 14px 32px -10px rgb(0 0 0 / 0.6);
  --shadow-win: 0 0 0 1px rgb(255 255 255 / 0.1), 0 28px 60px -12px rgb(0 0 0 / 0.7);
  --shadow-win-idle: 0 0 0 1px rgb(255 255 255 / 0.07), 0 14px 32px -12px rgb(0 0 0 / 0.55);
  --shadow-dock: 0 0 0 1px rgb(255 255 255 / 0.06) inset, 0 18px 40px -12px rgb(0 0 0 / 0.6);
  --folder-tile-bg: rgb(42 46 56 / 0.86);
  --scroll-thumb: color-mix(in srgb, var(--text) 36%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--text) 52%, transparent);
  /* Preset tokens built from --line and --shadow-pop resolve where they are declared, so the
     region declares them again to take its dark line and shadow (1.30.0). */
  --shadow-banner: var(--shadow-pop), inset 0 0 0 1px var(--line);
  --shadow-launcher: 0 0 0 1px var(--line), 0 30px 80px -20px rgb(0 0 0 / 0.5);
  --card-edge: inset 0 0 0 1px var(--line);
  /* The same for the control edge and the key title bar, which resolve from --line, the accent
     wash and the text levels (1.31.0). */
  --control-edge: inset 0 0 0 1px var(--line);
  --w-bar-key: var(--accent-wash);
  --w-bar-key-text: var(--text);
  --w-bar-key-text-2: var(--text-2);
  --w-bar-key-text-3: var(--text-3);
  --avatar-fill: var(--accent);
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* Phone: the /next shell's own menu bar and dock grow for touch. */
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  :root {
    --menubar-h: 52px;
    --dock-h: 84px;
    /* Preset tokens whose phone value differs today (PLAT-1171). */
    --radius-dock: 24px;
    --type-greeting: 26px;
  }
}

/* Reduced motion: every animation and transition finishes at once. Scripted motion reads the
   --motion-* durations as 0 and does not start (DESIGN.md section 15). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important; /* raw: reduced motion turns animation off (PLAT-1147) */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; /* raw: reduced motion turns transitions off (PLAT-1147) */
  }
}

/* Pages of one app crossfade (1.27.0, D95). A link or a form that loads another page of the same
   app fades the old page into the new one over --motion-enter instead of flashing blank. Chrome
   and Safari run it, inside a desktop window's frame too; Firefox loads the page as before. Under
   reduced motion the rule is off, so the page changes at once (DESIGN.md section 15, rule 10). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-enter);
  animation-timing-function: var(--ease);
}