mimic/frontend/src/styles/index.css

@import './fonts.css';

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

@layer base {
  /* Light mode — default */
  :root {
    --color-canvas: #ffffff;
    --color-paper: #ffffff;
    --color-cloud: #f7f7f7;
    --color-fog: #e8e8e8;
    --color-steel: #c2c2c2;
    --color-hairline: #e8e8e8;
    --color-ink: #1a1a1a;
    --color-ink-soft: #292929;
    --color-ink-deep: #000000;
    --color-ink-on: #ffffff;
    --color-charcoal: #3d3d3d;
    --color-graphite: #636363;

    /* DESIGN.md: body line-height 1.4 when substituting Inter */
    font-size: 16.5px;
  }

  /* Dark mode overrides */
  .dark {
    --color-canvas: #111827;
    --color-paper: #1f2937;
    --color-cloud: #1f2937;
    --color-fog: #374151;
    --color-steel: #4b5563;
    --color-hairline: #4b5563;
    --color-ink: #f9fafb;
    --color-ink-soft: #e5e7eb;
    --color-ink-deep: #ffffff;
    --color-ink-on: #111827;
    --color-charcoal: #d1d5db;
    --color-graphite: #9ca3af;
  }

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

  body {
    @apply bg-canvas text-ink font-sans antialiased;
    font-feature-settings: 'cv11', 'ss01';
  }

  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 gap-xs bg-primary text-white 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 uses fixed dark slab so it doesn't invert in dark mode */
  .btn-ink {
    @apply inline-flex items-center justify-center gap-xs bg-slab text-white 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-slab-hover;
  }
  .btn-ink:disabled {
    @apply bg-steel cursor-not-allowed;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center gap-xs 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:disabled {
    @apply border-steel text-steel cursor-not-allowed;
  }

  .btn-outline-ink {
    @apply inline-flex items-center justify-center gap-xs 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 gap-xxs 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;
  }
  .dark .card-product {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  }

  /* Fixed-color modal backdrop — must not use themed ink (inverts in dark mode) */
  .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6);
  }

  .badge-pill-ink {
    @apply inline-flex items-center bg-ink text-white 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;
  }
}