@import '@fontsource-variable/plus-jakarta-sans/index.css';
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/700.css';

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

/* ──────────────────────────────────────────────────────────────────────────
   Indie Hacker Portfolio — Day 14
   Light-only. Warm paper #F8F6F1. Electric blue #2563EB.
   Plus Jakarta Sans (headings + body) + JetBrains Mono (numbers only).
   ────────────────────────────────────────────────────────────────────────── */

@layer base {
  :root {
    color-scheme: light;
    /* Surfaces */
    --color-bg:           #F8F6F1;  /* warm paper */
    --color-surface:      #FFFFFF;  /* card surface */
    --color-surface-2:    #F0EDE8;  /* slightly darker band */
    /* Text */
    --color-text:         #0F172A;  /* slate-900 */
    --color-text-body:    #334155;  /* slate-700 */
    --color-text-muted:   #475569;  /* slate-600 — 5.9:1 on paper, 5.74:1 on white */
    --color-text-subtle:  #475569;  /* slate-600 — same token; distinction by size/weight */
    /* Electric blue accent — blue-700 for AA compliance on all surfaces */
    --color-accent:       #1D4ED8;  /* blue-700 — 6.4:1 on paper, 6.5:1 on white */
    --color-accent-hover: #1E40AF;  /* blue-800 */
    --color-accent-light: #EFF6FF;  /* blue-50 */
    --color-on-accent:    #FFFFFF;
    /* Borders */
    --color-border:       #E2E8F0;  /* slate-200 */
    --color-border-strong:#CBD5E1;  /* slate-300 */
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
  }

  body {
    font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-feature-settings: 'kern', 'liga';
    background-color: var(--color-bg);
    color: var(--color-text-body);
    line-height: 1.7;
    overflow-x: hidden;
  }

  ::selection {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  *:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
  }
}

@layer components {
  /* Layout containers */
  .container-x {
    @apply mx-auto w-full max-w-7xl px-5 sm:px-8 lg:px-10;
  }
  .container-narrow {
    @apply mx-auto w-full max-w-content px-5 sm:px-6;
  }

  /* Section spacing */
  .section-gap {
    @apply py-16 sm:py-20 lg:py-24;
  }

  /* Eyebrow label */
  .label-eyebrow {
    font-family: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-accent);
  }

  /* Stat numbers — JetBrains Mono, the revenue signal */
  .stat-number {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  /* Buttons */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-family: 'Plus Jakarta Sans Variable', sans-serif;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.6875rem 1.25rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
    min-height: 44px;
    text-decoration: none;
  }
  .btn-primary:hover {
    background-color: var(--color-accent-hover);
  }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--color-text);
    font-family: 'Plus Jakarta Sans Variable', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.6875rem 1.25rem;
    border-radius: 0.375rem;
    border: 1.5px solid var(--color-border-strong);
    transition: border-color 0.12s ease, background-color 0.12s ease;
    min-height: 44px;
    text-decoration: none;
  }
  .btn-ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-accent-light);
  }

  .btn-outline-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-family: 'Plus Jakarta Sans Variable', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1.5px solid var(--color-accent);
    transition: background-color 0.12s ease;
    min-height: 36px;
    text-decoration: none;
  }
  .btn-outline-accent:hover {
    background-color: #DBEAFE;
  }

  /* Product card */
  .product-card {
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
  }
  .product-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 24px rgba(37, 99, 235, 0.08);
  }

  /* Status badges */
  .badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #DCFCE7;
    color: #15803D;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .badge-sunset {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #FEF9C3;
    color: #854D0E;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .badge-sold {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Avatar — initials circle */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 9999px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-family: 'Plus Jakarta Sans Variable', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }

  /* Subscribe form */
  .subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 30rem;
  }
  @media (min-width: 480px) {
    .subscribe-form {
      flex-direction: row;
    }
  }
  .subscribe-form input[type='email'] {
    flex: 1;
    background-color: #FFFFFF;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 0.375rem;
    padding: 0.6875rem 0.875rem;
    font-family: 'Plus Jakarta Sans Variable', sans-serif;
    font-size: 1rem;
    color: var(--color-text);
    min-height: 44px;
  }
  .subscribe-form input[type='email']:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
  }
  .subscribe-form input[type='email']::placeholder {
    color: var(--color-text-subtle);
  }
  .subscribe-form button[type='submit'] {
    @apply btn-primary;
    flex-shrink: 0;
  }

  /* Social icon link */
  .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-muted);
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
    text-decoration: none;
  }
  .social-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: var(--color-accent-light);
  }

  /* Tech stack pill */
  .tech-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    white-space: nowrap;
  }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
  .text-pretty  { text-wrap: pretty; }
  .text-accent  { color: var(--color-accent); }
  .text-muted   { color: var(--color-text-muted); }
  .text-subtle  { color: var(--color-text-subtle); }
  .text-body    { color: var(--color-text-body); }
  .border-accent{ border-color: var(--color-accent); }
  .bg-paper     { background-color: var(--color-bg); }
  .bg-surface   { background-color: var(--color-surface); }
  .bg-surface-2 { background-color: var(--color-surface-2); }
  .bg-accent-light { background-color: var(--color-accent-light); }
}
