/* ============================================================
   Kheel — design tokens (Sand & Ink)

   The colour values are the application's own, from kheel-app's
   kheel-app-jui/src/jui/resources/kheel/app/jui/public/theme.css
   (section 2, brand tokens): warm ink #2A2622 for headings and dark
   blocks, action blue #2F5BB7, and greige neutrals (a warm grey with
   only a hint of beige) on a near-white canvas. Greige is the base; the
   application's Paper palette is below, switched on by
   data-neutrals="paper" on <html> (site/layout.html), as the application
   switches on its body. Removing that attribute goes back to greige. The names are those of the earlier Axiom palette, as in the
   application: the ink ramp keeps the --color-navy-* names and the
   stone ramp --color-slate-*. When the application's theme changes,
   change the values here to match.
   ============================================================ */

/* ---------- Fonts: Geist, Geist Mono, Newsreader (as the application) ----------
   Served from assets/fonts/ (SIL Open Font License, licences beside them),
   the same files and rules as kheel-app's design system (tokens-kheel.md), so
   no visitor's browser asks a third party for them. Newsreader is italic only:
   the site uses it for nothing else. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin-wght-normal.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: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin-ext-wght-normal.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: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-mono-latin-wght-normal.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: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-mono-latin-ext-wght-normal.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: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-latin-italic.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: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-latin-ext-italic.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; }

:root {
  /* ===== Color · Brand ===== */
  --color-navy-950: #1C1916;   /* near-black navy, used for hero/dark */
  --color-navy-900: #2A2622;   /* primary brand navy (Stripe-like) */
  --color-navy-800: #36312C;
  --color-navy-700: #45403A;
  --color-navy-600: #57514A;

  --color-blue-700: #244892;
  --color-blue-600: #2F5BB7;   /* primary action blue */
  --color-blue-500: #4A72C6;
  --color-blue-400: #7393D4;
  --color-blue-300: #A2B8E3;
  --color-blue-200: #C6D4EF;
  --color-blue-100: #E3EAF8;
  --color-blue-50:  #F1F5FC;

  /* ===== Color · Neutrals (greige) ===== */
  --color-slate-950: #161413;
  --color-slate-900: #211E1C;
  --color-slate-800: #2D2927;
  --color-slate-700: #423D3A;
  --color-slate-600: #59534F;
  --color-slate-500: #7C7570;
  --color-slate-400: #A29A94;
  --color-slate-300: #C8C0B9;
  --color-slate-200: #DDD6D0;
  --color-slate-150: #E5E0DA;
  --color-slate-100: #ECE6E2;
  --color-slate-75:  #F0ECE9;
  --color-slate-50:  #F4F1EE;
  --color-white:     #FFFFFF;

  /* ===== Color · Semantic ===== */
  --color-success-700: #0B6B47;
  --color-success-600: #0F8C5C;
  --color-success-100: #E1F4EC;

  --color-warning-700: #8A5A14;
  --color-warning-600: #B8761A;
  --color-warning-100: #FBEFD8;

  --color-danger-700:  #97243A;
  --color-danger-600:  #C0334B;
  --color-danger-100:  #FBE3E7;

  --color-info-700:    var(--color-blue-700);
  --color-info-600:    var(--color-blue-600);
  --color-info-100:    var(--color-blue-100);

  /* ===== Color · Semantic tokens (light) ===== */
  --bg-canvas:      #F9F7F5;        /* app shell */
  --bg-canvas-soft: #FCFAF9;        /* one step lighter than canvas */
  --bg-canvas-faint: #FFFEFD;       /* one step lighter again */
  --bg-surface:     #FFFFFF;        /* cards / panels */
  --bg-sunken:      #EEEAE6;        /* inputs, code blocks */
  --bg-elevated:    #FFFFFF;        /* popovers, menus */
  --bg-inverse:     #2A2622;        /* dark blocks within light UI */
  --bg-slate:       #1E293B;        /* slate: the application's navigation column (--nav-bg there); the site's dark bands */

  --fg-1:           #2A2622;        /* primary text / headings */
  --fg-2:           var(--color-slate-600);  /* secondary text / labels */
  --fg-3:           var(--color-slate-500);  /* tertiary / metadata */
  --fg-4:           var(--color-slate-400);  /* placeholder / disabled */
  --fg-on-inverse:  #FFFFFF;
  --fg-on-brand:    #FFFFFF;
  --fg-link:        #244892;       /* darkened brand blue for AA text contrast on white */

  --border-subtle:  var(--color-slate-100);
  --border-default: var(--color-slate-200);
  --border-strong:  var(--color-slate-300);
  --border-focus:   #2F5BB7;
  --border-inverse: #45403A;

  --brand-primary:        #2A2622;
  --brand-primary-hover:  #36312C;
  --brand-primary-press:  #1C1916;
  --brand-accent:         #2F5BB7;
  --brand-accent-hover:   #244892;
  --brand-accent-press:   #1D3A75;
  --brand-accent-soft:    #E3EAF8;

  /* ===== Typography · Families ===== */
  --font-sans:    'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ===== Typography · Scale (modular, ~1.18) ===== */
  --fs-12: 0.75rem;   /* 12 */
  --fs-13: 0.8125rem; /* 13 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-15: 0.9375rem; /* 15 */
  --fs-16: 1rem;      /* 16 */
  --fs-18: 1.125rem;  /* 18 */
  --fs-20: 1.25rem;   /* 20 */
  --fs-24: 1.5rem;    /* 24 */
  --fs-28: 1.75rem;   /* 28 */
  --fs-32: 2rem;      /* 32 */
  --fs-40: 2.5rem;    /* 40 */
  --fs-48: 3rem;      /* 48 */
  --fs-56: 3.5rem;    /* 56 */
  --fs-72: 4.5rem;    /* 72 */

  /* ===== Typography · Weights ===== */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ===== Typography · Line heights ===== */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ===== Typography · Letter spacing ===== */
  --ls-tighter: -0.03em;   /* display */
  --ls-tight:   -0.018em;  /* large headings */
  --ls-normal:  -0.005em;
  --ls-wide:    0.02em;
  --ls-caps:    0.08em;    /* uppercase eyebrows */

  /* ===== Spacing (4px base) ===== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ===== Radii ===== */
  --radius-none: 0;
  --radius-xs:   3px;     /* badges, inline tags */
  --radius-sm:   5px;     /* buttons, inputs */
  --radius-md:   8px;     /* cards */
  --radius-lg:   12px;    /* modals, large surfaces */
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ===== Borders ===== */
  --bw-hairline: 1px;
  --bw-strong:   1.5px;
  --bw-focus:    2px;

  /* ===== Shadows (warm, low-opacity, restrained) ===== */
  --shadow-xs:   0 1px 0 rgba(42, 38, 34, 0.04);
  --shadow-sm:   0 1px 2px rgba(42, 38, 34, 0.06), 0 1px 0 rgba(42, 38, 34, 0.03);
  --shadow-md:   0 4px 10px -2px rgba(42, 38, 34, 0.08), 0 2px 4px -1px rgba(42, 38, 34, 0.04);
  --shadow-lg:   0 16px 32px -8px rgba(42, 38, 34, 0.14), 0 4px 8px -2px rgba(42, 38, 34, 0.06);
  --shadow-xl:   0 28px 56px -16px rgba(42, 38, 34, 0.22), 0 8px 16px -4px rgba(42, 38, 34, 0.08);
  --shadow-focus: 0 0 0 3px rgba(47, 91, 183, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ===== Motion ===== */
  --ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-page:    520ms;

  /* ===== Z-index ===== */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;

  /* ===== Layout ===== */
  --content-narrow: 720px;
  --content-base:   1080px;
  --content-wide:   1280px;
  --content-max:    1440px;

  /* ===== Elevation (the application's) =====
     A card on the canvas is lifted rather than outlined: -1 for a card inside
     another surface, -2 for one sitting directly on the canvas. */
  --lift-1: 0 1px 2px rgba(42, 38, 34, 0.045), 0 4px 12px -8px rgba(42, 38, 34, 0.14);
  --lift-2: 0 1px 2px rgba(42, 38, 34, 0.05),  0 10px 26px -16px rgba(42, 38, 34, 0.20);
  --radius-card: 0.95rem;

  /* The grid behind heroes and closing sections, drawn in the neutrals. */
  --hero-bg: url("bg-hero-greige.svg");
}

