mimic/frontend/src/styles/index.css

@import './fonts.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body,
  #root {
    height: 100%;
  }

  body {
    @apply bg-canvas text-ink font-sans antialiased;
    /* DESIGN.md: body line-height 1.4 when substituting Inter */
    font-feature-settings: 'cv11', 'ss01';
  }

  /* Compensate for Inter being slightly narrower than Forma DJR Micro (~3%) */
  :root {
    font-size: 16.5px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1;
    font-weight: 500;
  }
}

@layer components {
  /*
   * DESIGN.md component recipes.
   * Buttons stay sharp (rounded-md = 4px); cards stay soft (rounded-xl = 16px).
   */
  .btn-primary {
    @apply inline-flex items-center justify-center bg-primary text-ink-on uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
  }
  .btn-primary:hover {
    @apply bg-primary-deep;
  }
  .btn-primary:disabled {
    @apply bg-steel cursor-not-allowed;
  }

  .btn-ink {
    @apply inline-flex items-center justify-center bg-ink text-ink-on uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
  }
  .btn-ink:hover {
    @apply bg-ink-soft;
  }
  .btn-ink:disabled {
    @apply bg-steel cursor-not-allowed;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center bg-canvas text-primary border border-primary uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
  }
  .btn-outline:hover {
    @apply bg-primary-soft;
  }

  .btn-outline-ink {
    @apply inline-flex items-center justify-center bg-canvas text-ink border border-ink uppercase tracking-[0.7px] font-semibold text-[14px] leading-[1.4] rounded-md px-xl py-sm h-11 transition-colors;
  }
  .btn-outline-ink:hover {
    @apply bg-cloud;
  }

  .btn-text-link {
    @apply inline-flex items-center text-primary font-medium text-[16px] leading-[1.38] underline-offset-2 hover:underline;
  }

  .text-input {
    @apply block w-full bg-canvas text-ink rounded-md border border-steel px-md py-sm h-11 text-[16px] leading-[1.38] focus:outline-none focus:border-ink;
  }

  .card-product {
    @apply bg-canvas rounded-xl p-xl shadow-soft-lift;
  }

  .badge-pill-ink {
    @apply inline-flex items-center bg-ink text-ink-on rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
  }

  .badge-pill-outline {
    @apply inline-flex items-center bg-canvas text-ink border border-ink rounded-lg px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
  }
}