/* AUVRA UI foundation — the single source of type, colour, radius and control
   tokens shared by Home, Canvas, Studio and Login. Page stylesheets consume
   these variables; they must not redefine the scale with raw values. */
:root {
  color-scheme: dark;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale: caption → display. Every font-size in the product maps here.
     --fs-3xs is reserved for uppercase micro labels and badges. */
  --fs-3xs: 10px;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-display: 40px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.25;
  --lh-body: 1.5;
  --tracking-caps: .12em;

  /* Neutral surfaces, darkest to lightest. */
  --surface-canvas: rgb(13,13,13);
  --surface-1: rgb(20,20,20);
  --surface-2: rgb(27,27,27);
  --surface-panel: rgb(32,32,32);
  --surface-menu: rgb(38,38,38);
  --hairline: rgba(255,255,255,.04);
  --line-1: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --hover-fill: rgba(255,255,255,.08);
  --active-fill: rgba(255,255,255,.12);

  /* Text ladder. */
  --text-1: rgba(255,255,255,1);
  --text-2: rgba(255,255,255,.7);
  --text-3: rgba(255,255,255,.6);
  --text-4: rgba(255,255,255,.35);
  --text-5: rgba(255,255,255,.2);

  /* Actions and states. White is the only accent; colour carries meaning. */
  --accent: #f2f2f2;
  --accent-hover: #fff;
  --accent-ink: #111;
  --focus-ring: rgba(255,255,255,.55);
  --danger: #e07070;
  --warning: #d9a45c;
  --success: #5fb37a;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --control-h: 36px;
  --control-h-sm: 28px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: .1s;
  --t-base: .15s;
  --t-slow: .3s;
  --menu-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px var(--line-1);
}

html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: rgba(255,255,255,.22); }

/* Native <select>: same trigger as the canvas custom dropdown. */
select {
  appearance: none;
  -webkit-appearance: none;
  min-height: var(--control-h-sm);
  padding: 0 28px 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text-1);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
select:hover { background-color: var(--hover-fill); }
select:focus-visible { outline: none; border-color: var(--line-2); }
select option { background: var(--surface-menu); color: var(--text-1); }

/* Headings and inline emphasis never go heavier than semibold. */
h1, h2, h3, h4, h5, h6, b, strong, th { font-weight: var(--fw-semibold); }

/* ── Motion language ─────────────────────────────────────────────────────
   Things enter from where they come from (menus drop from their trigger,
   dialogs rise toward the viewer, content settles upward), leave faster than
   they arrive, and never bounce more than a hair. Keyframes animate the
   individual translate/scale properties so they never fight an element's own
   positioning transform. */
:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.36,.64,1);
  --t-enter: .32s;
  --t-reveal: .6s;
}
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; scale: .97; translate: 0 -4px; } }
@keyframes ui-rise { from { opacity: 0; translate: 0 12px; } }
@keyframes ui-dialog-in { from { opacity: 0; scale: .96; translate: 0 10px; } }

dialog[open] { animation: ui-dialog-in var(--t-enter) var(--ease-out); }
dialog[open]::backdrop { animation: ui-fade var(--t-enter) var(--ease-out); }

/* Press feedback for primary actions: a short, physical give. No transition
   here, so each control keeps its own transition list. */
:is(.rail-new-project, .global-top-action, .global-account-action, .global-primary-action, .new-project-button, .primary-button, .composer-generate, .canvas-toolbar button, .canvas-zoom button, .submit):not(:disabled):active { scale: .96; }

/* Page-to-page: same-origin navigations crossfade; opening a project grows
   its card into the canvas (the card and .canvas-root share canvas-stage). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; animation-timing-function: var(--ease); }
::view-transition-group(canvas-stage) { animation-duration: .46s; animation-timing-function: var(--ease-out); }
::view-transition-old(canvas-stage), ::view-transition-new(canvas-stage) { height: 100%; object-fit: cover; }
::view-transition-group(canvas-stage) { border-radius: var(--radius-md); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}