/* ============================================================
   FixFlow Design System — colors & type
   Source of truth: tailwind.config.js + src/index.css from
   the FixFlow internal app (rekace92/fixflow @ main).
   This file extracts the brand-facing tokens for the
   marketing website.
   ============================================================ */

/* ---------- Webfont: Plus Jakarta Sans ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
    U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* =========================================================
     COLORS
     ---------------------------------------------------------
     Brand:  Modern SaaS Blue → Emerald Green gradient
     The product gradient (favicon, logo wordmark) runs
     #1E63F0 → #22C55E. Solid primary is #2563EB.
     ========================================================= */

  /* Primary (Modern Blue) */
  --brand-primary:        #2563EB;
  --brand-primary-dark:   #1D4ED8;
  --brand-primary-light:  #EFF6FF;
  --brand-primary-50:     #EFF6FF;
  --brand-primary-100:    #DBEAFE;
  --brand-primary-600:    #2563EB;
  --brand-primary-700:    #1D4ED8;
  --brand-primary-900:    #1E3A8A;

  /* Secondary (Teal-Blue Accent) */
  --brand-secondary:        #06B6D4;
  --brand-secondary-hover:  #0891B2;
  --brand-secondary-light:  #CFFAFE;

  /* Brand gradient (for hero + marks) */
  --brand-gradient-from:  #1E63F0;
  --brand-gradient-via:   #2563EB;
  --brand-gradient-to:    #22C55E;
  --brand-gradient: linear-gradient(135deg, #1E63F0 0%, #22C55E 100%);
  --brand-gradient-soft:
    linear-gradient(135deg, #EFF6FF 0%, #ECFDF5 100%);

  /* Semantic — success / warning / danger / approval */
  --color-success:        #10B981;
  --color-success-hover:  #059669;
  --color-success-light:  #D1FAE5;
  --color-success-text:   #065F46;

  --color-warning:        #F59E0B;
  --color-warning-hover:  #D97706;
  --color-warning-light:  #FEF3C7;
  --color-warning-text:   #92400E;

  --color-danger:         #EF4444;
  --color-danger-hover:   #DC2626;
  --color-danger-light:   #FEE2E2;
  --color-danger-text:    #7F1D1D;

  --color-approval:       #2563EB;
  --color-approval-hover: #1D4ED8;
  --color-approval-light: #DBEAFE;
  --color-approval-text:  #1E3A8A;

  /* Neutrals (slate scale, the app's neutral) */
  --fg-1:        #0F172A; /* primary text — slate-900 */
  --fg-2:        #334155; /* body text — slate-700 */
  --fg-3:        #64748B; /* secondary — slate-500 */
  --fg-muted:    #94A3B8; /* muted — slate-400 */
  --fg-on-brand: #FFFFFF;

  --bg-page:     #F8FAFC; /* slate-50, app/page bg */
  --bg-surface:  #F1F5F9; /* slate-100, secondary surface */
  --bg-card:     #FFFFFF;
  --bg-inverse:  #0F172A;

  --border-subtle: #E2E8F0; /* slate-200 */
  --border-strong: #CBD5E1; /* slate-300 */
  --border-focus:  #2563EB;

  /* Changelog type badges (mirrors app/src/pages/changelog) */
  --tag-feature-bg:     #DBEAFE;
  --tag-feature-fg:     #1D4ED8;
  --tag-feature-bd:     #BFDBFE;
  --tag-fix-bg:         #FFEDD5;
  --tag-fix-fg:         #C2410C;
  --tag-fix-bd:         #FED7AA;
  --tag-hotfix-bg:      #FEE2E2;
  --tag-hotfix-fg:      #B91C1C;
  --tag-hotfix-bd:      #FECACA;
  --tag-improvement-bg: #D1FAE5;
  --tag-improvement-fg: #047857;
  --tag-improvement-bd: #A7F3D0;
  --tag-internal-bg:    #F1F5F9;
  --tag-internal-fg:    #475569;
  --tag-internal-bd:    #E2E8F0;

  /* =========================================================
     RADII / SHADOWS / SPACING
     ========================================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;   /* buttons, cards (matches .btn) */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;

  --shadow-xs:   0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm:   0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-card: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
  --shadow-md:   0 4px 12px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 12px 32px -8px rgba(15, 23, 42, 0.14);
  --shadow-xl:   0 24px 48px -12px rgba(15, 23, 42, 0.20);
  --shadow-glow-blue:  0 12px 32px -8px rgba(37, 99, 235, 0.35);
  --shadow-glow-green: 0 12px 32px -8px rgba(34, 197, 94, 0.30);

  /* Spacing (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* =========================================================
     TYPE
     Family: Plus Jakarta Sans (300–700)
     Defaults match the app: body 14/22, slight letter-spacing.
     ========================================================= */
  --font-sans: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo,
    Consolas, 'Liberation Mono', monospace;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.25px;   /* the app's quirk on buttons/labels */
  --tracking-upper:  0.08em;

  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Marketing display scale (larger than app — landing pages) */
  --fs-display-xl: clamp(48px, 6.4vw, 84px);
  --fs-display-lg: clamp(40px, 5vw, 64px);
  --fs-display-md: clamp(32px, 3.6vw, 48px);
  --fs-h1: 36px;     --lh-h1: 44px;
  --fs-h2: 28px;     --lh-h2: 36px;
  --fs-h3: 22px;     --lh-h3: 30px;
  --fs-h4: 18px;     --lh-h4: 26px;
  --fs-body-lg: 18px; --lh-body-lg: 28px;
  --fs-body:    16px; --lh-body:    26px;
  --fs-body-sm: 14px; --lh-body-sm: 22px;
  --fs-caption: 12px; --lh-caption: 18px;
  --fs-eyebrow: 12px; /* uppercase, tracked */
}

/* ---------- Semantic typography classes ---------- */
.ff-display-xl, .ff-display-lg, .ff-display-md,
.ff-h1, .ff-h2, .ff-h3, .ff-h4 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.ff-display-xl { font-size: var(--fs-display-xl); line-height: 1.05; font-weight: 700; }
.ff-display-lg { font-size: var(--fs-display-lg); line-height: 1.08; font-weight: 700; }
.ff-display-md { font-size: var(--fs-display-md); line-height: 1.12; font-weight: 700; }
.ff-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
.ff-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; }
.ff-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.ff-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }

.ff-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--fg-2); }
.ff-body    { font-size: var(--fs-body);    line-height: var(--lh-body);    color: var(--fg-2); }
.ff-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg-2); }
.ff-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-3); }

.ff-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-upper);
  text-transform: uppercase;
  color: var(--brand-primary);
}

.ff-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

/* Branded gradient text (for one phrase of a hero, sparingly) */
.ff-text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Page baseline — apply to <body> on marketing pages */
.ff-page {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-card);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}