/* ------------------------------------------------------------------
 * d4l-ui.css — shared design tokens + atomic component styles
 *
 * Vendored from next-research-studio (see src/components/atomics/SYNC.md
 * for source paths and commit SHAs). DO NOT edit this file directly;
 * upstream changes should be reconciled via the sync process described
 * in SYNC.md so that phoenix and next-research-studio stay visually
 * in sync.
 *
 * Loaded web-only via <link> in public/index.html. Never bundled into
 * the native iOS/Android builds.
 * ------------------------------------------------------------------ */

/* === Fonts ======================================================== */

@font-face {
  font-family: 'MetaSerifPro';
  src: url('/fonts/MetaSerifPro-Book.woff2') format('woff2'),
       url('/fonts/MetaSerifPro-Book.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT-America';
  src: url('/fonts/GT-America-Standard-Light.woff2') format('woff2'),
       url('/fonts/GT-America-Standard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT-America';
  src: url('/fonts/GT-America-Standard-Regular.woff2') format('woff2'),
       url('/fonts/GT-America-Standard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT-America';
  src: url('/fonts/GT-America-Standard-Medium.woff2') format('woff2'),
       url('/fonts/GT-America-Standard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* === Design tokens =================================================
 * Source: next-research-studio/src/app/global.scss :root
 * Kept as CSS custom properties so the values match 1:1 and can be
 * referenced from inline styles on RN-web components as well.
 * ================================================================= */

:root {
  /* Colors */
  --color-white: #fff;
  --color-black: #000;

  --color-primary: #000080;
  --color-primary-light: #333399;
  --color-primary-lighter: #999fcb;
  --color-primary-lightest: #cccfe5;
  --color-primary-extra-light: #e5e6f2;

  --color-secondary: #ff5e59;
  --color-secondary-light: #ffa19d;
  --color-secondary-lighter: #ffd0ce;
  --color-secondary-lightest: #ffe8e6;

  --color-tertiary: #ffd2c3;
  --color-tertiary-light: #ffdbcf;
  --color-tertiary-lighter: #ffede7;
  --color-tertiary-lightest: #fff6f3;

  --color-neutral: #595757;
  --color-neutral-light: #acaba8;
  --color-neutral-lighter: #dedcda;
  --color-neutral-lightest: #f2f0f1;
  --color-neutral-extra-light: #faf8f8;
  --color-neutral-transparent: rgba(88, 87, 87, 0.05);

  --color-feedback-success: #00855f;
  --color-feedback-success-light: #40a487;
  --color-feedback-success-lighter: #80c2af;
  --color-feedback-success-lightest: #c0e1d7;
  --color-feedback-success-extra-light: #e0f0eb;

  --color-feedback-warning: #d39f00;
  --color-feedback-warning-light: #e6b800;
  --color-feedback-warning-lighter: #f2d600;
  --color-feedback-warning-lightest: #f7ebcc;
  --color-feedback-warning-extra-light: #fdf5e6;

  --color-feedback-alarm: #d53939;
  --color-feedback-alarm-light: #e75252;
  --color-feedback-alarm-lighter: #ef6868;
  --color-feedback-alarm-lightest: #f7bcbc;
  --color-feedback-alarm-extra-light: #fdeaea;

  --color-support-green: #d7eecb;
  --color-support-yellow: #ffebaa;
  --color-support-blue: #bdd4f0;
  --color-support-lime: #ebf0c8;
  --color-support-violet: #c8aebf;
  --color-support-violet-light: #e3d6df;
  --color-support-blue-light: #ccdef1;

  /* Font */
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 40px;

  --font-bold: 500;
  --font-normal: 400;
  --font-light: 300;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --shadow-s: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
  --shadow-m: 0 3px 12px 0px rgba(0, 0, 0, 0.08);
  --shadow-l: 0 8px 8px 0 rgba(0, 0, 0, 0.24);

  /* Borders */
  --border-radius-xs: 4px;
  --border-radius-s: 8px;
  --border-radius-m: 16px;
  --border-radius-l: 24px;
  --border-radius-xl: 32px;

  --border-width-s: 1px;
  --border-width-m: 2px;
  --border-width-l: 6px;

  /* Spacing */
  --space-xxxs: 2px;
  --space-xxs: 8px;
  --space-xs: 16px;
  --space-s: 24px;
  --space-m: 32px;
  --space-l: 40px;
  --space-xl: 48px;
  --space-xxl: 56px;
  --space-xxxl: 64px;
}

/* === Button =======================================================
 * Source: next-research-studio/src/components/atomics/buttons/button.module.scss
 * Flattened from SCSS to plain CSS; classnames namespaced under
 * `d4l-btn-*` so they don't collide with RN-web's generated classes or
 * with any other global styles.
 *
 * Variants: primary | secondary | tertiary | text | primary-icon |
 *           secondary-icon | tertiary-icon
 * Modifiers: .d4l-btn--loading, .d4l-btn--danger, .d4l-btn--full-width
 * ================================================================= */

.d4l-btn {
  box-sizing: border-box;
  height: 40px;
  padding: var(--space-xxxs) var(--space-xs);
  border: var(--border-width-s) solid;
  border-radius: var(--border-radius-s);
  font-family: 'GT-America', sans-serif;
  font-weight: var(--font-bold);
  font-size: var(--font-size-m);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  column-gap: var(--space-xxs);
}

.d4l-btn--full-width {
  width: 100%;
}

/* Icon-only variants collapse to a square */
.d4l-btn--primary-icon,
.d4l-btn--secondary-icon,
.d4l-btn--tertiary-icon {
  padding: 0;
  width: 40px;
}

/* --- Primary ---------------------------------------------------- */

.d4l-btn--primary:not(:disabled),
.d4l-btn--primary.d4l-btn--loading,
.d4l-btn--primary-icon:not(:disabled),
.d4l-btn--primary-icon.d4l-btn--loading {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.d4l-btn--primary:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--primary:not(.d4l-btn--loading):not(:disabled):focus,
.d4l-btn--primary-icon:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--primary-icon:not(.d4l-btn--loading):not(:disabled):focus {
  background-color: var(--color-primary-light);
  box-shadow: inset 0 0 0 var(--border-width-s) var(--color-primary);
}

.d4l-btn--primary:not(.d4l-btn--loading):not(:disabled):active,
.d4l-btn--primary-icon:not(.d4l-btn--loading):not(:disabled):active {
  background-color: var(--color-primary-lighter);
  box-shadow: inset 0 0 0 var(--border-width-s) var(--color-primary);
}

/* --- Secondary -------------------------------------------------- */

.d4l-btn--secondary:not(:disabled),
.d4l-btn--secondary.d4l-btn--loading,
.d4l-btn--secondary-icon:not(:disabled),
.d4l-btn--secondary-icon.d4l-btn--loading {
  background-color: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.d4l-btn--secondary:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--secondary:not(.d4l-btn--loading):not(:disabled):focus,
.d4l-btn--secondary-icon:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--secondary-icon:not(.d4l-btn--loading):not(:disabled):focus {
  background-color: var(--color-primary-extra-light);
  box-shadow: inset 0 0 0 var(--border-width-s) var(--color-primary);
}

.d4l-btn--secondary:not(.d4l-btn--loading):not(:disabled):active,
.d4l-btn--secondary-icon:not(.d4l-btn--loading):not(:disabled):active {
  background-color: var(--color-primary-lightest);
  box-shadow: inset 0 0 0 var(--border-width-s) var(--color-primary);
}

/* --- Tertiary --------------------------------------------------- */

.d4l-btn--tertiary:not(:disabled),
.d4l-btn--tertiary.d4l-btn--loading,
.d4l-btn--tertiary-icon:not(:disabled),
.d4l-btn--tertiary-icon.d4l-btn--loading {
  background-color: var(--color-neutral-extra-light);
  color: var(--color-primary);
  border-color: var(--color-neutral-extra-light);
}

.d4l-btn--tertiary:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--tertiary:not(.d4l-btn--loading):not(:disabled):focus,
.d4l-btn--tertiary:not(.d4l-btn--loading):not(:disabled):active,
.d4l-btn--tertiary-icon:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--tertiary-icon:not(.d4l-btn--loading):not(:disabled):focus,
.d4l-btn--tertiary-icon:not(.d4l-btn--loading):not(:disabled):active {
  background-color: var(--color-primary-extra-light);
}

/* --- Text ------------------------------------------------------- */

.d4l-btn--text {
  padding: var(--space-xxxs);
}

.d4l-btn--text:not(:disabled),
.d4l-btn--text.d4l-btn--loading {
  background-color: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.d4l-btn--text:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--text:not(.d4l-btn--loading):not(:disabled):focus {
  background-color: var(--color-neutral-extra-light);
  border-color: var(--color-neutral-extra-light);
}

.d4l-btn--text:not(.d4l-btn--loading):not(:disabled):active {
  background-color: var(--color-primary-extra-light);
}

/* --- Danger modifier (overrides per-variant colours) ------------ */

.d4l-btn--primary.d4l-btn--danger:not(:disabled),
.d4l-btn--primary.d4l-btn--danger.d4l-btn--loading,
.d4l-btn--primary-icon.d4l-btn--danger:not(:disabled),
.d4l-btn--primary-icon.d4l-btn--danger.d4l-btn--loading {
  background-color: var(--color-feedback-alarm);
  color: var(--color-white);
  border-color: var(--color-feedback-alarm);
}

.d4l-btn--primary.d4l-btn--danger:not(.d4l-btn--loading):not(:disabled):hover,
.d4l-btn--primary.d4l-btn--danger:not(.d4l-btn--loading):not(:disabled):focus {
  background-color: var(--color-feedback-alarm-light);
}

.d4l-btn--primary.d4l-btn--danger:not(.d4l-btn--loading):not(:disabled):active {
  background-color: var(--color-feedback-alarm-lighter);
}

.d4l-btn--secondary.d4l-btn--danger:not(:disabled),
.d4l-btn--secondary.d4l-btn--danger.d4l-btn--loading,
.d4l-btn--secondary-icon.d4l-btn--danger:not(:disabled),
.d4l-btn--secondary-icon.d4l-btn--danger.d4l-btn--loading {
  background-color: var(--color-white);
  color: var(--color-feedback-alarm);
  border-color: var(--color-feedback-alarm);
}

.d4l-btn--text.d4l-btn--danger {
  color: var(--color-feedback-alarm);
}

/* --- Disabled --------------------------------------------------- */

.d4l-btn:not(.d4l-btn--loading):disabled {
  cursor: not-allowed;
}

.d4l-btn--primary:not(.d4l-btn--loading):disabled,
.d4l-btn--primary-icon:not(.d4l-btn--loading):disabled {
  background-color: var(--color-neutral-lightest);
  border-color: var(--color-neutral-lightest);
  color: var(--color-neutral);
}

.d4l-btn--secondary:not(.d4l-btn--loading):disabled,
.d4l-btn--secondary-icon:not(.d4l-btn--loading):disabled {
  background-color: var(--color-white);
  border-color: var(--color-neutral);
  color: var(--color-neutral);
}

.d4l-btn--tertiary:not(.d4l-btn--loading):disabled,
.d4l-btn--tertiary-icon:not(.d4l-btn--loading):disabled {
  background-color: var(--color-neutral-lightest);
  border-color: var(--color-neutral);
  color: var(--color-neutral);
}

.d4l-btn--text:not(.d4l-btn--loading):disabled {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-neutral);
}

/* --- Loading indicator ------------------------------------------ */

.d4l-btn--loading {
  cursor: not-allowed;
}

.d4l-btn__label {
  font-weight: var(--font-bold);
  font-size: var(--font-size-m);
}

/* Hide label text while the spinner is shown */
.d4l-btn__hidden {
  color: transparent;
}

.d4l-btn__icon > svg {
  width: 24px;
  height: 24px;
}

.d4l-btn__spinner-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Minimal CSS-only spinner (replaces next-research-studio's <Spinner />
   so this file has no JS dependencies beyond the Button component). */
.d4l-btn__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: d4l-btn-spin 0.7s linear infinite;
}

@keyframes d4l-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Visually-hidden label for icon-only buttons (a11y) */
.d4l-btn__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}