/* ============================================================
   FMD Studio — Design Tokens
   Source: FMD_Studio_Brand_Book.html (2026)
   Fonts: Syne (700,800) + DM Sans (300,400,500) via Google Fonts
   ============================================================ */

/* Syne — local font files (brand originals) */
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Static fallbacks for environments that don't support variable fonts */
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* DM Sans — Google Fonts (no local file provided) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── BASE COLOR TOKENS ─────────────────────────────────────── */
:root {
  /* Core palette */
  --fmd-black:        #0a0a0a;
  --fmd-black-alt:    #0d0d0d;    /* alternating section bg */
  --fmd-card-bg:      #141414;    /* elevated surfaces, cards */
  --fmd-white:        #f5f2ec;    /* warm white — main text */
  --fmd-cream:        #f0ead8;    /* cream — light-bg variant */
  --fmd-accent:       #ff4d1c;    /* Brand Accent — orange-red */
  --fmd-accent2:      #ffd166;    /* Gold Accent — secondary */
  --fmd-muted:        #6b6760;    /* captions, placeholders */
  --fmd-green:        #4ade80;    /* success / availability */

  /* Borders & overlays */
  --fmd-border:             rgba(245, 242, 236, 0.10);
  --fmd-border-hover:       rgba(255, 77, 28, 0.40);
  --fmd-accent-bg-subtle:   rgba(255, 77, 28, 0.10);
  --fmd-accent2-bg-subtle:  rgba(255, 209, 102, 0.10);
  --fmd-green-bg-subtle:    rgba(74, 222, 128, 0.10);

  /* ── SEMANTIC COLOR TOKENS ──────────────────────────────── */
  --bg-page:          var(--fmd-black);
  --bg-section-alt:   var(--fmd-black-alt);
  --bg-card:          var(--fmd-card-bg);
  --bg-input:         rgba(255, 255, 255, 0.04);

  --fg-primary:       var(--fmd-white);        /* headings, primary text */
  --fg-secondary:     rgba(245, 242, 236, 0.65); /* body text, descriptions */
  --fg-muted:         var(--fmd-muted);        /* captions, labels */
  --fg-placeholder:   rgba(245, 242, 236, 0.20);

  --color-cta:        var(--fmd-accent);
  --color-cta-hover:  #e83a08;
  --color-info:       var(--fmd-accent2);
  --color-success:    var(--fmd-green);
  --color-border:     var(--fmd-border);

  /* ── TYPOGRAPHY TOKENS ──────────────────────────────────── */
  --font-display:     'Syne', sans-serif;
  --font-body:        'DM Sans', sans-serif;

  /* Weights */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  /* Size scale */
  --text-h1:          clamp(3rem, 9vw, 8rem);
  --text-h2:          clamp(2rem, 3.5vw, 3rem);
  --text-h3:          1.8rem;
  --text-h4:          1.3rem;
  --text-body:        1.05rem;
  --text-small:       0.85rem;
  --text-xs:          0.78rem;
  --text-label:       0.72rem;

  /* Tracking */
  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.03em;
  --tracking-normal:  -0.02em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.14em;

  /* Leading */
  --leading-none:     0.95;
  --leading-tight:    1.05;
  --leading-snug:     1.3;
  --leading-normal:   1.7;
  --leading-relaxed:  1.8;

  /* ── SPACING TOKENS ─────────────────────────────────────── */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-8:   3rem;     /* 48px */
  --space-10:  4rem;     /* 64px */
  --space-12:  5rem;     /* 80px */
  --space-16:  6rem;     /* 96px */

  /* ── RADII ──────────────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    12px;
  --radius-xl:    14px;
  --radius-2xl:   16px;
  --radius-3xl:   20px;
  --radius-full:  100px;

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.2s ease;
  --transition-slow:  0.35s ease;
}

/* ── SEMANTIC TYPE STYLES ──────────────────────────────────── */

.fmd-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.fmd-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-primary);
}

.fmd-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-primary);
}

.fmd-h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.fmd-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.fmd-small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-light);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.fmd-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fmd-accent);
}

.fmd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fmd-accent);
}
.fmd-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--fmd-accent);
  flex-shrink: 0;
}

/* ── COMPONENT PRIMITIVES ──────────────────────────────────── */

.fmd-card {
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.fmd-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, transparent, transparent);
  transition: background var(--transition-slow);
}
.fmd-card:hover {
  border-color: var(--fmd-border-hover);
  transform: translateY(-4px);
}
.fmd-card:hover::before {
  background: linear-gradient(90deg, transparent, var(--fmd-accent), transparent);
}

.fmd-btn-primary {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
  background: var(--fmd-accent);
  color: var(--fmd-white);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.9rem 2rem;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-fast);
  letter-spacing: 0.02em;
}
.fmd-btn-primary:hover { background: var(--color-cta-hover); transform: translateY(-1px); }
.fmd-btn-primary:active { transform: scale(0.97); }

.fmd-btn-outline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
  background: transparent;
  color: var(--fg-primary);
  border: 1px solid rgba(245, 242, 236, 0.2);
  border-radius: var(--radius-full);
  padding: 0.85rem 1.8rem;
  cursor: pointer;
  transition: border-color var(--transition-base), transform var(--transition-fast);
}
.fmd-btn-outline:hover { border-color: rgba(245, 242, 236, 0.5); transform: translateY(-1px); }
.fmd-btn-outline:active { transform: scale(0.97); }

.fmd-btn-ghost {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 0.9rem;
  background: transparent;
  color: rgba(245, 242, 236, 0.7);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-base);
}
.fmd-btn-ghost:hover { color: var(--fg-primary); }

.fmd-input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  color: var(--fg-primary);
  outline: none;
  width: 100%;
  transition: border-color var(--transition-base);
}
.fmd-input:focus { border-color: rgba(255, 77, 28, 0.5); }
.fmd-input::placeholder { color: var(--fg-placeholder); }

.fmd-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
}
.fmd-tag-accent  { background: rgba(255,77,28,0.12);   color: var(--fmd-accent);  border: 1px solid rgba(255,77,28,0.25); }
.fmd-tag-gold    { background: rgba(255,209,102,0.12); color: var(--fmd-accent2); border: 1px solid rgba(255,209,102,0.25); }
.fmd-tag-neutral { background: rgba(255,255,255,0.05); color: rgba(245,242,236,0.5); border: 1px solid var(--fmd-border); }
.fmd-tag-green   { background: rgba(74,222,128,0.10);  color: var(--fmd-green);   border: 1px solid rgba(74,222,128,0.2); }

/* ── GRID BACKGROUND TEXTURE ───────────────────────────────── */
.fmd-grid-bg {
  background-image:
    linear-gradient(rgba(245,242,236,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,242,236,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* ── NAV GLASS ─────────────────────────────────────────────── */
.fmd-nav {
  background: rgba(10, 10, 10, 0.90);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fmd-border);
}