/* SPDX-License-Identifier: AGPL-3.0-only */
@font-face {
  font-family: 'Petrichor Space';
  src: url('./space-grotesk-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Petrichor Display';
  src: url('./playfair-display-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

/* Twenty v2.9.0 defines these tokens on html.light / html.dark. Brand is orthogonal
   to color scheme. Semantic status/tag/chart colors deliberately retain their meaning. */
html[data-crm-theme='petrichor'] {
  --petri-bone: #f1ead6;
  --petri-cream: #f8f3e5;
  --petri-paper: #fffdf7;
  --petri-ink: #0a0a0a;
  --petri-steel: #5e5b51;
  --petri-muted: #777365;
  --petri-rain: #d6d0bd;
  --petri-line: #b9b29e;
  --petri-wash: rgb(94 91 81 / 6%);
  --petri-hover: rgb(94 91 81 / 10%);
  --petri-selection: #e9f3bf;
  --petri-link: #2845ff;
  --petri-shadow: #292a22;
  --petri-acid: #caff33;
  --t-font-family: 'Petrichor Space', 'Inter', sans-serif;
  --t-background-noisy: var(--petri-bone);
  --t-background-primary: var(--petri-paper);
  --t-background-secondary: var(--petri-cream);
  --t-background-tertiary: var(--petri-bone);
  --t-background-quaternary: var(--petri-rain);
  --t-background-inverted-primary: var(--petri-ink);
  --t-background-inverted-secondary: var(--petri-steel);
  --t-background-transparent-primary: var(--petri-paper);
  --t-background-transparent-secondary: var(--petri-cream);
  --t-background-transparent-strong: rgb(94 91 81 / 24%);
  --t-background-transparent-medium: rgb(94 91 81 / 14%);
  --t-background-transparent-light: var(--petri-hover);
  --t-background-transparent-lighter: var(--petri-wash);
  --t-font-color-primary: var(--petri-ink);
  --t-font-color-secondary: var(--petri-steel);
  --t-font-color-tertiary: var(--petri-muted);
  --t-font-color-light: var(--petri-muted);
  --t-font-color-extra-light: var(--petri-line);
  --t-font-color-inverted: var(--petri-paper);
  --t-border-color-light: var(--petri-rain);
  --t-border-color-medium: var(--petri-rain);
  --t-border-color-strong: var(--petri-line);
  --t-border-color-transparent-strong: var(--petri-line);
  --t-border-color-inverted: var(--petri-ink);
  --t-border-radius-sm: 5px;
  --t-border-radius-md: 11px;
  --t-box-shadow-light: 2px 2px 0 var(--petri-rain);
  --t-box-shadow-strong: 3px 3px 0 var(--petri-shadow);
  --t-box-shadow-super-heavy: 6px 6px 0 var(--petri-shadow);
  --t-accent-primary: var(--petri-selection);
  --t-accent-secondary: var(--petri-selection);
  --t-accent-tertiary: var(--petri-wash);
  --t-accent-quaternary: var(--petri-cream);
  --t-accent-accent1: var(--petri-paper);
  --t-accent-accent2: var(--petri-cream);
  --t-accent-accent3: var(--petri-selection);
  --t-accent-accent4: var(--petri-selection);
  --t-accent-accent5: var(--petri-selection);
  --t-accent-accent6: var(--petri-rain);
  --t-accent-accent7: var(--petri-line);
  --t-accent-accent8: var(--petri-steel);
  /* Solid accent is also used with inverted labels: ink preserves their contrast. */
  --t-accent-accent9: var(--petri-ink);
  --t-accent-accent10: var(--petri-steel);
  --t-accent-accent11: var(--petri-link);
  --t-accent-accent12: var(--petri-ink);
  --t-accent-accent3570: var(--petri-steel);
  --t-accent-accent4060: var(--petri-steel);
  --theme-light-background-tertiary: var(--petri-bone);
  --theme-dark-background-tertiary: var(--petri-bone);
}
html.dark[data-crm-theme='petrichor'] {
  --petri-bone: #10110e;
  --petri-cream: #171813;
  --petri-paper: #1f201a;
  --petri-ink: #f4f0e3;
  --petri-steel: #d3cfc2;
  --petri-muted: #aeaa9d;
  --petri-rain: #37382f;
  --petri-line: #5d5f53;
  --petri-wash: rgb(244 240 227 / 3%);
  --petri-hover: rgb(244 240 227 / 7%);
  --petri-selection: #354021;
  --petri-link: #b3c2ff;
  --petri-shadow: #37382f;
  --t-background-transparent-strong: rgb(244 240 227 / 22%);
  --t-background-transparent-medium: rgb(244 240 227 / 12%);
}
html[data-crm-theme='petrichor'] body { background: var(--petri-bone); }
html[data-crm-theme='petrichor'] ::selection { background: #caff33; color: #10110e; }
html[data-crm-theme='petrichor'] [data-click-outside-id='navigation-drawer'] {
  background: var(--petri-cream);
  border-right: 1px solid var(--petri-rain);
  box-sizing: border-box;
}
html[data-crm-theme='petrichor'] .navigation-drawer-item {
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-block: 2px;
  min-height: 32px;
}
html[data-crm-theme='petrichor'] .navigation-drawer-item[aria-selected='true'] {
  background: var(--petri-acid);
  color: #10110e;
  border-color: var(--petri-line);
}
html[data-crm-theme='petrichor'] [data-testid='workspace-dropdown'] {
  font-family: 'Petrichor Display', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.04em;
}
html[data-crm-theme='petrichor'] [data-click-outside-id='page-action-container'] button[aria-label^='Create new'] {
  --btn-bg: #caff33 !important;
  --btn-color: #10110e !important;
  --btn-border-color: var(--petri-line) !important;
  --btn-hover-bg: #bce92e !important;
  --btn-active-bg: #a8db1f !important;
  --btn-box-shadow: 2px 2px 0 var(--petri-shadow) !important;
  --tw-button-color: #10110e !important;
}

/* Appearance UI exists in both brands and inherits the native color scheme. */
#crm-appearance {
  flex: 0 0 auto;
  margin: 8px 8px 0 0;
  border-top: 1px solid var(--t-border-color-medium);
  padding-top: 10px;
}
#crm-appearance-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--t-font-color-secondary);
  font: 12px var(--t-font-family);
  cursor: pointer;
}
#crm-appearance-trigger svg { flex-shrink: 0; }
#crm-appearance-trigger:hover { background: var(--t-background-transparent-light); }
#crm-appearance-current {
  margin-left: auto;
  font-size: 10px;
  color: var(--t-font-color-tertiary);
}
.crm-appearance-collapsed .crm-appearance-label,
.crm-appearance-collapsed #crm-appearance-current { display: none; }
#crm-appearance-dialog {
  position: fixed;
  inset: auto auto 66px 12px;
  margin: 0;
  width: min(340px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 90px);
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid var(--t-border-color-strong);
  border-radius: 12px;
  background: var(--t-background-primary);
  color: var(--t-font-color-primary);
  box-shadow: var(--t-box-shadow-strong);
  font: 13px/1.5 var(--t-font-family);
}
#crm-appearance-dialog::backdrop { background: rgb(0 0 0 / 18%); }
.crm-appearance-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.crm-appearance-eyebrow { color: var(--t-font-color-secondary); font-size: 9px; letter-spacing: .16em; }
#crm-appearance-title { margin: 3px 0 0; font-size: 23px; font-weight: 600; letter-spacing: -.04em; }
html[data-crm-theme='petrichor'] #crm-appearance-title { font-family: 'Petrichor Display', Georgia, serif; }
.crm-appearance-close { font: 24px/1 var(--t-font-family); color: var(--t-font-color-secondary); border: 0; background: transparent; border-radius: 5px; width: 30px; height: 30px; cursor: pointer; }
.crm-appearance-close:hover { background: var(--t-background-transparent-light); }
.crm-appearance-description { color: var(--t-font-color-secondary); margin: 8px 0 18px; font-size: 12px; }
.crm-theme-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-theme-choice { min-width: 0; padding: 7px; border: 1px solid var(--t-border-color-medium); border-radius: 8px; background: var(--t-background-primary); color: var(--t-font-color-primary); text-align: left; font: inherit; cursor: pointer; }
.crm-theme-choice[aria-pressed='true'] { border-color: var(--t-font-color-primary); box-shadow: 0 0 0 1px var(--t-font-color-primary); }
.crm-theme-choice:hover { background: var(--t-background-secondary); }
.crm-theme-preview { display: flex; height: 74px; border: 1px solid rgb(0 0 0 / 12%); border-radius: 4px; overflow: hidden; padding: 8px 6px; box-sizing: border-box; gap: 6px; }
.crm-theme-preview-classic { background: #f1f1f1; }
.crm-theme-preview-petrichor { background: #f1ead6; }
.crm-theme-preview i { width: 24%; border-radius: 2px; background: linear-gradient(#d9d9d9 0 7px, transparent 7px 13px, #dedede 13px 17px, transparent 17px 23px, #dedede 23px 27px, transparent 27px); }
.crm-theme-preview-petrichor i { background: linear-gradient(#caff33 0 9px, transparent 9px 15px, #b9b29e 15px 19px, transparent 19px 25px, #b9b29e 25px 29px, transparent 29px); }
.crm-theme-preview > span { display: flex; flex-direction: column; gap: 7px; flex: 1; background: #fff; border-radius: 3px; padding: 8px 6px; }
.crm-theme-preview-petrichor > span { background: #fffdf7; border: 1px solid #b9b29e; box-shadow: 2px 2px 0 #292a22; }
.crm-theme-preview b { height: 3px; background: #dedede; }
.crm-theme-preview-petrichor b { background: #d6d0bd; }
.crm-theme-preview-petrichor b:first-child { background: #292a22; width: 65%; }
.crm-theme-choice-title { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; font-weight: 600; }
.crm-theme-check { visibility: hidden; }
[aria-pressed='true'] > .crm-theme-choice-title .crm-theme-check { visibility: visible; }
.crm-theme-choice-description { display: block; margin: 2px 0; font-size: 10px; color: var(--t-font-color-secondary); }
.crm-appearance-mode { margin: 16px 0 0; font-size: 11px; color: var(--t-font-color-secondary); }
#crm-appearance-status { margin: 10px 0 0; font-size: 10px; color: var(--t-font-color-tertiary); }
#crm-appearance-trigger:focus-visible,
#crm-appearance-dialog button:focus-visible { outline: 2px solid var(--t-font-color-primary); outline-offset: 3px; }
@media (forced-colors: active) {
  .crm-theme-choice[aria-pressed='true'] { border: 3px solid Highlight; }
}