/* Quick! theme: every color, font, size and shadow the platform pages use.
   quick.css (the layout and components) reads only these variables, so swapping
   or overriding this file reskins the home page, the platform pages and the
   embeddable publish form. The default theme follows younglife.org:
   Blinker headings, Montserrat body, navy with gold and green accents. */
@import url("https://fonts.googleapis.com/css2?family=Blinker:wght@600;700&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  /* Young Life brand palette. Change the roles below rather than these names. */
  --yl-navy: #003a5c;
  --yl-navy-dark: #002a43;
  --yl-gold: #fdb930;
  --yl-green: #90c83c;
  --yl-sky: #00a3e0;
  --yl-ink: #1f2a33;
  --yl-gray: #515151;
  --yl-wash: #f5f5f5;
  --yl-line: #e2e6ea;
  --yl-steel: #b8c0ca;
  --yl-steel-light: #c8cdd4;
  --yl-ice: #f3f6fa;
  --yl-red: #b00020;
  --yl-white: #ffffff;

  /* Color roles */
  --color-primary: var(--yl-navy);            /* headings, links, header, footer, navy blocks */
  --color-primary-dark: var(--yl-navy-dark);  /* text on gold and green, tooltips */
  --color-accent: var(--yl-gold);             /* main buttons, pilot banner, gold blocks */
  --color-secondary: var(--yl-green);         /* card edges, "Now" tags, green blocks */
  --color-text: var(--yl-ink);
  --color-text-muted: var(--yl-gray);
  --color-page: var(--yl-white);
  --color-surface: var(--yl-white);           /* cards, panels, dialogs */
  --color-surface-alt: var(--yl-wash);        /* light gray sections and tags */
  --color-surface-hover: var(--yl-ice);       /* drop zone while dragging */
  --color-border: var(--yl-line);
  --color-border-strong: var(--yl-steel);     /* drop zone, chart axes */
  --color-input-border: var(--yl-steel-light);
  --color-error: var(--yl-red);
  --color-on-primary: var(--yl-white);        /* text on navy */
  --color-on-primary-muted: rgba(255, 255, 255, 0.8);
  --color-on-primary-soft: rgba(255, 255, 255, 0.85);
  --color-on-primary-divider: rgba(255, 255, 255, 0.35);
  --color-on-accent: var(--yl-white);         /* text on gold buttons */
  --color-on-color: var(--yl-navy-dark);      /* text on the gold banner and gold or green blocks */
  --color-backdrop: rgba(0, 30, 50, 0.55);
  /* The publish confetti, in order. */
  --confetti-1: var(--yl-gold);
  --confetti-2: var(--yl-navy);
  --confetti-3: var(--yl-green);
  --confetti-4: var(--yl-sky);
  --confetti-5: var(--yl-white);

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0, 58, 92, 0.06);
  --shadow-panel: 0 10px 30px rgba(0, 42, 67, 0.2);
  --shadow-modal: 0 10px 40px rgba(0, 58, 92, 0.3);
  --shadow-tip: 0 4px 14px rgba(0, 42, 67, 0.25);

  /* Type */
  --font-body: Montserrat, system-ui, sans-serif;
  --font-heading: Blinker, Montserrat, system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --line-height-heading: 1.15;
  --weight-bold: 700;
  --weight-semibold: 600;

  /* Shape and spacing */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --wrap-max: 72rem;
  --gutter: 1rem;
  --block-pad: 4rem;
  --header-height: 4.5rem;
  --logo-height: 40px;

  /* Embeddable publish form */
  --embed-background: transparent;
  --embed-padding: 0.5rem;
  --embed-shadow: var(--shadow-card);
}