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;
    /* Semantic status tokens — WCAG AA on canvas and slab surfaces */
    --color-success: #16a34a;
    --color-success-soft: #dcfce7;
    --color-warn: #d97706;
    --color-warn-soft: #fef3c7;
  }

  /* 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;
    /* Semantic status tokens — dark variants, WCAG AA on #111827 slab */
    --color-success: #22c55e;
    --color-success-soft: #14532d;
    --color-warn: #f59e0b;
    --color-warn-soft: #78350f;
  }

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

  body {
    @apply bg-canvas text-ink font-sans antialiased;
    font-size: 16px;
    line-height: 1.4;
    font-feature-settings: 'cv11', 'ss01';
  }

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

@layer components {
  /*
   * Terminal-SOC brutalist component recipes.
   * border-radius: 0 everywhere except .badge-pill-* (status pills only).
   * No transition-* on any interactive surface.
   */

  .btn-primary {
    @apply inline-flex items-center justify-center gap-xs bg-primary text-white uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
  }
  .btn-primary:hover {
    @apply bg-primary-deep;
  }
  .btn-primary:disabled {
    @apply bg-steel cursor-not-allowed;
  }

  /* btn-ink: fixed dark slab — does not invert in dark mode */
  .btn-ink {
    @apply inline-flex items-center justify-center gap-xs bg-slab text-slab-text uppercase font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
  }
  .btn-ink:hover {
    @apply opacity-80;
  }
  .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 font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
  }
  .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 font-semibold text-[14px] leading-[1.4] rounded-none px-xl py-sm h-11;
  }
  .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.4] underline-offset-2 hover:underline;
  }

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

  /* Panel / card — hairline border, no shadow, no radius */
  .card-product {
    @apply bg-paper border border-hairline rounded-none p-md;
  }

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

  /* Status pill badges — ONLY surfaces with rounded-pill */
  .badge-pill-ink {
    @apply inline-flex items-center bg-ink text-white rounded-pill 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-pill px-3 py-[6px] text-[14px] leading-[1.3] font-medium;
  }

  /* MITRE technique tags — angular, not pills */
  .tag-mitre {
    @apply inline-flex items-center bg-cloud text-ink border border-hairline rounded-none px-2 py-[2px] font-mono text-[12px] leading-[1.33];
  }
}