/* Retalery · MVP in progress page
   Colours, type, spacing and radii come from the Retalery V1 design tokens (retalery-tokens.css). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }

:root {
  /* Colour */
  --rt-color-bg-canvas: #FFFFFF;
  --rt-color-bg-subtle: #F6F4EF;
  --rt-color-surface-default: #FFFFFF;
  --rt-color-text-primary: #17211D;
  --rt-color-text-secondary: #3F4743;
  --rt-color-text-muted: #5A5F5B;
  --rt-color-border-subtle: #DCD8CF;
  --rt-color-border-focus: #17211D;
  --rt-color-action-primary: #17211D;
  --rt-color-action-primary-hover: #2A3831;
  --rt-color-action-on-primary: #EEEAE2;
  --rt-color-accent-sage: #7F9A87;
  --rt-color-accent-sage-soft: #E5ECE7;

  /* Type */
  --rt-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rt-type-display: 600 40px/44px var(--rt-font);
  --rt-type-title-page: 600 28px/34px var(--rt-font);
  --rt-type-body-lg: 400 17px/26px var(--rt-font);
  --rt-type-body: 400 15px/24px var(--rt-font);
  --rt-type-label: 600 15px/20px var(--rt-font);
  --rt-type-overline: 600 12px/16px var(--rt-font);
  --rt-type-caption: 400 12px/16px var(--rt-font);

  /* Space, shape, motion */
  --rt-space-2: 8px;
  --rt-space-3: 12px;
  --rt-space-4: 16px;
  --rt-space-6: 24px;
  --rt-space-8: 32px;
  --rt-space-10: 40px;
  --rt-space-12: 48px;
  --rt-space-16: 64px;
  --rt-radius-md: 10px;
  --rt-radius-xl: 20px;
  --rt-radius-full: 999px;
  --rt-border-hairline: 1px;
  --rt-border-focus: 2px;
  --rt-shadow-1: 0 1px 2px rgba(23, 33, 29, 0.06), 0 4px 12px rgba(23, 33, 29, 0.08);
  --rt-motion-duration-fast: 120ms;
  --rt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --rt-size-button-lg: 50px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--rt-color-bg-subtle);
  color: var(--rt-color-text-primary);
  font: var(--rt-type-body);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

/* Layout: logo above, card centred in the remaining space */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-10);
  padding: var(--rt-space-12) var(--rt-space-4);
}

.brand__logo {
  width: 168px;
  height: auto;
}

/* The card */
.card {
  width: 100%;
  max-width: 560px;
  background: var(--rt-color-surface-default);
  border: var(--rt-border-hairline) solid var(--rt-color-border-subtle);
  border-radius: var(--rt-radius-xl);
  box-shadow: var(--rt-shadow-1);
  padding: var(--rt-space-8) var(--rt-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-4);
}

.overline {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  align-self: flex-start;
  padding: 6px var(--rt-space-3);
  border-radius: var(--rt-radius-full);
  background: var(--rt-color-accent-sage-soft);
  color: var(--rt-color-text-primary);
  font: var(--rt-type-overline);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rt-color-accent-sage);
  flex: none;
}

.title {
  font: var(--rt-type-title-page);
  letter-spacing: -0.02em;
  color: var(--rt-color-text-primary);
}

.body {
  font: var(--rt-type-body-lg);
  color: var(--rt-color-text-secondary);
}

.divider {
  height: var(--rt-border-hairline);
  background: var(--rt-color-border-subtle);
  margin: var(--rt-space-2) 0;
}

/* Investor download */
.investors {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-3);
}

.investors__label {
  font: var(--rt-type-label);
  color: var(--rt-color-text-primary);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-2);
  width: 100%;
  min-height: var(--rt-size-button-lg);
  padding: 0 var(--rt-space-6);
  border-radius: var(--rt-radius-md);
  background: var(--rt-color-action-primary);
  color: var(--rt-color-action-on-primary);
  font: var(--rt-type-label);
  text-decoration: none;
  text-align: center;
  transition: background-color var(--rt-motion-duration-fast) var(--rt-motion-easing-standard);
}

.button:hover { background: var(--rt-color-action-primary-hover); }

.button:focus-visible {
  outline: var(--rt-border-focus) solid var(--rt-color-border-focus);
  outline-offset: 3px;
}

.button__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.caption {
  font: var(--rt-type-caption);
  color: var(--rt-color-text-muted);
}

/* Two decks: India and international */
.deck-options {
  display: grid;
  gap: var(--rt-space-4);
}

.deck-option {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-2);
}

/* Mobile: centre the status pill and the investor label and file details */
@media (max-width: 599px) {
  .overline { align-self: center; }
  .investors__label,
  .caption { text-align: center; }
}

/* Tablet and up */
@media (min-width: 600px) {
  .page { gap: var(--rt-space-12); padding: var(--rt-space-16) var(--rt-space-6); }
  .brand__logo { width: 200px; }
  .card { padding: var(--rt-space-12); gap: var(--rt-space-6); }
  .title { font: var(--rt-type-display); letter-spacing: -0.02em; }
  .deck-options { justify-content: start; grid-template-columns: max-content; }
  .button { width: 100%; }
}

/* Desktop */
@media (min-width: 1024px) {
  .brand__logo { width: 220px; }
  .card { max-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

@media print {
  body { background: #FFFFFF; }
  .card { box-shadow: none; }
}