/* SmartCompass brand tokens. Linked before css/portal.css.
 *
 * Derived from smartcompass.com.br, which declares its palette as CSS custom properties:
 * --color1 and --color2 are navy #1B2737, --color3 is the lighter navy #344967, --color6 is
 * the pale gold #F2E7A9, and amber #ECB100 is the one chromatic accent the page renders.
 * The site uses navy and near black as its base and amber sparingly, as a mark next to a
 * number or a single call to action, and so does this file:
 *
 *   navy   carries every surface that holds white text (buttons, the next-session card,
 *          badges), the ink, and the links;
 *   amber  is solid in one place, the next session's label, and always with navy text
 *          (7.8:1). Elsewhere it appears only where no text sits on it: the glow on the
 *          login panel and the focus halo around inputs. White text on amber measures
 *          1.9:1, so amber is never a fill behind the portal's white labels;
 *   gold   (the site's own #F2E7A9) is the soft tint behind chips, avatars and notices,
 *          always with navy text.
 */

@import url("fonts.css");

:root {
  /* The brand primary. portal.css never reads it directly; it documents the accent the
     overlay tokens below are built from. */
  --lpdh-color-brand-500: #ecb100;
  --lpdh-color-brand-interactive: #1b2737;
  --lpdh-color-brand-interactive-hover: #344967;
  --lpdh-color-brand-interactive-active: #0f1824;
  --lpdh-color-semantic-success: #207929;
  --lpdh-color-semantic-danger: #dd000c;
  --lpdh-color-semantic-danger-interactive: #c9000b;
  --lpdh-color-semantic-info: #0087ce;
  --lpdh-color-semantic-info-interactive: #006ca5;

  /* Montserrat is the site's only family, for headings and body alike. */
  --lpdh-font-family-body: "Montserrat", system-ui, sans-serif;
  --lpdh-font-family-display: "Montserrat", system-ui, sans-serif;
  --lpdh-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --lpdh-space-1: 4px;
  --lpdh-space-2: 8px;
  --lpdh-space-3: 12px;
  --lpdh-space-4: 16px;
  --lpdh-space-6: 24px;
  --lpdh-space-8: 32px;
  --lpdh-space-12: 48px;
  --lpdh-space-16: 64px;
  --lpdh-space-24: 96px;

  /* Tighter than Natural One's: the site's buttons and cards sit at 4px to 8px. */
  --lpdh-radius-sm: 4px;
  --lpdh-radius-md: 6px;
  --lpdh-radius-lg: 10px;
  --lpdh-radius-xl: 14px;

  --lpdh-motion-duration-fast: 0.15s;
  --lpdh-motion-duration-base: 0.25s;
  --lpdh-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --lpdh-color-media-bg: #111a26;
  --lpdh-color-media-text-muted: #9aa7b8;
  /* The placeholder disc on an absent video: amber at half strength over the navy media
     background, which keeps its white glyph at 5.5:1. */
  --lpdh-color-brand-overlay: rgba(236, 177, 0, 0.5);
  /* Tina's own accent, kept from Natural One: a deep green reads as a separate voice next
     to navy and gold without competing with either. */
  --lpdh-color-tina-accent: #0f6b4f;
  --lpdh-color-tina-soft-bg: #cfe6d9;
  --lpdh-color-tina-soft-text: #0c5a42;

  /* The login glow and the input focus halo are amber (no text sits on them); the nav
     badge carries white text, so its strong overlay stays navy. The soft overlay needs 0.45
     to read as amber: over the cool surface, 0.22 composited to a beige close to Natural
     One's page color. */
  --lpdh-color-brand-overlay-soft: rgba(236, 177, 0, 0.45);
  --lpdh-color-brand-overlay-transparent: rgba(236, 177, 0, 0);
  --lpdh-color-brand-overlay-strong: rgba(27, 39, 55, 0.9);
}

:root,
[data-theme="light"] {
  /* Cool, navy tinted neutrals in place of the site's flat white and #f4f4f4 sections, so
     the surfaces sit in the same family as the ink. */
  --lpdh-color-bg: #f6f7f9;
  --lpdh-color-surface: #eceff3;
  --lpdh-color-surface-2: #e2e6ec;
  --lpdh-color-border: #d2d8e0;
  --lpdh-color-border-strong: #5e6978;
  --lpdh-color-text-secondary: #475467;
  --lpdh-color-ink: #1b2737;
  --lpdh-color-overlay: #1b27378c;
  --lpdh-color-inverse-surface: #1b2737;
  --lpdh-color-inverse-text: #f6f7f9;
  --lpdh-color-brand-soft-bg: #f2e7a9;
  --lpdh-color-brand-soft-text: #344967;
  --lpdh-color-semantic-success-text: #1c6924;
  --lpdh-color-semantic-success-soft-bg: #c2e0c5;
  --lpdh-color-semantic-success-soft-text: #1d6d25;
  --lpdh-color-semantic-danger-text: #ba000a;
  --lpdh-color-semantic-danger-soft-bg: #eab8bb;
  --lpdh-color-semantic-danger-soft-text: #a80009;
  --lpdh-color-semantic-info-text: #006093;
  --lpdh-color-semantic-info-soft-bg: #b8d9ea;
  --lpdh-color-semantic-info-soft-text: #006194;
  --lpdh-shadow-sm: 0 1px 2px #1b273714, 0 1px 1px #1b27370f;
  --lpdh-shadow-md: 0 4px 8px #1b27371f, 0 2px 4px #1b273714;
  --lpdh-shadow-lg: 0 12px 24px #1b27372e, 0 4px 8px #1b27371a;
  /* The page background (#f6f7f9) at two opacities: the sticky topbar over scrolling
     content, and the veil over a locked certificate. */
  --lpdh-color-topo-bg: rgba(246, 247, 249, 0.92);
  --lpdh-color-cortina-bg: rgba(246, 247, 249, 0.55);
  /* The one solid amber on the site: the next session's label, in lists and on the navy
     next-session card, with navy text. */
  --lpdh-color-etiqueta-proxima-bg: #ecb100;
  --lpdh-color-etiqueta-proxima-text: #1b2737;
  --lpdh-color-selo-vivo-bg: #ecb100;
  --lpdh-color-selo-vivo-text: #1b2737;
}