/* E7A design tokens — one system for rhythm, type and composition */

:root {
  /* Color */
  --e7a-bg: #0b0d12;
  --e7a-text: #f5f7fa;
  --e7a-muted: #b8c0cc;
  --e7a-blue: #3b82f6;
  --e7a-balance-point: var(--e7a-blue);
  --e7a-system: var(--e7a-muted);
  --e7a-human: var(--e7a-text);
  --e7a-grid: rgba(245, 247, 250, 0.055);
  --e7a-grid-strong: rgba(245, 247, 250, 0.1);
  --e7a-border: rgba(245, 247, 250, 0.1);

  /* Legacy aliases */
  --e7a-black: var(--e7a-bg);
  --e7a-off-white: var(--e7a-text);
  --e7a-gray: var(--e7a-muted);

  /* Composition */
  --e7a-container: 82rem;
  --e7a-gutter: clamp(1rem, 2.2vw, 2.5rem);
  --e7a-rail: 11rem;
  --e7a-measure-copy: 42rem;
  --e7a-measure-wide: 58rem;
  --e7a-layout-gap: clamp(2rem, 5vw, 5rem);
  --e7a-section-y-sm: clamp(2.75rem, 4vw, 4rem);
  --e7a-section-y: clamp(4rem, 6vw, 6.5rem);
  --e7a-section-y-lg: clamp(5rem, 7vw, 7.5rem);

  /* Spacing */
  --e7a-space-1: 0.25rem;
  --e7a-space-2: 0.5rem;
  --e7a-space-3: 0.75rem;
  --e7a-space-4: 1rem;
  --e7a-space-5: 1.5rem;
  --e7a-space-6: 2rem;
  --e7a-space-7: 2.75rem;
  --e7a-space-8: 4rem;
  --e7a-space-9: 6rem;

  /* Type */
  --e7a-type-logo: clamp(4.5rem, 13vw, 8.75rem);
  --e7a-type-display: clamp(2.7rem, 5vw, 5rem);
  --e7a-type-title: clamp(2rem, 3.7vw, 3.6rem);
  --e7a-type-heading: clamp(1.4rem, 2.3vw, 2.1rem);
  --e7a-type-lead: clamp(1.05rem, 1.35vw, 1.2rem);
  --e7a-type-body: 1rem;
  --e7a-line-display: 0.98;
  --e7a-line-tight: 1.12;
  --e7a-line-body: 1.65;
  --e7a-tracking-system: 0.12em;
  --e7a-tracking-display: -0.045em;
  --e7a-tracking-tight: -0.025em;
  --e7a-tracking-logo: -0.06em;

  /* Motion */
  --e7a-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --e7a-dur-fast: 180ms;
  --e7a-dur: 320ms;
  --e7a-dur-slow: 520ms;
}

/* E7A optional dual-theme overrides.
 * Import AFTER tokens.css. Without this file, the historical dark palette is unchanged.
 * A theme applies only to an explicitly marked element and its descendants.
 * No OS preference, JS provider, global reset, fonts or product-level side effects.
 */

/* Re-declare aliases inside each scope: inherited custom properties can be
 * computed at their defining ancestor, so var() aliases must be re-evaluated. */
[data-e7a-theme="light"] {
  color-scheme: light;
  --e7a-bg: #f8fafc;
  --e7a-text: #111827;
  --e7a-muted: #475569;
  --e7a-blue: #1d4ed8;
  --e7a-grid: rgba(17, 24, 39, 0.055);
  --e7a-grid-strong: rgba(17, 24, 39, 0.12);
  --e7a-border: #8692a3;
  --e7a-balance-point: var(--e7a-blue);
  --e7a-system: var(--e7a-muted);
  --e7a-human: var(--e7a-text);
  --e7a-black: var(--e7a-bg);
  --e7a-off-white: var(--e7a-text);
  --e7a-gray: var(--e7a-muted);
  color: var(--e7a-text);
  background-color: var(--e7a-bg);
}

/* Explicit dark scopes can be nested inside light surfaces, or used on html.
 * These values intentionally mirror the unchanged tokens.css dark baseline. */
