/* =====================================================================
   Bydlo Design System — Color & Type Foundations
   Reverse-engineered from Tydlydaa/bydlo-franta (src/index.css +
   tailwind.config.js). All HSL values match the production system.
   ===================================================================== */

/* --- Web fonts -------------------------------------------------------- */
/* Plus Jakarta Sans is the closest open-source substitution for the
   product's default sans (shadcn/new-york neutral geometric).
   ⚠️ FLAG: The production app uses the Vite default system sans stack;
   Plus Jakarta Sans is our chosen brand substitute for a warmer feel.
   Replace with the final brand font when licensed. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Base color tokens (exact from src/index.css) ------------------ */
  --background:             40 14% 97%;  /* warm cream */
  --foreground:             25 10% 12%;  /* deep warm near-black */
  --card:                   40 20% 99%;
  --card-foreground:        25 10% 12%;
  --popover:                40 20% 99%;
  --popover-foreground:     25 10% 12%;
  --primary:                13 52% 53%;  /* terracotta — the brand */
  --primary-foreground:     40 20% 98%;
  --secondary:              35 10% 94%;
  --secondary-foreground:   25 10% 12%;
  --muted:                  35 10% 94%;
  --muted-foreground:       25  6% 45%;
  --accent:                 35 10% 94%;
  --accent-foreground:      25 10% 12%;
  --destructive:             0 84% 60%;
  --destructive-foreground:  0  0% 98%;
  --border:                 30  8% 88%;
  --input:                  30  8% 88%;
  --ring:                   13 52% 53%;
  --radius: 0.5rem;

  /* Success (emerald — not part of base scale, used literally) */
  --success-50:  167 85% 96%;   /* emerald-50  */
  --success-100: 163 94% 91%;   /* emerald-100 */
  --success-200: 160 84% 80%;   /* emerald-200 */
  --success-500: 160 84% 39%;   /* emerald-500 */
  --success-600: 162 94% 30%;   /* emerald-600 */
  --success-700: 163 94% 24%;   /* emerald-700 */

  /* Extra subtle text (custom utility .text-subtle in src/index.css) */
  --subtle:                 25  4% 62%;

  /* --- Semantic color aliases (fg1, fg2, bg1…) ---------------------- */
  --bg-1:   hsl(var(--background));                  /* page background */
  --bg-2:   hsl(var(--card));                        /* raised surface */
  --bg-3:   hsl(var(--muted));                       /* sunken surface */
  --fg-1:   hsl(var(--foreground));                  /* primary text */
  --fg-2:   hsl(var(--muted-foreground));            /* secondary text */
  --fg-3:   hsl(var(--subtle));                      /* tertiary/meta */
  --brand:  hsl(var(--primary));                     /* terracotta CTA */
  --brand-contrast: hsl(var(--primary-foreground));  /* on-brand text */
  --divider: hsl(var(--border));
  --ring-brand: hsl(var(--ring));

  /* --- Shadow system (barely-there paper) --------------------------- */
  --shadow-rest:  0 1px 3px 0 rgb(0 0 0 / 0.04);
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-hover: 0 8px 24px 0 rgb(0 0 0 / 0.06);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.1),
                  0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* --- Type stack --------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui,
               -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, sans-serif;
  --font-display: var(--font-sans);    /* no separate display face */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, 'Liberation Mono', monospace;

  /* --- Type scale (matches Tailwind scale used in codebase) --------- */
  --text-xs:   0.75rem;    /* 12px — eyebrow / meta */
  --text-sm:   0.875rem;   /* 14px — small body, buttons */
  --text-base: 1rem;       /* 16px — body default */
  --text-lg:   1.125rem;   /* 18px — lead paragraph */
  --text-xl:   1.25rem;    /* 20px — small headings, hero subtitle */
  --text-2xl:  1.5rem;     /* 24px — h2, section titles */
  --text-3xl:  1.875rem;   /* 30px — h1 in-product */
  --text-6xl:  3.75rem;    /* 60px — hero (mobile) */
  --text-7xl:  4.5rem;     /* 72px — hero (desktop) */

  --leading-tight:   1.05;   /* hero */
  --leading-snug:    1.2;    /* h2 */
  --leading-normal:  1.5;    /* UI text */
  --leading-relaxed: 1.625;  /* paragraphs */

  --tracking-tight:  -0.025em;  /* headings */
  --tracking-wide:   0.05em;    /* eyebrow ALL CAPS */
}

/* =====================================================================
   Semantic element styles — apply these directly to HTML elements
   or use as @apply sources in component layers.
   ===================================================================== */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 900;                /* Bydlo hero is font-black */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  h1, .h1 { font-size: var(--text-7xl); }
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
@media (min-width: 1024px) {
  h2, .h2 { font-size: 1.875rem; }
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

small, .meta {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.text-subtle { color: var(--fg-3); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Hero subtitle gradient fade (from src/index.css) */
.text-gradient-fade {
  background: linear-gradient(to right,
              hsl(var(--foreground)),
              hsl(var(--foreground) / 0.3));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Terracotta pulse glow — the empty-state textarea breathing effect */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0    hsl(var(--primary) / 0.2); }
  50%      { box-shadow: 0 0 0 4px  hsl(var(--primary) / 0.1); }
}
.animate-pulse-glow {
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}