/* ============================================================
   Energie Premium — systemic polish layer
   Loaded AFTER energie-theme.css. Elevates the whole app through
   Twenty's own stable --t-* CSS variables + a scoped motion layer.
   No coupling to generated (Linaria) class names for the token work;
   motion targets stable roles/element types and [class*] prefixes only.
   ============================================================ */

/* ── 1. Typography — deeper warm ink, refined rendering ─────── */
.light {
  /* Twenty ships primary text at p3(0.2) grey; deepen to a warm near-ink
     for premium contrast, and warm the secondary/tertiary steps to match. */
  --t-font-color-primary: color(display-p3 0.145 0.128 0.122);
  --t-font-color-secondary: color(display-p3 0.365 0.338 0.327);
  --t-font-color-tertiary: color(display-p3 0.545 0.515 0.5);
  /* Layered, softer premium shadows (Twenty's are near-flat). */
  --t-box-shadow-light:
    0px 1px 2px 0px color(display-p3 0 0 0 / 0.05),
    0px 2px 10px -3px color(display-p3 0 0 0 / 0.07);
  --t-box-shadow-strong:
    0px 4px 12px -2px color(display-p3 0 0 0 / 0.10),
    0px 18px 44px -14px color(display-p3 0 0 0 / 0.18);
}
.dark {
  --t-font-color-primary: color(display-p3 0.955 0.945 0.935);
  --t-font-color-secondary: color(display-p3 0.72 0.7 0.685);
  --t-box-shadow-light:
    0px 1px 2px 0px rgba(0, 0, 0, 0.4),
    0px 2px 12px -4px rgba(0, 0, 0, 0.5);
  --t-box-shadow-strong:
    0px 12px 40px -10px rgba(0, 0, 0, 0.6);
}

body, input, button, textarea, select {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
  /* Inter stylistic refinements: single-story a, disambiguated 1/l/0 */
  font-feature-settings: 'cv05', 'cv11', 'ss01';
}

/* Headings pick up Inter Display (tighter apertures) where Twenty renders
   large/heading text; falls back to Inter cleanly. */
h1, h2, h3, [class*='Title'], [class*='Heading'], [class*='PageTitle'] {
  font-family: 'Inter Display', 'Inter', sans-serif;
  letter-spacing: -0.021em;
}

/* Numerics that line up in columns read as tabular. */
td, th, [class*='RecordTableCell'], [class*='Chip'], [class*='Number'] {
  font-variant-numeric: tabular-nums;
}

/* ── 2. Motion — bring the static UI alive ──────────────────── */
/* Scoped to interactive surfaces; only animates paint properties, never
   layout or transform, so it can't fight Twenty's Framer-motion animations. */
a, button,
[role='button'], [role='tab'], [role='menuitem'], [role='row'], [role='option'],
input, textarea,
[class*='MenuItem'], [class*='NavigationDrawerItem'], [class*='Button'],
[class*='Chip'], [class*='Tab'], [class*='RecordTableCell'] {
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.18s ease;
}

/* ── 3. Premium focus ring — brand crimson, offset ──────────── */
:focus-visible {
  outline: 2px solid var(--t-accent-accent9, #b3122b);
  outline-offset: 2px;
  border-radius: var(--t-border-radius-sm, 4px);
}

/* ── 4. Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  a, button, [role='button'], [role='tab'], [role='menuitem'], [role='row'],
  [role='option'], input, textarea, [class*='MenuItem'],
  [class*='NavigationDrawerItem'], [class*='Button'], [class*='Chip'],
  [class*='Tab'], [class*='RecordTableCell'] {
    transition: none;
  }
}