/* CNO design tokens: extracted from the saved nationalobserver.com pages (the --cno-* custom properties and the compiled Tailwind/Drupal CSS).
   One token per line with its use as the trailing comment: the docs, tokens.json and the skill are generated from this file.
   Source tag at the start of each comment:
     [css]  the value is written literally in the saved nationalobserver.com CSS (:root --cno-* or a component rule)
     [ours] defined by us for the admin tool, not taken from the site */
:root {
  /* Color: text */
  --color-text: #000000;                     /* [css] body text (--cno-base-font-color), table cells, headings */
  --color-text-on-dark: #ffffff;             /* [css] text and icons on the black sidebar and on filled buttons */
  --color-text-muted: #666666;               /* [css] labels, captions (--cno-gray-500) */
  --color-text-disabled: #999999;            /* [css] disabled text (--cno-gray-700) */

  /* Color: brand and neutrals */
  --color-primary: #003f74;                  /* [css] links in the admin, active states, focus (--cno-blue-dark) */
  --color-primary-hover: #3ba5d1;            /* [css] link and button hover (--cno-blue, the site's link colour) */
  --color-link: #3ba5d1;                     /* [css] links on the public site (a { color: var(--cno-blue) }) */
  --color-accent: #fe3b1f;                   /* [css] Subscribe orange: the active-item bar and the one call to action (--cno-subscribe-orange) */
  --color-brand-red: #ff3a1e;                /* [css] red of the CNO logo mark (--cno-red-300) */
  --color-ink: #000000;                      /* [css] sidebar, header and footer-dark surfaces (--cno-black) */
  --color-ink-soft: #222222;                 /* [css] hover on black surfaces (--cno-gray-100) */
  --color-surface: #ffffff;                  /* [css] cards, menus, main area (--cno-white) */
  --color-page-bg: #f9f9f9;                  /* [css] code boxes, dev box, page tint (--cno-gray-1200) */
  --color-surface-alt: #f2f2f2;              /* [css] footer background (--cno-gray-1100) */
  --color-border: #dddddd;                   /* [css] section header rule (--cno-gray-950) */
  --color-border-light: #e2e2e2;             /* [css] table row dividers (--cno-gray-1000) */
  --color-border-strong: #cccccc;            /* [css] input borders (--cno-gray-900) */
  --color-hover: rgba(0, 0, 0, 0.04);        /* [ours] round icon button hover */
  --color-focus-visible: rgba(0, 0, 0, 0.12); /* [ours] keyboard focus fill on rows */
  --color-icon-muted: #757575;               /* [css] icons (--cno-gray-600) */
  --color-backdrop: rgba(0, 0, 0, 0.8);      /* [css] behind a dialog (--cno-modal-background-color) */
  --color-link-underline: rgba(0, 63, 116, 0.4); /* [ours] underline on admin links */
  --color-disabled-bg: #e2e2e2;              /* [css] disabled button fill (--cno-gray-1000) */
  --color-disabled-text: #999999;            /* [css] disabled button text (--cno-gray-700) */

  /* Color: status */
  --color-success: #0db500;                  /* [css] success (--cno-green) */
  --color-success-bg: #d4f4d4;               /* [css] success fill (--cno-green-light) */
  --color-success-text: #054f00;             /* [css] success text (--cno-green-dark) */
  --color-danger: #ff0c00;                   /* [css] error (--cno-red) */
  --color-danger-bg: #ffcecc;                /* [css] error fill (--cno-red-light) */
  --color-danger-text: #990700;              /* [css] error text (--cno-red-dark) */
  --color-warning: #ffad02;                  /* [css] warning (--cno-yellow-dark) */
  --color-warning-bg: #fdca40;               /* [css] highlight fill (--cno-gold) */

  /* Typography */
  --font-family: ProximaNova, "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif; /* [css] --cno-base-font-family: the UI typeface */
  --font-family-serif: "Noto Serif", Georgia, Times, "Times New Roman", serif; /* [css] --cno-serif-font-family: article body and pull quotes */
  --letter-spacing: 0;                       /* [css] the site sets none */
  --font-size-title: 32px;                   /* [css] h1 at the smallest breakpoint (2rem) */
  --line-height-title: 36px;                 /* [css] h1 (2.25rem) */
  --font-weight-title: 800;                  /* [css] h1 */
  --font-size-display: 54px;                 /* [css] h1 at the widest breakpoint (3.375rem) */
  --line-height-display: 60px;               /* [css] h1 at the widest breakpoint (3.75rem) */
  --font-size-h2: 32px;                      /* [css] h2 (2rem) */
  --line-height-h2: 40.8px;                  /* [css] h2 (2.55rem) */
  --font-size-lg: 18px;                      /* [css] base text (--cno-base-font-size) and large buttons */
  --line-height-lg: 24px;                    /* [css] base line height (--cno-base-line-height) */
  --font-size-md: 16px;                      /* [css] admin body text, medium and small buttons (1rem) */
  --line-height-md: 24px;                    /* [ours] admin body line height */
  --font-size-table: 15px;                   /* [ours] table body in the admin (dense, between 14 and 16) */
  --line-height-table: 22px;                 /* [ours] table body */
  --font-size-nav: 14px;                     /* [ours] sidebar items, uppercase 700 */
  --line-height-nav: 20px;                   /* [ours] sidebar items */
  --font-size-thead: 13px;                   /* [ours] table head, 800 */
  --line-height-thead: 20px;                 /* [ours] table head */
  --font-size-caption: 13px;                 /* [ours] code badges, captions */
  --line-height-caption: 18px;               /* [ours] captions */
  --font-weight-regular: 400;                /* [css] body */
  --font-weight-semibold: 600;               /* [css] subheads */
  --font-weight-bold: 700;                   /* [css] buttons, nav */
  --font-weight-thead: 800;                  /* [css] headings (extrabold file) */

  /* Radius */
  --radius-sm: 4px;                          /* [css] cards, inputs, code (--cno-border-radius) */
  --radius-btn-sm: 15px;                     /* [css] small pill button (.9375rem) */
  --radius-btn-md: 20px;                     /* [css] medium pill button (1.25rem) */
  --radius-btn-lg: 24px;                     /* [css] large pill button (1.5rem) */
  --radius-round: 50%;                       /* [ours] icon buttons, dots */

  /* Spacing */
  --space-1: 4px;                            /* [css] Tailwind 1 */
  --space-2: 8px;                            /* [css] Tailwind 2 */
  --space-3: 12px;                           /* [css] Tailwind 3 */
  --space-4: 16px;                           /* [css] Tailwind 4 */
  --space-5: 20px;                           /* [css] Tailwind 5 (footer side padding) */
  --space-6: 24px;                           /* [css] Tailwind 6 (paragraph margin 1.5rem) */
  --space-8: 32px;                           /* [css] Tailwind 8 */
  --space-10: 40px;                          /* [css] Tailwind 10 */
  --page-padding: 40px;                      /* [ours] main area padding */
  --card-padding: 24px;                      /* [ours] card padding */

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.12); /* [ours] the site uses almost no shadows; resting card (admin only) */
  --shadow-8: 0 6px 16px rgba(0, 0, 0, 0.16); /* [ours] menus and hovered tiles */
  --shadow-24: 0 16px 40px rgba(0, 0, 0, 0.3); /* [ours] dialogs */

  /* Motion */
  --duration-hover: 150ms;                   /* [css] --cno-transition-speed-default: colour and background fades */
  --duration-menu-item: 150ms;               /* [css] same as hover */
  --ease-standard: ease-in-out;              /* [css] transition timing on links and buttons */
  --transition-focus: 150ms ease-in-out;     /* [css] focus and underline transitions */

  /* Layout */
  --sidebar-width: 240px;                    /* [ours] admin left nav */
  --content-max-width: 1290px;               /* [css] --cno-main-content-max-width-wide (80.625rem) */
  --article-max-width: 790px;                /* [css] article column (max-w-search_result) */
  --nav-indicator-height: 4px;               /* [ours] active item bar */
  --header-height: 200px;                    /* [css] site header, collapsed (12.5rem) */
  --footer-padding: 20px;                    /* [css] footer side padding (px-5) */
}