import { style } from '@vanilla-extract/css';
import { color, config, toRem } from 'folds';

// Section label above a grouped panel — uppercase, tracked, muted. Matches the
// Dawn canon's "КОМАНДЫ" / "УЧАСТНИКИ · 28" panel headers (sans, not mono).
export const SectionLabel = style({
  display: 'block',
  fontSize: toRem(12),
  lineHeight: toRem(16),
  fontWeight: config.fontWeight.W600,
  letterSpacing: '0.08em',
  textTransform: 'uppercase',
  color: color.Surface.OnContainer,
  opacity: 0.55,
  paddingLeft: config.space.S100,
  paddingRight: config.space.S100,
});

// Optional caption rendered under a section label (e.g. "Скрытые от чужих глаз").
export const SectionFootnote = style({
  display: 'block',
  fontSize: toRem(12),
  lineHeight: toRem(16),
  color: color.Surface.OnContainer,
  opacity: 0.5,
  paddingLeft: config.space.S100,
  paddingRight: config.space.S100,
  paddingTop: config.space.S100,
});

// One row inside a grouped panel. Slightly roomier than the old card so a
// switch/menu row lands at a comfortable ~44px without feeling cramped.
export const SettingRow = style({
  paddingTop: config.space.S300,
  paddingBottom: config.space.S300,
  paddingLeft: config.space.S400,
  paddingRight: config.space.S400,
});

// Dawn mobile grouped-list — flat rows (no per-item card/outline) collected
// into one softly-rounded inset panel on a subtle raised fill, parted by
// hairlines (iOS/Telegram inset-grouped-list feel). `overflow: hidden` clips
// the row hairlines + any pressed tint to the rounded corners.
export const SettingFlatGroup = style({
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: color.SurfaceVariant.Container,
  borderRadius: toRem(16),
  overflow: 'hidden',
});

export const SettingFlatRow = style({
  paddingTop: config.space.S300,
  paddingBottom: config.space.S300,
  paddingLeft: config.space.S400,
  paddingRight: config.space.S400,
  selectors: {
    '&:not(:last-child)': {
      borderBottom: `1px solid ${color.SurfaceVariant.ContainerLine}`,
    },
  },
});

// A flat row in a destructive/pending state — replaces the old Critical-variant
// boxed card (e.g. a device marked for deletion) with a full-bleed critical tint.
export const SettingFlatRowCritical = style({
  backgroundColor: color.Critical.Container,
  color: color.Critical.OnContainer,
});

// A full-bleed hairline rule under a section/profile header — the "ДОСТУП ───"
// divider in the flat layout.
export const SettingRule = style({
  height: '1px',
  border: 'none',
  margin: 0,
  backgroundColor: 'rgba(255, 255, 255, 0.08)',
});

// JetBrains Mono for technical values — mxid, device ids, version, tokens —
// the same stack the DM stream / bot surfaces use for handles & timestamps.
export const Mono = style({
  fontFamily: 'var(--font-mono)',
  fontVariantNumeric: 'tabular-nums',
});

// Centre the settings content as a calm reading column on wide desktop so it
// stops stretching edge-to-edge. width:100% + margin:auto means it degrades to
// full-width inside the narrower mobile settings sheet (no visible cap there).
export const SettingsContentCenter = style({
  maxWidth: toRem(720),
  width: '100%',
  margin: 'auto',
});