[data-e7a-theme="dark"] {
  color-scheme: dark;
  --e7a-bg: #0b0d12;
  --e7a-text: #f5f7fa;
  --e7a-muted: #b8c0cc;
  --e7a-blue: #3b82f6;
  --e7a-grid: rgba(245, 247, 250, 0.055);
  --e7a-grid-strong: rgba(245, 247, 250, 0.1);
  --e7a-border: rgba(245, 247, 250, 0.1);
  --e7a-balance-point: var(--e7a-blue);
  --e7a-system: var(--e7a-muted);
  --e7a-human: var(--e7a-text);
  --e7a-black: var(--e7a-bg);
  --e7a-off-white: var(--e7a-text);
  --e7a-gray: var(--e7a-muted);
  color: var(--e7a-text);
  background-color: var(--e7a-bg);
}

/* A disabled action should stay readable without appearing actionable.
 * Scope the improvement to explicit theme surfaces; the unimported historical
 * dark default remains unchanged for existing consumers. */
[data-e7a-theme] .e7a-ui-button:disabled {
  opacity: 1;
  background: var(--e7a-grid);
  color: var(--e7a-muted);
  border-color: var(--e7a-border);
}

/* Scoped E7A UI component and brand styles. Import after tokens.css; no global reset. */
/* Also present in legacy foundation.css for compatibility with existing integrations. */
.e7a-logo-mark{letter-spacing:var(--e7a-tracking-logo)}
.e7a-logo-mark .digit{position:relative;display:inline-block}
.e7a-logo-mark .digit::after{content:"";position:absolute;top:.12em;right:-.02em;width:.14em;height:.14em;background:var(--e7a-blue)}
.e7a-ui-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--e7a-border);border-radius:0;padding:.7rem 1.2rem;cursor:pointer;font:600 .8rem/1.3 var(--font-manrope),system-ui,sans-serif;transition:background-color var(--e7a-dur-fast) var(--e7a-ease),border-color var(--e7a-dur-fast) var(--e7a-ease),color var(--e7a-dur-fast) var(--e7a-ease)}
.e7a-ui-button:disabled{opacity:.45;cursor:not-allowed}
.e7a-ui-button:focus-visible{outline:2px solid var(--e7a-blue);outline-offset:3px}
.e7a-ui-button--primary{background:var(--e7a-blue);color:var(--e7a-bg);border-color:var(--e7a-blue)}
.e7a-ui-button--primary:hover:not(:disabled){background:var(--e7a-text);border-color:var(--e7a-text)}
.e7a-ui-button--secondary{background:transparent;color:var(--e7a-text)}
.e7a-ui-button--secondary:hover:not(:disabled){border-color:var(--e7a-blue);color:var(--e7a-blue)}
.e7a-ui-button--quiet{background:transparent;border-color:transparent;color:var(--e7a-muted)}
.e7a-ui-button--quiet:hover:not(:disabled){color:var(--e7a-text)}
.e7a-ui-panel{border:1px solid var(--e7a-border);padding:clamp(1rem,3vw,2rem);background:var(--e7a-bg);min-width:0}
.e7a-ui-panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.7rem;border-bottom:1px solid var(--e7a-border);padding-bottom:1rem;margin-bottom:1.4rem}
.e7a-ui-panel-head h2{margin:0;font:500 clamp(1.2rem,2vw,1.8rem)/1.15 var(--font-manrope),system-ui,sans-serif;letter-spacing:var(--e7a-tracking-tight)}
.e7a-ui-eyebrow{font:.66rem/1.5 var(--font-jetbrains-mono),ui-monospace,monospace;letter-spacing:var(--e7a-tracking-system);text-transform:uppercase;color:var(--e7a-muted)}
@media(prefers-reduced-motion:reduce){.e7a-ui-button{transition:none}}

/* Product-owned composition. Canonical tokens/themes/button/panel styles are bundled
 * before this file from @e7a-ru/ui@0.4.0, exact published source commit. */
