/*
 * Mint Cannabis white-label theme for Penpot.
 *
 * Loaded after Penpot's own main.css, so every declaration here wins by source
 * order without needing !important or specificity hacks.
 *
 * Penpot expresses its entire design language through ~41 semantic custom
 * properties declared on `body.default` (dark) and `body.light`. Re-pointing
 * those variables re-skins auth, dashboard, workspace and viewer in one shot —
 * we never touch component rules, which is what keeps this survivable across
 * Penpot upgrades.
 *
 * Palette source of truth: packages/ui/design-tokens.json in letsgomint-us
 * (Penpot "Brand Tokens" shared library -> design-tokens.json -> here).
 */

/* --------------------------------------------------------------------------
 * Typography — handled OUTSIDE this file, on purpose.
 *
 * Penpot's UI font is the family "worksans", referenced from hundreds of
 * component rules. Re-declaring that family here does NOT work: Chromium keeps
 * the first successfully-loaded face and never falls through to a later
 * same-name @font-face, so the override is silently ignored (measured on the
 * live instance — identical text metrics before and after).
 *
 * Instead the build swaps the FILE Penpot loads: a variable Montserrat is
 * written over fonts/WorkSans-VariableFont.ttf. css/main.css is its only
 * referrer, and the replacement keeps the same wght 100-900 axis with a 400
 * default, so every weight the UI asks for still resolves. See
 * scripts/apply_branding.py.
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * Dark theme (Penpot's default) — `body.default`
 *
 * Accent contrast is the constraint here. Mint's signature #00954c is only
 * 2.3:1 against Penpot's near-black canvas, so it fails as a text/link colour.
 * mint-400 (#59b983) carries the same hue at 7.3:1, comfortably past WCAG AAA,
 * and #00954c is demoted to selection/fill duty where contrast is not a
 * legibility concern.
 * ------------------------------------------------------------------------ */
body.default {
  /* Accents — mint leads, gold is the secondary (replacing Penpot's purple). */
  --color-accent-primary: #59b983; /* mint-400  — links, focus rings, emphasis */
  --color-accent-primary-muted: #2c4c3b;
  --color-accent-secondary: #d9a752; /* gold-500 */
  --color-accent-tertiary: #00954c; /* mint-500  — selection, active fills */
  --color-accent-quaternary: #e3bd66; /* gold-400 */
  --color-accent-overlay: rgba(89, 185, 131, 0.6);
  --color-accent-select: rgba(0, 149, 76, 0.12);
  --color-accent-action: #d9a752;
  --color-accent-action-hover: #e3bd66;
  --color-accent-off: #f3f4f6;

  /* Neutrals — Mint's true-grey ramp replaces Penpot's green-cast greys,
     keeping the same lightness steps so UI depth cues survive. */
  --color-background-default: #0f0f0f;
  --color-background-primary: #0f0f0f;
  --color-background-secondary: #000;
  --color-background-tertiary: #171717;
  --color-background-quaternary: #262626;
  --color-background-disabled: #262626;
  --color-accent-default: #262626;
  --low-emphasis-background: #0a0a0a;

  --color-foreground-primary: #fff;
  --color-foreground-secondary: #a3a3a3;
  --color-icon-default: #a3a3a3;

  --color-overlay-default: rgba(15, 15, 15, 0.6);
  --color-overlay-onboarding: rgba(10, 10, 10, 0.92);

  /* Design-token pills: retint from Penpot's indigo to a muted mint. */
  --color-token-background: #10241a;
  --color-token-border: #2c4c3b;
  --color-token-accent: #59b983;
  --color-token-foreground: #9ed6b6;

  --color-badge-premium: #ebd08f; /* gold-300 */

  /* Status colours are deliberately NOT rebranded — success/warning/error must
     stay universally readable and must not be confusable with the mint accent. */
}

/* --------------------------------------------------------------------------
 * Light theme — `body.light`
 *
 * On white, the contrast problem inverts: mint-400 is far too light. mint-700
 * (#00733b) hits 6.0:1 on white and passes AA for body text.
 * ------------------------------------------------------------------------ */
body.light {
  --color-accent-primary: #00733b; /* mint-700 */
  --color-accent-primary-muted: #c5e6d3; /* mint-100 */
  --color-accent-secondary: #a37630; /* gold-700 */
  --color-accent-tertiary: #00954c; /* mint-500 */
  --color-accent-quaternary: #d9a752; /* gold-500 */
  --color-accent-overlay: rgba(0, 115, 59, 0.6);
  --color-accent-select: rgba(0, 149, 76, 0.1);
  --color-accent-action: #a37630;
  --color-accent-action-hover: #835c26;

  --color-token-background: #e8f5ee; /* mint-50 */
  --color-token-border: #9ed6b6; /* mint-200 */
  --color-token-accent: #00954c;
  --color-token-foreground: #004425; /* mint-900 */

  --color-badge-premium: #d9a752;
}

/* --------------------------------------------------------------------------
 * Auth screens
 *
 * The only place we touch layout rather than tokens. Penpot ships a fixed-size
 * illustration slot; the Mint artwork is a different aspect ratio, so it is
 * contained rather than cropped.
 * ------------------------------------------------------------------------ */
.main_ui_auth__login-illustration img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* The wordmark carries its own gold/green colour, so strip any filter Penpot
   applies to tint its monochrome logo. */
.main_ui_auth__logo-container svg,
.main_ui_auth__logo svg {
  filter: none;
}