/* Altrady Brand Style Guide 2025: the canonical token values.
 *
 * One shared file on purpose. The charts host loads it ahead of charts.css
 * (see layouts/charts.html.erb) and the marketing site can adopt it with the
 * same stylesheet_link_tag, so neither has to keep its own copy of a hex value.
 *
 * Nothing here styles an element. It declares tokens only, so adding the file
 * to a page cannot change that page's layout until its own CSS consumes them.
 *
 * Note on blue: --brand-blue is the primary, for fills, borders and large text.
 * On --brand-black it measures 3.66:1, which clears the 3.0 WCAG AA needs for
 * large text, for a focus ring and for any other non-text boundary, but not the
 * 4.5 small text needs. So small text, links, eyebrows and badges use
 * --brand-blue-text, the same hue lifted, which measures 5.81:1. White on a
 * --brand-blue fill is 5.17:1, so a filled button is fine at any size.
 *
 * --brand-blue-action is separate from the primary on purpose: it is the blue
 * the live site already uses on every call to action, so changing it would
 * repaint buttons people recognise. White on it is 5.25:1 and the fill reads
 * 3.61:1 against --brand-black, so it clears AA for the label and the 3.0 for
 * the button edge.
 */

:root {
  /* Blues */
  --brand-blue: #2563EB;
  --brand-blue-deep: #1E4AAA;
  --brand-blue-text: #5A8BF5;
  /* Calls to action, as shipped on charts.altrady.com. */
  --brand-blue-action: #155DFC;

  /* Grounds */
  --brand-black: #0F1112;
  --brand-navy: #0F172A;
  /* Card surface and its border, as the guide specifies them. */
  --brand-card: rgba(15, 23, 42, 0.8);
  --brand-card-border: rgba(30, 74, 170, 0.5);

  /* Text */
  --brand-white: #FFFFFF;
  --brand-light: #ECECEC;
  --brand-gray-300: #CFD0D0;
  --brand-gray-500: #838485;

  /* Type */
  --brand-font-heading: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --brand-font-body: "Roboto", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --brand-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Radius */
  --brand-radius-control: 12px;
  --brand-radius-card: 16px;
  --brand-radius-pill: 999px;

  /* Spacing base. The 8px scale the detail page's vertical rhythm is built on. */
  --brand-space: 8px;

  /* Hero glow, per the guide. Used behind a page hero only, never repeated
     down the page. */
  --brand-hero-glow: radial-gradient(ellipse at 100% 0%,
    rgba(37, 99, 235, 0.35) 0%, rgba(30, 74, 170, 0.18) 30%, transparent 60%);
}