/* ============================================================
   MicroConf Connect — app tokens
   Extends the MicroConf brand system with an app-density layer.
   Brand colors, radii, spacing and shadows are verbatim from
   MicroConf `colors_and_type.css`. Only the type scale and a few
   app-specific roles are new.
   ============================================================ */

/* FF Good Headline Pro Extra Condensed, the cut microconf.com sets (its Bold
   is byte-identical to the site's). It comes in 400, 450 (News) and 700 —
   there is no 500 or 800, so the app asks for 450 and 700 only. */
@font-face { font-family:"Good Head Pro XCond"; font-weight:400; src:url("./fonts/GoodHeadPro-XCond.696978788bb2.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Good Head Pro XCond"; font-weight:450; src:url("./fonts/GoodHeadPro-XCondNews.f6fd714a521a.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Good Head Pro XCond"; font-weight:700; src:url("./fonts/GoodHeadPro-XCondBold.fca2eefda7af.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Sofia Pro"; font-weight:300; src:url("./fonts/SofiaPro-Light.6bf30b6ebc3c.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Sofia Pro"; font-weight:400; src:url("./fonts/SofiaPro-Regular.bd0a6d0d1ce7.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Sofia Pro"; font-weight:500; src:url("./fonts/SofiaPro-Medium.b307c6ce73c3.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Sofia Pro"; font-weight:600; src:url("./fonts/SofiaPro-SemiBold.f220ad45ec35.ttf") format("truetype"); font-display:swap; }

:root {
  /* --- Brand (from MicroConf palette PDF — do not alter) --- */
  --mc-gold:#efb81c;  --mc-dark-gray:#383f4a;  --mc-coral:#f06d55;  --mc-light-blue:#268ac6;

  --mc-gold-50:#fdf6df;  --mc-gold-100:#fbecb7; --mc-gold-200:#f8df85; --mc-gold-300:#f4cf4d;
  --mc-gold-500:#d49f10; --mc-gold-600:#a87c09; --mc-gold-700:#7d5a06;

  --mc-ink:#1d2129;     --mc-ink-800:#2a303a; --mc-ink-700:#383f4a; --mc-ink-600:#525a68;
  --mc-ink-500:#6c7484; --mc-ink-400:#939aa8; --mc-ink-300:#bcc1cb; --mc-ink-200:#dde0e6;
  --mc-ink-100:#eef0f3; --mc-ink-50:#f6f7f9;  --mc-paper:#fffdf7;   --mc-white:#ffffff;

  --mc-coral-50:#fef0ec; --mc-coral-100:#fcd7cd; --mc-coral-300:#f59c89; --mc-coral-700:#c14a35;
  --mc-blue-50:#e6f1f9;  --mc-blue-100:#c1ddef;  --mc-blue-300:#6cb0db;  --mc-blue-700:#1a6594;
  --success:#2f9d6b;

  /* --- App surfaces --- */
  --app-canvas:var(--mc-ink-50);      /* page background behind columns */
  --app-surface:var(--mc-white);      /* cards, panels, composer */
  --app-surface-warm:var(--mc-paper); /* callouts, dateless event blocks */
  --app-chrome:var(--mc-dark-gray);   /* top nav */
  --app-hover:var(--mc-ink-100);
  --line:var(--mc-ink-200);
  --line-soft:var(--mc-ink-100);

  /* --- Text roles --- */
  --fg-1:var(--mc-ink);        /* titles */
  --fg-2:var(--mc-ink-700);    /* body */
  --fg-3:var(--mc-ink-500);    /* meta */
  --fg-4:var(--mc-ink-400);    /* disabled / placeholder */
  --link:var(--mc-gold-500);   --link-hover:var(--mc-gold-600);

  /* --- Type families --- */
  /* Adobe Fonts first (the kit linked in templates/base.html), then the
     self-hosted files above, which a browser only downloads when Adobe's
     didn't arrive — the stylesheet blocked or down, or a font file failing.
     Adobe's Sofia has the italic the self-hosted set lacks; without it the
     browser slants the Regular. Its Good Headline has 400/500/700, so the
     app's 450 resolves to its 500 there and to News (450) here. */
  --font-display:"good-headline-web-pro-xcond","Good Head Pro XCond","Barlow Condensed",system-ui,sans-serif;
  --font-body:"sofia-pro","Sofia Pro",ui-sans-serif,system-ui,sans-serif;

  /* --- App type scale (larger than the marketing scale: members are 30–50) --- */
  --fs-page-title:44px;   --lh-page-title:1;      /* Good Pro 800, uppercase */
  --fs-section:30px;      --lh-section:1.05;      /* Good Pro 700, uppercase, .02em */
  --fs-card-title:21px;   --lh-card-title:1.3;    /* Sofia 600, -.01em */
  --fs-body:16px;         --lh-body:1.6;          /* Sofia 400 */
  --fs-meta:14px;         --lh-meta:1.5;          /* Sofia 400, --fg-3 */
  --fs-label:13px;                                /* Good Pro 700, .12em caps */
  --fs-badge:12px;                                /* Good Pro 700, .1em caps */

  /* --- Spacing (4px base; app density uses 8/12/16/24) --- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* --- Radii --- */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:9999px;

  /* --- Elevation --- */
  --shadow-sm:0 1px 2px rgba(29,33,41,.06), 0 1px 1px rgba(29,33,41,.04);
  --shadow-md:0 4px 12px rgba(29,33,41,.08), 0 2px 4px rgba(29,33,41,.05);
  --shadow-lg:0 18px 40px -12px rgba(29,33,41,.18);

  /* --- Motion --- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms; --dur-base:200ms;

  /* --- Semantic component roles --- */
  --badge-status-upcoming:var(--mc-coral);
  --badge-status-past:var(--mc-dark-gray);
  --badge-status-rsvpd:var(--success);
  --badge-attr-online-bg:var(--mc-blue-50);   --badge-attr-online-fg:var(--mc-blue-700);
  --badge-attr-inperson-bg:var(--mc-coral-50);--badge-attr-inperson-fg:var(--mc-coral-700);
  --badge-attr-type-bg:var(--mc-gold-50);     --badge-attr-type-fg:var(--mc-gold-700);
  --badge-attr-neutral-bg:var(--mc-ink-100);  --badge-attr-neutral-fg:var(--mc-ink-600);
  --badge-source-slack-fg:var(--mc-blue-700); --badge-source-slack-dot:var(--mc-light-blue);
  --badge-source-circle-fg:var(--mc-ink-500); --badge-source-circle-dot:var(--mc-ink-400);
  --focus-ring:var(--mc-gold-300);
}