/* ============================================================
   Neutral palettes
   As the application's theme.css, section 4: each replaces only the canvas,
   the sunken fill and the stone ramp (which the borders and secondary text
   are drawn from), so ink, blue, slate and the semantic colours stay.
   Paper: barely warm, nearly white.
   ============================================================ */
:root[data-neutrals="paper"] {
  --bg-canvas: #FBFAF8;
  --bg-canvas-soft: #FDFCFB;
  --bg-canvas-faint: #FFFEFD;
  --bg-sunken: #F4F3EF;
  --color-slate-950: #161413;
  --color-slate-900: #201E1D;
  --color-slate-800: #2C2A27;
  --color-slate-700: #403E3A;
  --color-slate-600: #575450;
  --color-slate-500: #797671;
  --color-slate-400: #9F9B95;
  --color-slate-300: #C4C1BA;
  --color-slate-200: #E9E7E1;
  --color-slate-150: #EEECE8;
  --color-slate-100: #F3F0EC;
  --color-slate-75:  #F6F4F1;
  --color-slate-50:  #F8F7F4;
  --hero-bg: url("bg-hero-paper.svg");
}

/* ============================================================
   Semantic type roles
   ============================================================ */

.t-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}
.t-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
}
.t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  font-feature-settings: "ss01", "cv11";
}
.t-serif {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--fg-1);
}

/* ============================================================
   Shared base
   ============================================================ */
.ax-base {
  font-family: var(--font-sans);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}