/* Baruly Trends tokens: the light and dark custom properties only, no element or class rule (KTD8).
   The reader root links this file then theme.css; the admin links this file and fonts.css only.
   Palette follows the Hampton reference the owner chose (joinhampton.com):
   warm paper #f1f2ef, deep green #031b1d, beige offset #d0b8a8, white cards.
   Light mode reads as ink on paper. Dark mode is the deep-green band, never flat black.
   Type follows the Wall Street Journal and Hampton: a serif for every word a reader reads (headlines and
   article text, Newsreader, OFL, self-hosted, a free stand-in for Escrow/Exchange and Financier) and a quiet
   sans for the interface (GT Standard M / Geist, standing in for Retina and Neue Montreal).
   This is a deliberate local customization of the Graphical theme (see GUI.md:
   the app's active tokens take precedence after customization). */

:root {
  color-scheme: light;
  --theme-name: "Baruly Trends";
  --neutral-1: #ffffff;
  --neutral-2: #f7f7f4;
  --neutral-3: #e9eae5;
  --neutral-4: #dcddd7;
  --neutral-5: #c3c6bf;
  --neutral-6: #8e938d;
  --neutral-7: #5f6662;
  --neutral-8: #3a4441;
  --neutral-9: #13292a;
  --neutral-10: #031b1d;
  --neutral-1-transparent: #ffffff33;
  --neutral-2-transparent: #f7f7f433;
  --neutral-3-transparent: #e9eae533;
  --neutral-4-transparent: #dcddd733;
  --neutral-5-transparent: #c3c6bf33;
  --neutral-6-transparent: #8e938d33;
  --neutral-7-transparent: #5f666233;
  --neutral-8-transparent: #3a444133;
  --neutral-9-transparent: #13292a33;
  --neutral-10-transparent: #031b1d33;
  --color-1: #031b1d;
  --color-2: #76ef6b;
  --color-3: #0e6b5c;
  --color-4: #e864ff;
  --color-5: #d0b8a8;
  --color-1-transparent: #031b1d33;
  --color-2-transparent: #76ef6b33;
  --color-3-transparent: #0e6b5c33;
  --color-4-transparent: #e864ff33;
  --color-5-transparent: #d0b8a833;
  --success: #2f9e62;
  --warning: #c97a1e;
  --error: #d43d4d;
  --error-transparent: #d43d4d33;
  --space-zero: 0px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --size-xxs: 10px;
  --line-xxs: 14px;
  --letter-spacing-xxs: 0.02em;
  --size-xs: 12px;
  --line-xs: 16px;
  --letter-spacing-xs: 0.01em;
  --size-s: 14px;
  --line-s: 20px;
  --letter-spacing-s: 0.01em;
  --size-m: 16px;
  --line-m: 24px;
  --letter-spacing-m: 0em;
  --size-l: 24px;
  --line-l: 32px;
  --letter-spacing-l: -0.01em;
  --size-xl: 36px;
  --line-xl: 40px;
  --letter-spacing-xl: -0.01em;
  --size-xxl: 48px;
  --line-xxl: 52px;
  --letter-spacing-xxl: -0.02em;
  --tracking-xs: -0.02em;
  --tracking-s: -0.01em;
  --tracking-m: 0em;
  --tracking-l: 0.01em;
  --tracking-xl: 0.02em;
  --radius-zero: 0px;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --border-none: 0px;
  --border-s: 1px;
  --border-m: 1px;
  --border-l: 2px;
  --border-default-color: rgb(3 27 29 / 0.12);
  --border-shadow-none: 0 0 0 0 transparent;
  --border-shadow-s: 0 0 0 1px rgb(3 27 29 / 0.12);
  --border-shadow-m: 0 0 0 1px rgb(3 27 29 / 0.12);
  --border-shadow-l: 0 0 0 2px rgb(3 27 29 / 0.12);
  --shadow-none: none;
  --shadow-s: 0px 1px 2px 0px rgb(3 27 29 / 0.06);
  --shadow-m: 0px 8px 24px 0px rgb(3 27 29 / 0.08);
  --shadow-l: 0px 12px 30px 0px rgb(3 27 29 / 0.10);
  --shadow-offset: -5px 5px 0 0 var(--color-5);
  --focus-ring-outline: 2px solid var(--cte-focus);
  --motion-duration: 150ms;
  --motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-duration-large: 300ms;
  --motion-easing-large: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-popup-scale: 0.96;
  --motion-press-distance: 1px;
  --weight-regular: 500;
  --weight-medium: 600;
  --weight-heavy: 800;
  --weight-display: 500;
  --icon-stroke-width: 2.5;
  --icon-bold-display: inline;
  --font-ui: "GT Standard M", "Sidebar Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand: "GT Standard M", "Sidebar Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-editorial: "Newsreader", "Iowan Old Style", Georgia, serif;
  --cte-font: "GT Standard M", "Sidebar Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-data: "Sidebar Geist Mono", monospace;
  --cte-canvas: #f1f2ef;
  --cte-surface: #ffffff;
  --cte-surface-muted: #e9eae5;
  --cte-chrome: #e9eae5;
  --cte-text: #031b1d;
  --cte-text-muted: #5f6662;
  --cte-border: rgb(3 27 29 / 0.12);
  --cte-accent: #031b1d;
  --cte-accent-text: #f1f2ef;
  --cte-link: #0e6b5c;
  --cte-danger: #d43d4d;
  --cte-focus: #0e6b5c;
  --cte-size: 16px;
  --cte-weight: 500;
  --cte-line: 24px;
  --cte-tracking: 0em;
  --field-bg: var(--neutral-1);
  --checkbox-bg: var(--neutral-1);
  --popover-bg: var(--neutral-1);
  --dialog-bg: var(--neutral-1);
  --dialog-backdrop: var(--neutral-10-transparent);
}

