/* FeG Buxtehude – shared design tokens. Loaded by index.html, pinnwand.html, signage.html, submit.html. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600&family=PT+Sans:wght@400;700&display=swap');

:root{
  /* Brand colors */
  --feg-primary:#00BAD4;
  --feg-secondary:#0BB4AA;
  --feg-accent:#F1E2CB;
  --feg-highlight:#FFAD01;
  --feg-text-gray:#7A7A7A;
  --feg-white:#FFFFFF;
  --feg-ink:#1E2224;
  --feg-gray-50:#F7F7F6;
  --feg-gray-100:#EDEDEB;
  --feg-gray-200:#DBDBD8;
  --feg-gray-400:#A6A6A3;
  --feg-gray-600:#7A7A7A;
  --feg-gray-900:#3A3A38;
  --feg-gradient-brand:linear-gradient(90deg, var(--feg-secondary) 0%, var(--feg-primary) 100%);

  /* Semantic status colors (not part of the design system's core palette,
     needed for admin status/role badges — expiry warnings, active/inactive,
     editor role) */
  --feg-danger:#A63D2F;
  --feg-danger-rgb:166,61,47;
  --feg-success:#3F8F5F;
  --feg-success-rgb:63,143,95;
  --feg-info:#3E7CB1;
  --feg-info-rgb:62,124,177;

  /* Semantic aliases */
  --surface-page:var(--feg-white);
  --surface-card:var(--feg-white);
  --surface-warm:var(--feg-accent);
  --surface-inverse:var(--feg-ink);

  /* Brand gray #7A7A7A reaches only 4.3:1 on white – the semantic body colour
     is a darker step of the same neutral so running text meets WCAG AA (≥4.5:1). */
  --text-body:#5E6367;
  --text-muted:#6B7075;
  --text-heading:var(--feg-ink);
  /* Ink, not white: white on the cyan gradient is only ~2.3:1, ink reaches ~7:1 */
  --text-on-brand:var(--feg-ink);
  --text-link:var(--feg-primary);
  --text-link-hover:var(--feg-secondary);

  --border-subtle:var(--feg-gray-200);
  --border-strong:var(--feg-gray-400);

  --action-primary:var(--feg-primary);
  --action-primary-hover:var(--feg-secondary);
  --action-highlight:var(--feg-highlight);

  /* Typography */
  --font-heading:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-body:'Open Sans','Helvetica Neue',Arial,sans-serif;
  --font-accent:'PT Sans','Helvetica Neue',Arial,sans-serif;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --text-display:48px; --text-h1:36px; --text-h2:28px; --text-h3:22px; --text-h4:18px;
  --text-body-lg:18px; --text-body-md:16px; --text-body-sm:14px; --text-eyebrow:13px;
  --leading-tight:1.15; --leading-heading:1.25; --leading-body:1.6;
  --tracking-eyebrow:0.08em;

  /* Spacing / radius / shadow / motion */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px; --radius-circle:50%;
  --shadow-card:0 4px 20px rgba(30,34,36,0.08);
  --shadow-card-hover:0 8px 28px rgba(30,34,36,0.13);
  --shadow-button:0 4px 12px rgba(30,34,36,0.16);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);        /* exponential ease-out, no overshoot */
  --surface-muted:#F2F5F6;                        /* cool neutral tinted towards brand cyan (admin) */
  --border-hairline:#DDE3E6;

  /* Public surfaces (foyer screen, phone): warm paper drawn from the FeG beige */
  --paper:#F7F1E8;              /* page */
  --paper-deep:#F1E2CB;         /* = --feg-accent, for emphasis bands */
  --paper-card:#FFFDF9;         /* cards on paper */
  --paper-line:#E6DACA;         /* hairlines on paper */
  --ink-muted:#5B5650;          /* secondary text on paper, 6.4:1 */
  --ink-faint:#8A8177;          /* decorative only, never for text */
  --need:#FFAD01;               /* free places – always with ink text */
  --need-ink:#8A5300;           /* numbers in running text, 5.6:1 on paper */
  --done:#2F7A50;
  --duration-fast:150ms; --duration-base:220ms;
  --container-max:1180px;
}

/* Browser surfaces – themed from the palette on every page */
::selection{background:rgba(0,186,212,.22);color:var(--feg-ink)}
html{accent-color:var(--feg-primary);caret-color:var(--feg-primary);scrollbar-color:#B9C3C8 transparent}
:focus-visible{outline:2.5px solid var(--feg-primary);outline-offset:2px}
a{text-underline-offset:3px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C5CDD1;border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:#9FAAB0}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}