/* Crossroads Custom Co. - design tokens, Round 3b ("Built to spec.")
   Drop-in: <link rel="stylesheet" href="/tokens.css">. Font files live in ./fonts/ (paths relative to this file).
   Signal Orange is THE action color everywhere, plus a small on-purpose accent on dark themes
   (registration mark, active nav, underline, spec labels, rule lead, hover). Never orange text on bone or sand;
   buttons are an orange fill with ink text (6.2:1). Page themes: see PAGE THEMES below. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin.woff2?v=3b1") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrainsmono-var-latin.woff2?v=3b1") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* core */
  --c-ink: #0D0D0E;        /* Gloss Black: base */
  --c-matte: #1B1B1D;      /* Matte Black: cards, surfaces */
  --c-paper: #ECE6DA;      /* Bone: type on dark, light pages */
  --c-muted: #77736C;      /* Graphite: rules, icons, large labels (4.1:1 on ink, not for small text) */
  --c-muted-text: #A9A397; /* small secondary text on ink (7.8:1) */
  --c-line: #2E2E31;       /* hairlines on dark */

  /* action */
  --c-accent: #FF5A1F;     /* Signal Orange: actions only */
  --c-on-accent: #0D0D0E;  /* text on orange (6.2:1) */

  /* calm secondaries (3b) */
  --c-accent-2: #1F2E45;   /* Harbor Navy: schools, healthcare, secondary sections */
  --c-navy: #1F2E45;
  --c-sand: #C9B48E;       /* Warm Sand: nonprofit, events, how-it-works bands */
  /* pairings: paper on navy 11.0:1, navy on sand 6.8:1, ink on sand 9.6:1 */

  /* type */
  --f-display: "Archivo", "Arial Black", system-ui, sans-serif; /* use with font-stretch:125%; font-weight:800; uppercase */
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* spec labels: uppercase, .08em tracking */
  --display-stretch: 125%;
  --display-weight: 800;

  /* radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* motion */
  --m-fast: 160ms;
  --m-med: 320ms;
  --m-slow: 600ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms; --m-med: 0ms; --m-slow: 0ms; }
}

/* ===================================================================
   PAGE THEMES (owner-approved 3b+): set on <body data-theme="...">.
   Components read only the --t-* variables below, never raw colors.
   Orange (--c-accent) is the ACTION color on every theme.
   --t-accent = the theme's on-purpose accent (registration mark, active nav,
   underline, spec labels, rule lead, hover). --t-accent-text is the
   AA-safe (>=4.5:1) version for small text on --t-bg.
   =================================================================== */
