/* Mondays Feel Good: brand and motion tokens.
   Timings follow the motion rulebook in the brand pack: everyday UI is calm (rise and fade, 300ms or less),
   signature moments (landing, onboarding, success, match reveal) may overshoot a little. */
:root {
  /* color */
  --mfg-ink: #15171C;
  --mfg-sun: #FFC52E;
  --mfg-daybreak: #FFF4D1;
  --mfg-white: #FFFFFF;
  --mfg-muted: #62656E;
  --mfg-text-soft: #3E414A;     /* ledes: softer than text, much clearer than muted (9:1 on Daybreak) */
  --mfg-line: #E8E6E1;
  --mfg-surface: #FFFFFF;       /* cards, inputs, dialogs */
  --mfg-page: #FFFFFF;          /* the page */
  --mfg-soft: var(--mfg-daybreak); /* soft sections and panels; dark mode swaps it */
  --mfg-text: var(--mfg-ink);
  --mfg-night-text: #F3F1EC;   /* text on ink and night backgrounds */
  --mfg-warm-line: #EADFC6;    /* borders on Daybreak (chips, cards in the intro) */
  --mfg-sun-pale: #FFE29A;     /* the current step in N3c */
  --mfg-sun-off: #ECE7DA;      /* steps not reached yet in N3c */
  --mfg-off: #B5B8C0;          /* the toggle knob when off */
  --mfg-mist: #F3F1EC;         /* quiet fills: info notices, disabled controls, avatars */
  --mfg-line-strong: #8A8D95;  /* borders that must be seen: inputs, drop zones (3:1 on white) */
  --mfg-focus: var(--mfg-ink); /* the focus ring, everywhere */
  --mfg-on-ink: var(--mfg-white);
  --mfg-btn: var(--mfg-ink);    /* primary button fill: Ink by day, warm white at night */
  --mfg-on-btn: var(--mfg-white);
  --mfg-ink-line: #3A3D45;     /* lines on Ink sections */
  --mfg-scrim: rgba(21, 23, 28, .4); /* dialog backdrop */

  /* status: never Sun. Each pair passes WCAG AA as text on its own fill. */
  --mfg-success: #23764F;  --mfg-success-fill: #E5F3EB;
  --mfg-warning: #A0550A;  --mfg-warning-fill: #FDEBDD;
  --mfg-error: #B42E24;    --mfg-error-fill: #FCE8E6;

  /* shape: small corners, so the sun and the M stay the only truly round things */
  --mfg-radius-control: 4px;   /* buttons, inputs, chips, tags, badges, menu items */
  --mfg-radius-logo: 6px;      /* company logo tiles */
  --mfg-radius-card: 6px;      /* cards, option cards, photos, segmented controls */
  --mfg-radius-photo: 6px;
  --mfg-radius-panel: 8px;     /* panels, notices, dialogs, drop zones */
  --mfg-radius-tile: 22px;     /* app icon tiles only: matches the phone's own icon shape */
  --mfg-radius-pill: 999px;    /* toggle tracks only */
  --mfg-border: 1px;
  --mfg-border-strong: 2px;    /* selected and focus only */

  /* space: 8px base */
  --mfg-space-1: 4px;  --mfg-space-2: 8px;  --mfg-space-3: 12px; --mfg-space-4: 16px; --mfg-space-5: 24px;
  --mfg-space-6: 32px; --mfg-space-7: 48px; --mfg-space-8: 64px; --mfg-space-9: 96px;
  --mfg-content: 1200px;       /* max content width */
  --mfg-measure: 66ch;         /* max line length for running text */
  --mfg-gutter: clamp(16px, 4vw, 32px);
  --mfg-target: 44px;          /* minimum tap target */

  /* elevation */
  --mfg-shadow-soft: 0 8px 20px rgba(21, 23, 28, .06);
  --mfg-shadow-card: 0 10px 24px rgba(21, 23, 28, .08);
  --mfg-shadow-float: 0 10px 26px rgba(21, 23, 28, .06);
  --mfg-shadow-tile: 0 12px 24px rgba(21, 23, 28, .18);
  --mfg-glow-sun: 0 0 8px rgba(255, 197, 46, .9);

  /* type */
  --mfg-font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mfg-text-display: clamp(40px, 6vw, 64px);
  --mfg-text-h1: clamp(28px, 3.4vw, 32px);
  --mfg-text-h2: 24px;
  --mfg-text-h3: 20px;
  --mfg-text-lede: 19px;
  --mfg-text-body: 17px;
  --mfg-text-small: 14px;
  --mfg-text-label: 12px;

  /* duration */
  --mfg-dur-press: 120ms;      /* hover and press */
  --mfg-dur-hover: 250ms;      /* hover reveals */
  --mfg-dur-ui: 300ms;         /* small UI changes, header, toggles */
  --mfg-dur-panel: 400ms;      /* panels and pages, never over 500ms */
  --mfg-dur-moment: 700ms;     /* photo reveal, signature moments */
  --mfg-dur-intro: 1100ms;     /* symbol sunrise */

  /* easing */
  --mfg-ease-out: cubic-bezier(.2, .7, .2, 1);    /* slow-out, like a sunrise */
  --mfg-ease-std: ease-out;
  --mfg-ease-inout: cubic-bezier(.4, 0, .2, 1);
  --mfg-ease-back: cubic-bezier(.3, 1.5, .5, 1);  /* signature moments only */

  /* distance */
  --mfg-rise: 8px;             /* entrances rise 8 to 16px */
  --mfg-lift: 4px;             /* cards and tiles lift on hover */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Before sunrise: a deep morning-blue night, so the sun is at its brightest. */
    --mfg-page: #141A2E; --mfg-surface: #1C2440; --mfg-text: #F7F3EA; --mfg-muted: #AFB6D0; --mfg-text-soft: #D5DAEA; --mfg-line: #2F3A60;
    --mfg-btn: #FFF4D1; --mfg-on-btn: #141A2E; --mfg-soft: #232D52; --mfg-mist: #273158; --mfg-line-strong: #7A84A8; --mfg-focus: #F7F3EA; --mfg-warm-line: #3A4470;
    --mfg-success: #86DDB0; --mfg-success-fill: #17303A; --mfg-warning: #F2B074; --mfg-warning-fill: #352B33; --mfg-error: #F28B82; --mfg-error-fill: #3A2233;
    --mfg-shadow-float: 0 10px 26px rgba(5, 8, 20, .45); color-scheme: dark }
}
:root[data-theme="dark"] {
    /* Before sunrise: a deep morning-blue night, so the sun is at its brightest. */
    --mfg-page: #141A2E; --mfg-surface: #1C2440; --mfg-text: #F7F3EA; --mfg-muted: #AFB6D0; --mfg-text-soft: #D5DAEA; --mfg-line: #2F3A60;
    --mfg-btn: #FFF4D1; --mfg-on-btn: #141A2E; --mfg-soft: #232D52; --mfg-mist: #273158; --mfg-line-strong: #7A84A8; --mfg-focus: #F7F3EA; --mfg-warm-line: #3A4470;
    --mfg-success: #86DDB0; --mfg-success-fill: #17303A; --mfg-warning: #F2B074; --mfg-warning-fill: #352B33; --mfg-error: #F28B82; --mfg-error-fill: #3A2233;
    --mfg-shadow-float: 0 10px 26px rgba(5, 8, 20, .45); color-scheme: dark }