:root { color-scheme: dark; font: 16px/1.65 var(--font-manrope), "Manrope", system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--e7a-bg); }
body { min-height: 100vh; margin: 0; background: var(--e7a-bg); color: var(--e7a-text); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
 background-image: linear-gradient(to right, var(--e7a-grid) 1px, transparent 1px),linear-gradient(to bottom,var(--e7a-grid) 1px,transparent 1px);
 background-size: 6rem 6rem; mask-image: linear-gradient(to bottom,#000,transparent 75%); }
a { color: inherit; }
.identity-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.identity-header, .identity-main, .identity-footer { width: min(100%,var(--e7a-container)); margin-inline: auto; padding-inline: var(--e7a-gutter); }
.identity-header { display: flex; align-items: center; gap: 1.5rem; min-height: 6.25rem; border-bottom: 1px solid var(--e7a-border); }
.identity-brand { display: inline-flex; flex-shrink: 0; align-items: baseline; font: 750 2.25rem/1 var(--font-manrope),system-ui,sans-serif; letter-spacing: var(--e7a-tracking-logo); text-decoration: none; }
.identity-header-product { font: 500 .68rem/1.5 var(--font-jetbrains-mono),ui-monospace,monospace; letter-spacing: var(--e7a-tracking-system); color: var(--e7a-muted); }
.identity-header-product span { color: var(--e7a-blue); padding-inline: .35rem; }
.identity-header-link { margin-left: auto; font-size: .82rem; color: var(--e7a-muted); text-decoration: none; }
.identity-header-link:hover { color: var(--e7a-text); }
.identity-main { padding-block: clamp(4rem,9vw,8.5rem); flex: 1; }
.identity-kicker { margin-bottom: 1.6rem; }
h1 { margin: 0; max-width: 55rem; font: 550 var(--e7a-type-display)/var(--e7a-line-display) var(--font-manrope),system-ui,sans-serif; letter-spacing: var(--e7a-tracking-display); text-wrap: balance; }
.identity-hero { max-width: var(--e7a-measure-copy); }
.identity-lead { margin: 2.5rem 0; max-width: var(--e7a-measure-copy); font-size: var(--e7a-type-lead); line-height: var(--e7a-line-body); color: var(--e7a-muted); }
.identity-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.identity-information { display: grid; max-width: var(--e7a-measure-wide); grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 1rem 1.5rem; border-top: 1px solid var(--e7a-border); padding-top: 1.75rem; margin-top: clamp(4rem,8vw,7rem); }
.identity-index { font: .68rem/1.6 var(--font-jetbrains-mono),ui-monospace,monospace; letter-spacing: .09em; color: var(--e7a-blue); }
.identity-information p { margin: 0; color: var(--e7a-muted); font-size: .9rem; }
.identity-panel { margin-top: 2rem; max-width: var(--e7a-measure-wide); }
.identity-panel h2 { margin: .7rem 0 2rem; font-weight: 550; font-size: var(--e7a-type-heading); line-height: var(--e7a-line-tight); letter-spacing: var(--e7a-tracking-tight); }
dl { margin: 0; display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: .85rem 1.5rem; }
dt { font-size: .82rem; color: var(--e7a-muted); }
dd { margin: 0; min-width: 0; }
code { color: var(--e7a-text); font: .84rem/1.6 var(--font-jetbrains-mono),ui-monospace,monospace; overflow-wrap: anywhere; }
ul { margin: 0; padding-left: 1.2rem; }
li { margin-top: 1rem; }
li code { display: block; }
form { margin-top: 2rem; }
label { display: block; margin-bottom: .45rem; font-size: .85rem; }
input { display: block; width: min(100%,27rem); min-height: 44px; padding: .75rem 1rem; border: 1px solid var(--e7a-border); border-radius: 0; background: var(--e7a-bg); color: var(--e7a-text); font: inherit; }
input:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--e7a-blue); outline-offset: 3px; }
form button { margin-top: .8rem; }
.identity-logout { margin-top: 2rem; }
#status { color: var(--e7a-muted); max-width: 40rem; }
.identity-footer { min-height: 5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--e7a-border); color: var(--e7a-muted); font: .67rem/1.6 var(--font-jetbrains-mono),ui-monospace,monospace; letter-spacing: .06em; }
[hidden] { display: none !important; }
@media(max-width: 580px) { .identity-header { min-height: 5rem; gap: 1rem; } .identity-header-link { display: none; } .identity-main { padding-block: 4rem; } .identity-information { grid-template-columns: 1fr; gap: .35rem; } .identity-information p { margin-bottom: 1rem; } dl { grid-template-columns: 1fr; gap: .25rem; } dd { margin-bottom: 1rem; } .identity-footer { align-items: flex-start; flex-direction: column; justify-content: center; } }
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media(forced-colors: active) { body::before { display: none; } .identity-brand .digit::after { background: Highlight; } }