:root, [data-theme="shop"] {          /* default: black + bone, orange accents */
  --t-bg: var(--c-ink); --t-surface: var(--c-matte); --t-text: var(--c-paper); --t-muted: var(--c-muted-text);
  --t-line: var(--c-line); --t-rule: #4A4844;
  --t-accent: var(--c-accent); --t-accent-text: var(--c-accent);      /* 6.2:1 on ink */
  --t-action-edge: transparent; --t-livery: 0;
}
[data-theme="teams"], [data-theme="drops"] {   /* teams, sports, limited drops: black + orange, livery stripes allowed */
  --t-bg: var(--c-ink); --t-surface: var(--c-matte); --t-text: var(--c-paper); --t-muted: var(--c-muted-text);
  --t-line: var(--c-line); --t-rule: #4A4844;
  --t-accent: var(--c-accent); --t-accent-text: var(--c-accent);      /* 6.2:1 ink, 5.5:1 matte */
  --t-action-edge: transparent; --t-livery: 1;
}
[data-theme="healthcare"] {           /* navy + a touch of ceil blue */
  --c-ceil: #9CC3EA;
  --t-bg: var(--c-navy); --t-surface: #2A3B55; --t-text: var(--c-paper); --t-muted: #B4BDCB;   /* 11.0:1, 7.2:1 */
  --t-line: #34476A; --t-rule: #4A5E80;
  --t-accent: var(--c-ceil); --t-accent-text: var(--c-ceil);          /* 7.4:1 on navy */
  --t-action-edge: transparent; --t-livery: 0;
}
[data-theme="nonprofit"], [data-theme="events"] {   /* sand + navy (light theme) */
  --t-bg: var(--c-sand); --t-surface: #E3D6BD; --t-text: var(--c-navy); --t-muted: #4A4232;    /* 6.8:1, 4.9:1 */
  --t-line: rgba(31, 46, 69, .22); --t-rule: rgba(31, 46, 69, .45);
  --t-accent: var(--c-navy); --t-accent-text: var(--c-navy);          /* orange is 1.5:1 on sand: actions only */
  --t-action-edge: var(--c-ink);                                      /* ink edge so orange buttons hold on sand */
  --t-livery: 0;
}
[data-theme="schools"] {              /* navy + school-spirit accent; override --c-spirit per school */
  --c-spirit: #E8B531;                /* default varsity gold, 7.2:1 on navy. Custom spirit colors must be >=4.5:1 on navy for text, else non-text only */
  --t-bg: var(--c-navy); --t-surface: #2A3B55; --t-text: var(--c-paper); --t-muted: #B4BDCB;
  --t-line: #34476A; --t-rule: #4A5E80;
  --t-accent: var(--c-spirit); --t-accent-text: var(--c-spirit);
  --t-action-edge: transparent; --t-livery: 0;
}
[data-theme="business"], [data-theme="signs"] {   /* graphite + orange */
  --c-graphite-dark: #26272A;
  --t-bg: var(--c-graphite-dark); --t-surface: #303134; --t-text: var(--c-paper); --t-muted: var(--c-muted-text);  /* 12.0:1, 6.0:1 */
  --t-line: #3B3C40; --t-rule: var(--c-muted);
  --t-accent: var(--c-accent); --t-accent-text: var(--c-accent);      /* 4.8:1 on graphite-dark (AA) */
  --t-action-edge: transparent; --t-livery: 0;
}
[data-theme="vinyl"], [data-theme="sign-shop"] {  /* black + bone, quiet: orange only on actions */
  --t-bg: var(--c-ink); --t-surface: var(--c-matte); --t-text: var(--c-paper); --t-muted: var(--c-muted-text);
  --t-line: var(--c-line); --t-rule: #4A4844;
  --t-accent: var(--c-paper); --t-accent-text: var(--c-paper);
  --t-action-edge: transparent; --t-livery: 0;
}
/* Orange on navy is 4.4:1: on healthcare/schools use orange for actions, non-text and large text (>=24px or 19px bold) only. */

body { background: var(--t-bg); color: var(--t-text); font-family: var(--f-body); }

/* optional helpers */
.cr-display { font-family: var(--f-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: -.01em; line-height: .92; }
.cr-mono { font-family: var(--f-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.cr-label { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--t-accent-text); } /* spec labels */
.cr-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px; border-radius: var(--r-md);
  font-family: var(--f-body); font-stretch: 125%; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--c-accent); color: var(--c-on-accent); border: 1.5px solid var(--t-action-edge); transition: transform var(--m-fast) var(--ease-out), filter var(--m-fast) var(--ease-out); }
.cr-btn:hover { background: #FF7A45; transform: translateY(-1px); }           /* ink on hover orange 7.5:1 */
.cr-btn:focus-visible, .cr-link:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }
.cr-btn--ghost { background: transparent; color: var(--t-text); border: 1.5px solid var(--t-rule); }
.cr-btn--ghost:hover { border-color: var(--t-accent); }
/* nav: active item gets an accent underline */
.cr-nav a { color: var(--t-text); text-decoration: none; padding-bottom: 6px; border-bottom: 2px solid transparent; transition: border-color var(--m-fast) var(--ease-out); }
.cr-nav a:hover { border-bottom-color: var(--t-rule); }
.cr-nav a[aria-current="page"] { border-bottom-color: var(--t-accent); }
.cr-link { color: var(--t-text); text-decoration: underline; text-decoration-color: var(--t-accent); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.cr-link:hover { text-decoration-thickness: 2.5px; }
.cr-card { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--r-lg); transition: border-color var(--m-med) var(--ease-out); }
.cr-card:hover { border-color: var(--t-accent); }
/* default divider: thin rule + registration mark, drawn in CSS so it follows the theme.
   The rule has a short accent lead; the registration mark is in the accent color. */
.cr-rule { position: relative; display: block; height: 24px; margin-right: 30px; }
.cr-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1.5px;
  background: linear-gradient(90deg, var(--t-accent) 0 48px, var(--t-rule) 48px 100%); }
.cr-rule::after { content: ""; position: absolute; right: -30px; top: 0; width: 24px; height: 24px; background: var(--t-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M1 12H23M12 1V23'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M1 12H23M12 1V23'/%3E%3C/svg%3E") center / contain no-repeat; }
.cr-rule--plain::before { background: var(--t-rule); }
/* livery stripes only render on themes that allow them (teams, drops) */
.cr-livery { display: none; }
[data-theme="teams"] .cr-livery, [data-theme="drops"] .cr-livery { display: block; }