/* Monaloop design tokens.
   Everything up to the "Monaloop" block is Paraloop's src/design-tokens.css, apart from the font paths:
   change the family's look there first and copy it here, so the apps stay one family.
   Served by Frappe at /assets/monaloop/css/design-tokens.css; the fonts sit next to it in ../fonts. */
/* Locally served OFL typeface; no third-party requests in the private app. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.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: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.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: "DM Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-italic-latin-ext.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: "DM Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dm-sans-italic-latin.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;
}
/* Midnight, the look of the loop family (Paraloop/assets/branding/README.md), in a light and a dark theme.
   Each colour is light-dark(light, dark): the page follows the system unless data-theme pins a theme.
   Contrast: text 4.5:1 or more on the surfaces it sits on, field borders and focus rings 3:1. */
:root {
  color-scheme: light dark;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  /* Headings use the wordmark's face, a step bolder and as tightly set. */
  --font-display: var(--font-sans);
  --display-tracking: -0.022em;

  /* The brand itself: Midnight's tile, the wordmark's ink and the rings. */
  --midnight: #22305f;
  --midnight-deep: #0a1130;
  --ring-start: light-dark(#4daaf3, #86d6fb);
  --ring-end: light-dark(#2563de, #3a86ee);
  --brand-gradient: linear-gradient(135deg, var(--ring-start), var(--ring-end));

  /* Actions: the rings' blue. White text reads 5.4:1 on light and 4.7:1 on dark. */
  --primary: light-dark(#2563de, #2f6fe4);
  --primary-hover: light-dark(#1f55c4, #2862d4);
  --primary-pressed: light-dark(#1b48ad, #2457bf);
  --primary-foreground: #ffffff;
  --primary-subtle: light-dark(#edf3fe, #19295a);
  --primary-subtle-hover: light-dark(#e0eafd, #20336c);
  --primary-disabled: light-dark(#d8e3f8, #1d2742);
  --primary-disabled-foreground: light-dark(#4c6390, #8691b0);
  /* Accent text: links, text buttons, the selected icon; and the stronger ink on --primary-subtle. */
  --accent-text: light-dark(#2563de, #7cb5fa);
  --accent-text-strong: light-dark(#1a3a94, #d4e5ff);
  --focus: light-dark(#2563de, #5b9bf5);
  --focus-halo: light-dark(#2563de33, #5b9bf540);

  /* Surfaces, from the window's chrome up to what floats over it. */
  --background: light-dark(#f6f7fb, #0a0e1c);
  --surface: light-dark(#ffffff, #0f1426);
  --surface-raised: light-dark(#ffffff, #161d33);
  --surface-muted: light-dark(#eff1f6, #1c2440);
  /* A row or option under the pointer: a shade down on light, a step up on dark (above raised menus too). */
  --surface-hover: light-dark(#f6f7fb, #1f2846);
  /* Lifted off a tinted track or row: the chosen segment of a segmented control, or a button or label on a row under
     the pointer. White on light like --surface, but a step up on dark, where --surface would sink into a hole. */
  --surface-selected: light-dark(#ffffff, #2b3557);
  /* A small label over a canvas, such as a tree connection's name. */
  --tooltip: light-dark(#141d45, #2b3557);
  --tooltip-foreground: light-dark(#ffffff, #e7eaf4);
  --scrim: light-dark(#f6f7fba6, #050812b3);
  --scrim-light: light-dark(#f6f7fb66, #05081280);

  /* Ink: the wordmark's navy on light, Midnight's mist on dark. */
  --foreground: light-dark(#141d45, #e7eaf4);
  --secondary: light-dark(#4a5274, #b0b7cd);
  --muted: light-dark(#646c8a, #8b93ad);
  --border: light-dark(#e3e6ef, #232b45);
  --control-border: light-dark(#8890ab, #636d90);

  --error: light-dark(#b32230, #ff8b94);
  --error-solid: light-dark(#b32230, #c8394a);
  --error-subtle: light-dark(#fff4f4, #3a1621);
  --success: light-dark(#1f7c43, #5ccb8e);
  --warning: light-dark(#82561d, #e8b765);
  --warning-subtle: light-dark(#fff8ec, #30240e);

  /* Soft avatar colours, one per person (avatarHue): blue, teal, green, ochre, clay, rose, violet, slate.
     Each initial reads at 6:1 or more on its tint, in both themes. */
  --avatar-1-bg: light-dark(#e4edfb, #1a2b4d);
  --avatar-1-fg: light-dark(#1f4f96, #a9c9f6);
  --avatar-2-bg: light-dark(#daf0ec, #123633);
  --avatar-2-fg: light-dark(#1b6158, #8fd8cb);
  --avatar-3-bg: light-dark(#e3f0de, #1c3420);
  --avatar-3-fg: light-dark(#2f5f2c, #a8d79c);
  --avatar-4-bg: light-dark(#f3ebd3, #352b12);
  --avatar-4-fg: light-dark(#6b5115, #e3c573);
  --avatar-5-bg: light-dark(#fbe5d9, #3e2219);
  --avatar-5-fg: light-dark(#8a3e1c, #f2ad8d);
  --avatar-6-bg: light-dark(#f8e0e6, #3d1f2b);
  --avatar-6-fg: light-dark(#8b2b46, #f2a7bc);
  --avatar-7-bg: light-dark(#ebe3f7, #2b2347);
  --avatar-7-fg: light-dark(#58398c, #c9b5f2);
  --avatar-8-bg: light-dark(#e3e7f1, #232a40);
  --avatar-8-fg: light-dark(#3b4870, #b6c0dc);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;
  --radius-auth: 32px;
  /* Navy-tinted shadows on light; on dark, depth comes from --surface-raised and a deeper shadow. */
  --shadow-xs: 0 1px 2px light-dark(#141d450f, #00000052);
  --shadow-popover: 0 8px 20px -4px light-dark(#141d451f, #000000a3);
  --shadow-modal: 0 24px 30px light-dark(#141d4529, #000000b3);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --sidebar-width: 255px;
  --page-inset: 40px;
  --control-height: 32px;
  --row-height: 36px;
  --motion: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Monaloop: the client portal is used on a phone, so its controls are larger than the Mac apps'. */
:root {
  --touch-target: 48px;
  --touch-target-min: 44px;
  --page-inset-mobile: 20px;
}