/* ============================================================
   TIML — theme tokens (variables.css)

   Verbatim port of the design handoff's Classical design system
   (design/_ds/classical-<id>/styles.css :root), plus the one page-local
   value that system does not carry: --timl-ink, the deep warm near-black
   the design uses for the nav, hero, Kite Wars section and footer.

   Loaded site-wide BEFORE theme.css (manifest includefiles order matters).
   The :root block is ALSO inlined into every marketing document by
   marketing/_doc-top.tpl — the whole design speaks in var(--…), so one
   stale or blocked copy of this file would collapse every value at once
   and render the site as unstyled Times.

   Fonts are self-hosted from fonts/ (see the block below) and declared with
   @font-face here rather than @import: @import serialises the download behind
   this file and is the first thing content blockers strip.
   ============================================================ */

/* ---- Self-hosted webfonts -------------------------------------------------
   Cormorant Garamond (headings) + Lora (body), the handoff's two faces, weights
   400 and 600. SELF-HOSTED on purpose, not loaded from fonts.googleapis.com:
   the Privacy page tells visitors this site sets no cross-site identifiers and
   needs no consent banner, and a Google Fonts request hands Google every
   visitor's IP — which would make that claim untrue. It also removes a
   third-party dependency from first paint.

   Only the `latin` and `latin-ext` subsets ship (252 KB total); latin-ext is
   what carries Romanian s-comma/t-comma and the accents the other five
   languages need. A typical English visit downloads just the two 400-weight
   latin files, ~72 KB. Regenerate by re-fetching the Google Fonts css2 URL for
   these families and keeping the latin/latin-ext @font-face blocks.

   Both families are licensed under the SIL Open Font License 1.1, which permits
   self-hosting — see fonts/README.md.

   NOTE: these @font-face rules live OUTSIDE the :root block on purpose. The
   marketing pages inline only the :root block as critical CSS (see
   marketing/_doc-top.tpl), so the faces load from this file for both the
   marketing pages and SE's own pages.
   ---------------------------------------------------------------------------- */

/* Cormorant Garamond 400 — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-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;
}
/* Cormorant Garamond 400 — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/cormorant-garamond-400-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;
}
/* Cormorant Garamond 600 — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-600-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;
}
/* Cormorant Garamond 600 — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-600-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;
}
/* Lora 400 — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lora-400-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;
}
/* Lora 400 — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lora-400-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;
}
/* Lora 600 — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/lora-600-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;
}
/* Lora 600 — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/lora-600-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;
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  /* Page-local ink: the near-black behind the nav, hero, Kite Wars band and
     footer. Not a Classical token — the design names it as its own value. */
  --timl-ink: #17150f;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  /* The site sets 400 at every display size on purpose: the system's 600
     ceiling is deliberately not used for headings here (handoff, Type). 600
     survives only on solid-gold buttons, which need the weight at 15px. */
  --font-heading-weight: 400;
  --font-body: "Lora", Georgia, serif;

  /* Spacing scale, density 1.15x. */
  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — the design uses only --shadow-md, and only on card hover. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Content column (handoff: max-width 1240px, padding clamp(20px,5vw,72px)). */
  --wrap: 1240px;
  --wrap-pad: clamp(20px, 5vw, 72px);
}

/* ---- SE's own theme tokens (--theme-*) -------------------------------------
   SocialEngine's stock stylesheet (externals/styles/styles.css, ~500 KB) makes
   1,270 var(--theme-…) references across 57 distinct tokens, and a theme is
   expected to define them. This theme was derived from the Kite Wars one, which
   never did — so on SE's OWN pages (/login, /user/auth/forgot, the /admin
   sign-in) every one of those references collapsed and the pages rendered with
   no colours, backgrounds, borders or button styling. Reported from production.

   SCOPED TO body:not([data-page]) on purpose, two reasons:
     • the marketing pages already speak Classical tokens and must not inherit a
       second, competing set;
     • marketing/_doc-top.tpl inlines every root-scoped block it finds as critical
       CSS, so defining these at root scope would add ~100 unused declarations to
       every marketing document.
       (Do NOT write the selector-plus-braces literally anywhere in a comment in
       this file — the inliner matches that pattern with a regex and would happily
       inline the fragment out of the comment. It did, the first time this was
       written.)
   Verified safe: no rule in SE's stylesheet targets html, :root or body itself
   with a --theme-* value — every usage is on a descendant, so inheritance from
   body covers all of them.

   Kept in variables.css rather than custom.css because SE pages load this file
   through a direct <link>, not the aggregated styles_N.css bundle — so it takes
   effect on deploy without depending on a cache regeneration.

   Values map SE's vocabulary onto the handoff's Classical palette. These are
   utility pages (sign in, password reset), so the mapping is deliberately
   restrained: light ground, ink chrome, one gold primary button.
   ---------------------------------------------------------------------------- */
