@layer a2ui-reset, tokens, foundation, shell, components, feature, utilities, ui-kit;

/* Machine-readable source of truth shared by the NESTA APP and Design site. */
@layer tokens {
  :root {
    color-scheme: light;

    --color-ink: #191b1a;
    --color-ink-secondary: #5d625f;
    --color-ink-tertiary: #686d6a;
    --color-canvas: #f5f6f5;
    --color-surface: #ffffff;
    --color-surface-subtle: #f1f3f2;
    --color-line: #dee1df;
    --color-action: #202322;
    --color-attention: #a45b18;
    --color-attention-soft: #faf2e9;
    --color-danger: #b5433c;
    --color-disabled-bg: #e7e9e8;
    --color-disabled-text: #8b908d;
    --color-icon: #515653;
    --color-on-action-muted: #cfd2d0;
    --color-on-action-secondary: #e2e4e3;
    --color-media-placeholder: #d8dad9;
    --color-scrim: rgb(25 27 26 / 28%);
    --color-focus-inner: #ffffff;
    --color-focus-outer: #686d6a;
    --color-nesta-start: #5367ff;
    --color-nesta-end: #2cc9a6;
    --color-recording: #5367ff;
    --color-recording-cancel-bg: #faefee;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    --radius-compact: 8px;
    --radius-icon: 10px;
    --radius-control: 12px;
    --radius-card: 16px;
    --radius-panel: 20px;
    --radius-sheet: 24px;
    --radius-pill: 999px;
    --radius-device: 40px;
    --radius-device-inner: 33px;

    --motion-press: 140ms;
    --shadow-floating: 0 12px 32px rgb(25 27 26 / 10%);
    --shadow-media: 0 8px 10px rgb(25 27 26 / 13%);
    --shadow-switch-thumb: 0 2px 5px rgb(25 27 26 / 16%);
    --shadow-nesta-inset: inset 0 0 0 1px rgb(255 255 255 / 45%);
    --shadow-nesta-idle: 0 0 0 0 rgb(83 103 255 / 0%), 0 0 8px rgb(44 201 166 / 18%);
    --shadow-nesta-working: 0 0 0 6px rgb(83 103 255 / 8%), 0 0 16px rgb(44 201 166 / 32%);
    --focus-control-ring: 0 0 0 2px var(--color-focus-inner), 0 0 0 4px var(--color-focus-outer);
    --focus-field-border: var(--color-ink-tertiary);
    --focus-field-shadow: 0 0 0 3px rgb(104 109 106 / 12%);
    --nesta-light: linear-gradient(135deg, var(--color-nesta-start), var(--color-nesta-end));
    --nesta-mark-fill: radial-gradient(circle at 34% 28%, #ffffff 0 5%, #b9fff0 14%, var(--color-nesta-start) 52%, var(--color-nesta-end) 100%);
    --skeleton-shimmer: linear-gradient(100deg, var(--color-surface-subtle) 20%, var(--color-surface) 40%, var(--color-surface-subtle) 60%);
    --media-overlay: linear-gradient(180deg, rgb(25 27 26 / 8%) 20%, rgb(25 27 26 / 82%));
    --canvas-fade: linear-gradient(var(--color-canvas) 76%, rgb(245 246 245 / 0%));
    --focus-ring: var(--focus-control-ring);

    --control-hit-size: 44px;
    --control-option-hit-size: 48px;
    --control-compact-visual: 36px;
    --switch-width: 48px;
    --switch-height: 28px;

    --type-caption: 12px;
    --type-support: 13px;
    --type-body: 14px;
    --type-callout: 15px;
    --type-section: 17px;
    --type-title: 20px;
  }
}