@import "./theme-forgejo-auto.css";
/*
 * dcl.place design tokens: the one place the sign-in look keeps its colours, type, spacing, radii and motion.
 * Taken from the owner's Figma prototype (file hlBd0bSdw3STWGw2xAOrAB, the Decentraland Marketplace dark UI); where
 * a Figma value fails WCAG AA it is lifted, and the light theme is derived. docs/DESIGN.md has every token, its
 * Figma source and where it is used.
 *
 * Every surface reads this file as it is: login.dcl.place and the tailnet door (identity/dcl-login/build.mjs),
 * Keycloak's login theme (identity/keycloak-theme/build.sh), Forgejo's themes (infra/forgejo/theme.nix) and
 * Headscale's pages (identity/headscale/look, patch 0011). The dark values sit in the one media query below; Forgejo's
 * fixed light and dark themes are made by switching that query off or on.
 */
:root {
  color-scheme: light dark;

  /* Type: Inter (SIL OFL 1.1, self-hosted, identity/design/fonts) as in the Figma file. */
  --dcl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dcl-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --dcl-text-xs: 0.75rem;      /* 12px, line 18: overline labels */
  --dcl-text-sm: 0.8125rem;    /* 13px, line 18: buttons, help text */
  --dcl-text-md: 0.9375rem;    /* 15px, line 24: body, labels, inputs */
  --dcl-text-lg: 1.0625rem;    /* 17px, line 26: dialog titles, tabs */
  --dcl-text-xl: 1.3125rem;    /* 21px, line 30: figures, the short code */
  --dcl-text-2xl: 1.75rem;     /* 28px, line 34: page titles */
  --dcl-leading-xs: 1.125rem;
  --dcl-leading-sm: 1.125rem;
  --dcl-leading-md: 1.5rem;
  --dcl-leading-lg: 1.625rem;
  --dcl-leading-xl: 1.875rem;
  --dcl-leading-2xl: 2.125rem;
  --dcl-tracking-title: -0.0125em;   /* -0.2px at 17px */
  --dcl-tracking-display: 0.011em;   /* 0.3px at 28px */
  --dcl-tracking-caps: 0.02em;
  --dcl-weight-regular: 400;
  --dcl-weight-medium: 500;
  --dcl-weight-semibold: 600;
  --dcl-weight-bold: 700;

  /* Space: the Figma file's 4px grid. */
  --dcl-space-1: 0.25rem;  /* 4 */
  --dcl-space-2: 0.5rem;   /* 8 */
  --dcl-space-3: 0.75rem;  /* 12 */
  --dcl-space-4: 1rem;     /* 16 */
  --dcl-space-5: 1.25rem;  /* 20 */
  --dcl-space-6: 1.5rem;   /* 24 */
  --dcl-space-8: 2rem;     /* 32 */
  --dcl-space-10: 2.5rem;  /* 40 */
  --dcl-space-12: 3rem;    /* 48 */
  --dcl-space-16: 4rem;    /* 64 */
  --dcl-control-height: 2.75rem;   /* 44: inputs and buttons */
  --dcl-header-height: 4rem;       /* 64: the top bar */
  --dcl-dialog-width: 32.5rem;     /* 520: the Figma modal */

  /* Radii */
  --dcl-radius-check: 3px;
  --dcl-radius-tag: 4px;
  --dcl-radius-control: 6px;
  --dcl-radius-card: 10px;
  --dcl-radius-dialog: 16px;
  --dcl-radius-round: 999px;

  /* Motion: short, ease-out, and none when the person asks for less. */
  --dcl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dcl-duration: 160ms;
  --dcl-duration-slow: 240ms;

  /* Brand: the Figma logo's gradients, for the mark and the dialog tile. */
  --dcl-brand-red: #ff2d55;
  --dcl-brand-yellow: #ffbc5b;
  --dcl-brand-purple: #a524b3;
  --dcl-brand-gradient: linear-gradient(225deg, #ff2d55 0%, #ffbc5b 100%);
  --dcl-tile-gradient: linear-gradient(180deg, #a524b3 0%, #ff2d55 100%);

  /* Colour, light (derived: the Figma file has no light theme). */
  --dcl-bg: #f5f4f7;
  --dcl-surface: #ffffff;
  --dcl-surface-raised: #eceaef;
  --dcl-text: #16141a;
  --dcl-text-muted: #5f5a68;
  --dcl-line: rgb(115 110 125 / 0.24);
  --dcl-field-border: #8b8695;
  --dcl-accent: #ff2d55;                 /* the same in both themes, as are the fills below */
  --dcl-accent-fill: #e0002b;
  --dcl-accent-fill-hover: #c70026;
  --dcl-accent-fill-active: #ad0021;
  --dcl-accent-text: #d4002a;
  --dcl-on-accent: #ffffff;
  --dcl-secondary-fill: rgb(115 110 125 / 0.16);
  --dcl-secondary-fill-hover: rgb(115 110 125 / 0.26);
  --dcl-danger-text: #c0001f;
  --dcl-danger-bg: rgb(224 0 43 / 0.07);
  --dcl-danger-line: rgb(224 0 43 / 0.4);
  --dcl-success-text: #0b7140;
  --dcl-success-bg: rgb(11 113 64 / 0.08);
  --dcl-success-line: rgb(11 113 64 / 0.4);
  --dcl-warning-text: #7a4b00;
  --dcl-warning-bg: rgb(255 188 91 / 0.18);
  --dcl-warning-line: rgb(214 140 30 / 0.6);
  --dcl-focus: #ff2d55;
  --dcl-selection: rgb(255 45 85 / 0.22);
  --dcl-scrim: rgb(22 20 26 / 0.5);
  --dcl-shadow-dialog: 0 1px 2px rgb(22 20 26 / 0.06), 0 12px 32px -8px rgb(22 20 26 / 0.16);
  --dcl-qr-ink: #16141a;
  --dcl-qr-paper: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Colour, dark: the Figma file's values. */
    --dcl-bg: #16141a;
    --dcl-surface: #242129;
    --dcl-surface-raised: #37333d;
    --dcl-text: #ffffff;
    --dcl-text-muted: #a09ba8;
    --dcl-line: rgb(115 110 125 / 0.24);
    --dcl-field-border: #736e7d;
    --dcl-accent-text: #ff5c7b;
    --dcl-secondary-fill: rgb(115 110 125 / 0.24);
    --dcl-secondary-fill-hover: rgb(115 110 125 / 0.36);
    --dcl-danger-text: #ff8597;
    --dcl-danger-bg: rgb(255 45 85 / 0.12);
    --dcl-danger-line: rgb(255 45 85 / 0.5);
    --dcl-success-text: #5fe0a0;
    --dcl-success-bg: rgb(61 214 140 / 0.12);
    --dcl-success-line: rgb(61 214 140 / 0.45);
    --dcl-warning-text: #ffc978;
    --dcl-warning-bg: rgb(255 188 91 / 0.12);
    --dcl-warning-line: rgb(255 188 91 / 0.5);
    --dcl-selection: rgb(255 45 85 / 0.35);
    --dcl-scrim: rgb(0 0 0 / 0.6);
    --dcl-shadow-dialog: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -12px rgb(0 0 0 / 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dcl-duration: 0ms;
    --dcl-duration-slow: 0ms;
  }
}
/*
 * dcl.place's Forgejo themes (docs/DESIGN.md). theme.nix makes theme-dcl-place-{auto,light,dark}.css from Forgejo's
 * own theme of that name, identity/design/tokens.css and this file, so Forgejo's colours are dcl.place's tokens.
 * Forgejo keeps its sentence-case buttons (their labels carry names such as dcl.place); everything else follows the
 * sign-in pages. The sign-in page puts "Sign in with dcl.place" first and red; the password form is for the local
 * site admin only and comes after it.
 */
@font-face {
  font-family: "Inter";
  src: url(../dcl-place/inter-latin-wght.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonts-proportional: "Inter", -apple-system, "Segoe UI", system-ui, "Noto Sans", Roboto, "Helvetica Neue", Arial;
  --border-radius: var(--dcl-radius-control);
  --border-radius-medium: var(--dcl-radius-card);

  --color-body: var(--dcl-bg);
  --color-nav-bg: var(--dcl-bg);
  --color-secondary-nav-bg: var(--dcl-bg);
  --color-header-wrapper: var(--dcl-bg);
  --color-footer: var(--dcl-bg);
  --color-box-body: var(--dcl-surface);
  --color-box-body-highlight: var(--dcl-surface-raised);
  --color-box-header: var(--dcl-surface);
  --color-card: var(--dcl-surface);
  --color-menu: var(--dcl-surface);
  --color-console-bg: var(--dcl-bg);
  --color-text: var(--dcl-text);
  --color-text-dark: var(--dcl-text);
  --color-text-focus: var(--dcl-text);
  --color-text-light: var(--dcl-text-muted);
  --color-text-light-1: var(--dcl-text-muted);
  --color-text-light-2: var(--dcl-text-muted);
  --color-text-light-3: var(--dcl-text-muted);
  --color-placeholder-text: var(--dcl-text-muted);
  --color-caret: var(--dcl-accent);
  --color-accent: var(--dcl-accent);
  --color-small-accent: var(--dcl-selection);
  --color-selection-bg: var(--dcl-selection);
  --color-selection-fg: var(--dcl-text);

  --color-primary: var(--dcl-accent-text);
  --color-primary-contrast: var(--dcl-on-accent);
  --color-primary-hover: var(--dcl-accent-text);
  --color-primary-active: var(--dcl-accent-text);
  --color-primary-dark-1: var(--dcl-accent-text);
  --color-primary-dark-2: var(--dcl-accent-text);
  --color-primary-light-1: var(--dcl-accent-text);
  --color-primary-light-2: var(--dcl-accent-text);
  --color-primary-alpha-10: rgb(255 45 85 / 0.1);
  --color-primary-alpha-20: rgb(255 45 85 / 0.2);
  --color-primary-alpha-30: rgb(255 45 85 / 0.3);
  --color-primary-alpha-40: rgb(255 45 85 / 0.4);
  --color-primary-alpha-50: rgb(255 45 85 / 0.5);
  --color-primary-alpha-60: rgb(255 45 85 / 0.6);
  --color-highlight-fg: var(--dcl-accent-text);
  --color-highlight-bg: rgb(255 45 85 / 0.14);
  --color-active: var(--dcl-surface-raised);
  --color-hover: var(--dcl-secondary-fill);
  --color-nav-hover-bg: var(--dcl-secondary-fill);
  --color-button: var(--dcl-secondary-fill);
  --color-light: var(--dcl-secondary-fill);
  --color-light-border: var(--dcl-line);
  --color-secondary: var(--dcl-line);
  --color-secondary-bg: var(--dcl-surface-raised);
  --color-timeline: var(--dcl-line);
  --color-input-background: transparent;
  --color-input-toggle-background: var(--dcl-surface-raised);
  --color-input-border: var(--dcl-field-border);
  --color-input-border-hover: var(--dcl-text-muted);
  --color-input-text: var(--dcl-text);
  --color-code-bg: var(--dcl-surface);
  --color-markup-code-block: var(--dcl-surface-raised);
  --color-markup-code-inline: var(--dcl-surface-raised);
  --color-overlay-backdrop: var(--dcl-scrim);
  --color-error-bg: var(--dcl-danger-bg);
  --color-error-border: var(--dcl-danger-line);
  --color-error-text: var(--dcl-danger-text);
  --color-success-bg: var(--dcl-success-bg);
  --color-success-border: var(--dcl-success-line);
  --color-success-text: var(--dcl-success-text);
  --color-warning-bg: var(--dcl-warning-bg);
  --color-warning-border: var(--dcl-warning-line);
  --color-warning-text: var(--dcl-warning-text);
  --color-info-bg: var(--dcl-surface-raised);
  --color-info-border: var(--dcl-line);
  --color-info-text: var(--dcl-text);
  accent-color: var(--dcl-accent-fill);
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--dcl-selection); }

/* The red is for the one main action; Forgejo's links stay in the readable accent. */
.ui.primary.button,
.ui.primary.buttons .button { background: var(--dcl-accent-fill); color: var(--dcl-on-accent); }
.ui.primary.button:hover,
.ui.primary.buttons .button:hover { background: var(--dcl-accent-fill-hover); color: var(--dcl-on-accent); }
.ui.primary.button:active,
.ui.primary.buttons .button:active { background: var(--dcl-accent-fill-active); }
.ui.basic.primary.button { background: transparent; color: var(--dcl-accent-text); border-color: var(--dcl-accent-text); }
.ui.button { font-weight: var(--dcl-weight-semibold); }
:focus-visible { outline: 2px solid var(--dcl-focus); outline-offset: 2px; }
input:focus-visible,
textarea:focus-visible,
.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus { border-color: var(--dcl-focus) !important; box-shadow: 0 0 0 1px var(--dcl-focus); outline: none; }

/* The top bar: the dcl.place mark (custom/public/assets/img/logo.svg) and a hairline, as on the sign-in pages. */
#navbar { border-bottom: 1px solid var(--dcl-line); }
#navbar-logo img { width: 32px; height: 32px; }

/* Sign-in page: one dialog, "Sign in with dcl.place" first. */
.page-content.user.signin .column { max-width: var(--dcl-dialog-width) !important; }
.page-content.user.signin .ui.top.attached.header {
  padding: var(--dcl-space-10) var(--dcl-space-6) var(--dcl-space-2);
  border: 0;
  border-radius: var(--dcl-radius-dialog) var(--dcl-radius-dialog) 0 0;
  background: var(--dcl-surface);
  font-size: var(--dcl-text-lg);
  line-height: var(--dcl-leading-lg);
  font-weight: var(--dcl-weight-semibold);
  letter-spacing: var(--dcl-tracking-title);
}
.page-content.user.signin .ui.top.attached.header + .ui.attached.segment {
  display: flex;
  flex-direction: column;
  padding: var(--dcl-space-6) var(--dcl-space-16) var(--dcl-space-12);
  border: 0;
  border-radius: 0 0 var(--dcl-radius-dialog) var(--dcl-radius-dialog);
  background: var(--dcl-surface);
  box-shadow: var(--dcl-shadow-dialog);
}
.page-content.user.signin #oauth2-login-navigator { order: -2; padding: 0; }
.page-content.user.signin .divider.divider-text {
  order: -1;
  margin: var(--dcl-space-6) 0;
  color: var(--dcl-text-muted);
  font-size: var(--dcl-text-xs);
  font-weight: var(--dcl-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.page-content.user.signin .divider.divider-text::before,
.page-content.user.signin .divider.divider-text::after { border-color: var(--dcl-line); }
.page-content.user.signin form.ui.form { margin: 0 !important; }
.page-content.user.signin form.ui.form .ui.primary.button { background: var(--dcl-secondary-fill); color: var(--dcl-text); }
.page-content.user.signin form.ui.form .ui.primary.button:hover { background: var(--dcl-secondary-fill-hover); }
.page-content.user.signin .ui.form .field > label { color: var(--dcl-text-muted); font-weight: var(--dcl-weight-regular); font-size: var(--dcl-text-md); }
.page-content.user.signin .ui.form input:not([type="checkbox"]) { min-height: var(--dcl-control-height); }
.page-content.user.signin .ui.container + .ui.container .ui.attached.segment {
  border: 0;
  background: none;
  font-size: var(--dcl-text-sm);
}
#oauth2-login-navigator .oauth-login-link {
  gap: var(--dcl-space-3);
  min-height: var(--dcl-control-height);
  padding: var(--dcl-space-3) var(--dcl-space-4) !important;
  border: 0;
  border-radius: var(--dcl-radius-control);
  background: var(--dcl-accent-fill);
  color: var(--dcl-on-accent);
  font-size: var(--dcl-text-md);
  font-weight: var(--dcl-weight-semibold);
}
#oauth2-login-navigator .oauth-login-link:hover { background: var(--dcl-accent-fill-hover); color: var(--dcl-on-accent); }
#oauth2-login-navigator .oauth-login-link:active { background: var(--dcl-accent-fill-active); }
#oauth2-login-navigator .oauth-login-link > svg,
#oauth2-login-navigator .oauth-login-link > img { display: none; }
#oauth2-login-navigator .oauth-login-link::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: url(../dcl-place/parcels.svg) center / contain no-repeat;
  mask: url(../dcl-place/parcels.svg) center / contain no-repeat;
}

@media (max-width: 35rem) {
  .page-content.user.signin .ui.top.attached.header { padding-top: var(--dcl-space-8); border-radius: var(--dcl-radius-card) var(--dcl-radius-card) 0 0; }
  .page-content.user.signin .ui.top.attached.header + .ui.attached.segment { padding: var(--dcl-space-6); border-radius: 0 0 var(--dcl-radius-card) var(--dcl-radius-card); }
}