/* Handem design tokens. Colours, fonts and edges are the fern landing page's (handem/fern/fern.css). */

@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* colour: brand (fern landing page) */
  --bg: #F4F3EE;
  --soft: #ECE9E2;
  --ink: #1C1B19;
  --ink-2: #5F5951;
  --ink-3: #6B645B;
  --line: #E3DED4;
  --brand: #1F6B45;
  --brand-ink: #17573A;
  --brand-soft: #EEF6D8;
  --brand-light: #8FC29F;
  --cream: #F7F6F1;
  --lime: #C9F27A;
  --mustard: #D9A441;
  --orange: #E8622A;
  --ok: #2E9A62;
  --ok-soft: #E3F1E7;
  --grad: linear-gradient(180deg, #23744A 0%, #1F6B45 100%);

  /* colour: app additions */
  --surface: #fff;
  --surface-2: #FAF9F6;         /* quiet panels, table heads */
  --ok-ink: #1B6B43;
  --warn: #D9A441;
  --warn-ink: #7A5408;
  --warn-soft: #FBF0D9;
  --danger: #B42318;
  --danger-ink: #912018;
  --danger-soft: #FDECEA;
  --neutral: #A39E95;
  --neutral-soft: #ECE9E2;
  /* pipeline stages */
  --st-anfrage: #A39E95;
  --st-termin: #D9A441;
  --st-angebot: #E8622A;
  --st-rechnung: #5F5951;
  --st-bezahlt: #2E9A62;

  /* type */
  --display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;  /* headings: weight 650, tight tracking */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-2xs: .6875rem;  /* 11 */
  --t-xs: .75rem;     /* 12 */
  --t-sm: .8125rem;   /* 13 */
  --t-base: .9375rem; /* 15 */
  --t-md: 1rem;       /* 16 */
  --t-lg: 1.125rem;   /* 18 */
  --t-xl: 1.375rem;   /* 22 */
  --t-2xl: 1.75rem;   /* 28 */
  --t-3xl: 2.125rem;  /* 34 */

  /* spacing */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;

  /* radius */
  --r-xs: .3rem;
  --r-sm: .5rem;
  --r-md: .625rem;
  --r-lg: .75rem;
  --r-xl: 1rem;
  --r-pill: .5rem;   /* fern has rounded rectangles, no pills */

  /* shadow and edges (fern: 1px lines, little shadow) */
  --edge: rgba(28, 27, 25, .1);
  --edge-strong: rgba(28, 27, 25, .17);
  --card: inset 0 0 0 1px var(--edge), 0 1px 2px rgba(28, 27, 25, .05);
  --card-hover: inset 0 0 0 1px var(--edge-strong), 0 1px 2px rgba(28, 27, 25, .05), 0 10px 24px -14px rgba(28, 27, 25, .2);
  --well: #FAF9F6;
  --well-edge: inset 0 0 0 1px var(--edge);
  --icon-well: inset 0 0 0 1px var(--edge-strong), 0 1px 2px rgba(28, 27, 25, .07);
  --shadow-sm: 0 1px 2px rgba(28, 27, 25, .07);
  --shadow: 0 1px 2px rgba(28, 27, 25, .05), 0 12px 32px -12px rgba(28, 27, 25, .14);
  --shadow-lg: 0 2px 6px rgba(28, 27, 25, .05), 0 30px 70px -20px rgba(28, 27, 25, .28);
  --ring: 0 0 0 3px rgba(31, 107, 69, .2);

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .2s;

  /* layout */
  --side-w: 15rem;
  --side-w-min: 4.5rem;
  --top-h: 4.25rem;
  --tabbar-h: 4rem;
  --content-w: 120rem;  /* fills the screen next to the sidebar up to 1920px wide content */
  --gutter: clamp(1rem, 2.5vw, 2.5rem);
  --z-top: 20;
  --z-side: 30;
  --z-tabbar: 40;
  --z-toast: 60;
}