body:not([data-page]) {
  /* layout */
  --theme-main-width: var(--wrap);
  --theme-content-width: var(--wrap);
  --theme-content-columns-left-width: 260px;
  --theme-content-columns-right-width: 300px;
  --theme-body-background-color: var(--color-bg);
  --theme-color: var(--color-accent-700);

  /* header / footer chrome — matches the timl.header / timl.footer widgets */
  --theme-header-background-color: var(--timl-ink);
  --theme-header-menu-background-color: var(--timl-ink);
  --theme-header-menu-link-background-color: transparent;
  --theme-header-menu-link-background-color-hover: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --theme-header-menu-link-color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  --theme-header-menu-link-hover-color: var(--color-accent-300);
  --theme-header-menu-link-size: 0.875rem;
  --theme-header-menu-link-decoration: none;
  --theme-header-menu-link-hover-decoration: none;
  --theme-header-menu-font-family: var(--font-body);
  --theme-topbar-background-color: var(--timl-ink);
  --theme-mainmenu-links-color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  --theme-footer-background-color: var(--timl-ink);
  --theme-footer-font-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  --theme-footer-link-color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  --theme-footer-border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);

  /* text */
  --theme-font-color: var(--color-text);
  --theme-font-color-light: color-mix(in srgb, var(--color-text) 60%, transparent);
  --theme-link-color: var(--color-accent-700);
  --theme-link-color-hover: var(--color-accent-600);
  --theme-link-hover-color: var(--color-accent-600);
  --theme-headline-color: var(--color-text);
  --theme-border-color: var(--color-divider);

  /* inputs — white on the light ground so a field reads as a field */
  --theme-input-background-color: #ffffff;
  --theme-input-font-color: var(--color-text);
  --theme-input-border-colors: var(--color-divider);
  --theme-input-border-color: var(--color-divider);
  --theme-input-radius: var(--radius-md);

  /* buttons — accent-700 on white clears 6:1, unlike the display gold (accent-300),
     which is a dark-ground colour and would be unreadable here */
  --theme-button-background-color: var(--color-accent-700);
  --theme-button-background-color-hover: var(--color-accent-800);
  --theme-button-font-color: #ffffff;
  --theme-button-font-color-hover: #ffffff;
  --theme-button-border-color: var(--color-accent-700);
  --theme-button-border-color-hover: var(--color-accent-800);
  --theme-button-fontsize: 0.9375rem;
  --theme-secondary-button-background-color: var(--color-neutral-200);
  --theme-secondary-button-background-color-hover: var(--color-neutral-300);
  --theme-secondary-button-font-color: var(--color-text);
  --theme-secondary-button-font-color-hover: var(--color-text);
  --theme-secondary-button-border-color: var(--color-divider);
  --theme-secondary-button-border-color-hover: var(--color-neutral-400);

  /* tabs */
  --theme-buttontabs-font-color: color-mix(in srgb, var(--color-text) 60%, transparent);
  --theme-buttontabs-font-color-hover: var(--color-accent-700);
  --theme-buttontabs-font-color-active: var(--color-accent-700);
  --theme-buttontabs-border-color: transparent;
  --theme-buttontabs-border-color-active: var(--color-accent);
  --theme-buttontabs-font-family: var(--font-body);
  --theme-buttontabs-font-size: 0.875rem;
  --theme-tabs-background-color: #ffffff;
  --theme-tabs-background-color-active: var(--timl-ink);
  --theme-tabs-font-color: color-mix(in srgb, var(--color-text) 60%, transparent);
  --theme-tabs-font-color-active: var(--color-bg);
  --theme-tabs-border-color: transparent;
  --theme-tabs-border-color-hover: var(--color-accent);
  --theme-tabs-border-color-active: var(--color-accent);
  --theme-tabs-font-size: 0.875rem;
  --theme-tabs-font-family: var(--font-body);

  /* surfaces */
  --theme-list-background-color: #ffffff;
  --theme-list-background-color-alt: var(--color-neutral-100);
  --theme-list-background-color-hover: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --theme-comments-background-color: #ffffff;
  --theme-box-background-color: #ffffff;
  --theme-foreground-background-color: #ffffff;
  --theme-tag-background-color: var(--color-accent-100);
  --theme-tag-font-color: var(--color-accent-800);

  /* dropdowns */
  --theme-pulldown-background-color: #ffffff;
  --theme-pulldown-background-color-hover: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --theme-pulldown-background-color-active: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --theme-pulldown-font-color-active: var(--color-accent-700);
  --theme-pulldown-border-color: var(--color-divider);
  --theme-pulldown-contents-background-color: #ffffff;
  --theme-pulldown-contents-list-background-color-hover: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --theme-pulldown-contents-list-background-color-active: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --theme-pulldown-contents-list-font-color-active: var(--color-text);

  /* type */
  --theme-font-family: var(--font-body);
  --theme-heading-font-family: var(--font-heading);
  --theme-font-size: 0.9375rem;
  --theme-font-size-small: 0.8125rem;
  --theme-headline-size-large: 1.45rem;
  --theme-headline-size-medium: 1.08rem;
  --theme-title-size: var(--theme-font-size);
  --theme-menu-link-size: 0.875rem;
  --theme-font-weight-bold: 600;

  /* spacing / elevation */
  --theme-item-spacing: 0.625rem;
  --theme-item-radius: var(--radius-md);
  --theme-item-transition: all .2s ease-in-out;
  --theme-item-shadow: var(--shadow-sm);
  --theme-item-shadow-hover: var(--shadow-md);
  --theme-widget-spacing: 1.25rem;
  --theme-widget-radius: var(--radius-lg);
  --theme-layout-box-shadow: var(--shadow-sm);
}