/* Dark: the Hampton deep-green band. Cream ink, beige accents, hairlines that show. */
html[data-theme="dark"] {
  color-scheme: dark;
  --neutral-1: #031b1d;
  --neutral-2: #072528;
  --neutral-3: #0c3034;
  --neutral-4: #143d41;
  --neutral-5: #24504f;
  --neutral-6: #5d7a77;
  --neutral-7: #9fb2ae;
  --neutral-8: #c9d3cf;
  --neutral-9: #e6ebe7;
  --neutral-10: #f1f2ef;
  --neutral-1-transparent: #031b1d33;
  --neutral-2-transparent: #07252833;
  --neutral-3-transparent: #0c303433;
  --neutral-4-transparent: #143d4133;
  --neutral-5-transparent: #24504f33;
  --neutral-6-transparent: #5d7a7733;
  --neutral-7-transparent: #9fb2ae33;
  --neutral-8-transparent: #c9d3cf33;
  --neutral-9-transparent: #e6ebe733;
  --neutral-10-transparent: #f1f2ef33;
  --color-1: #9fe3c4;
  --color-1-transparent: #9fe3c433;
  --color-3: #9fe3c4;
  --color-3-transparent: #9fe3c433;
  --border-default-color: rgb(241 242 239 / 0.12);
  --border-shadow-s: 0 0 0 1px rgb(241 242 239 / 0.12);
  --border-shadow-m: 0 0 0 1px rgb(241 242 239 / 0.12);
  --border-shadow-l: 0 0 0 2px rgb(241 242 239 / 0.12);
  --shadow-s: 0px 1px 2px 0px rgb(0 0 0 / 0.3);
  --shadow-m: 0px 8px 24px 0px rgb(0 0 0 / 0.35);
  --shadow-l: 0px 12px 30px 0px rgb(0 0 0 / 0.4);
  --cte-canvas: #031b1d;
  --cte-surface: #072528;
  --cte-surface-muted: #0c3034;
  --cte-chrome: #021416;
  --cte-text: #f1f2ef;
  --cte-text-muted: #9fb2ae;
  --cte-border: rgb(241 242 239 / 0.12);
  --cte-accent: #f1f2ef;
  --cte-accent-text: #031b1d;
  --cte-link: #9fe3c4;
  --cte-focus: #d0b8a8;
  --field-bg: var(--neutral-2);
  --checkbox-bg: var(--neutral-2);
  --popover-bg: var(--neutral-2);
  --dialog-bg: var(--neutral-2);
  --dialog-backdrop: rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --neutral-1: #031b1d;
    --neutral-2: #072528;
    --neutral-3: #0c3034;
    --neutral-4: #143d41;
    --neutral-5: #24504f;
    --neutral-6: #5d7a77;
    --neutral-7: #9fb2ae;
    --neutral-8: #c9d3cf;
    --neutral-9: #e6ebe7;
    --neutral-10: #f1f2ef;
    --neutral-1-transparent: #031b1d33;
    --neutral-2-transparent: #07252833;
    --neutral-3-transparent: #0c303433;
    --neutral-4-transparent: #143d4133;
    --neutral-5-transparent: #24504f33;
    --neutral-6-transparent: #5d7a7733;
    --neutral-7-transparent: #9fb2ae33;
    --neutral-8-transparent: #c9d3cf33;
    --neutral-9-transparent: #e6ebe733;
    --neutral-10-transparent: #f1f2ef33;
    --color-1: #9fe3c4;
    --color-1-transparent: #9fe3c433;
    --color-3: #9fe3c4;
    --color-3-transparent: #9fe3c433;
    --border-default-color: rgb(241 242 239 / 0.12);
    --border-shadow-s: 0 0 0 1px rgb(241 242 239 / 0.12);
    --border-shadow-m: 0 0 0 1px rgb(241 242 239 / 0.12);
    --border-shadow-l: 0 0 0 2px rgb(241 242 239 / 0.12);
    --shadow-s: 0px 1px 2px 0px rgb(0 0 0 / 0.3);
    --shadow-m: 0px 8px 24px 0px rgb(0 0 0 / 0.35);
    --shadow-l: 0px 12px 30px 0px rgb(0 0 0 / 0.4);
    --cte-canvas: #031b1d;
    --cte-surface: #072528;
    --cte-surface-muted: #0c3034;
    --cte-chrome: #021416;
    --cte-text: #f1f2ef;
    --cte-text-muted: #9fb2ae;
    --cte-border: rgb(241 242 239 / 0.12);
    --cte-accent: #f1f2ef;
    --cte-accent-text: #031b1d;
    --cte-link: #9fe3c4;
    --cte-focus: #d0b8a8;
    --field-bg: var(--neutral-2);
    --checkbox-bg: var(--neutral-2);
    --popover-bg: var(--neutral-2);
    --dialog-bg: var(--neutral-2);
    --dialog-backdrop: rgb(0 0 0 / 0.5);
  }
}