/* ============================================================
   JK MediaAI Design System
   Colors + Typography tokens
   ============================================================ */

/* ===== FONTS ===== */
@font-face{
  font-family:'Bebas Neue';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/bebas-neue-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;
}
@font-face{
  font-family:'Bebas Neue';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/bebas-neue-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:'Instrument Sans';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/instrument-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;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/instrument-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:'JetBrains Mono';
  font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
}

:root{
  /* ===== COLOR — SURFACE (pure-black luxury base) ===== */
  --bg:            #0A0A0A;  /* app background, nav backdrop */
  --bg-2:          #111111;  /* section alt background — subtle band */
  --bg-3:          #1A1A1A;  /* elevated surface, inputs */

  /* ===== COLOR — ACCENT (champagne gold) ===== */
  --accent:        #D4AF37;  /* primary brand gold */
  --accent-light:  #F0D060;  /* gradient top, hover lift */
  --accent-dark:   #B8960C;  /* gradient bottom, pressed */

  /* ===== COLOR — TEXT ===== */
  --text:          #FAFAFA;  /* primary text, headlines */
  --text-2:        #B0B0B0;  /* body copy, secondary */
  --text-3:        #808080;  /* captions, meta, footer links */
  --text-4:        #606060;  /* disabled, faint labels */

  /* ===== COLOR — BORDERS / SURFACES (alpha gold) ===== */
  --surface:       rgba(212,175,55,.04); /* card fill */
  --surface-2:     rgba(212,175,55,.07); /* hover card fill, badge */
  --border:        rgba(212,175,55,.10); /* default card border */
  --border-hover:  rgba(212,175,55,.25); /* hover border */
  --border-strong: rgba(212,175,55,.40); /* focus, active */

  /* ===== COLOR — SEMANTIC ===== */
  --success:       #25D366;  /* WhatsApp, confirm */
  --success-bg:    rgba(37,211,102,.12);
  --danger:        #E55555;
  --danger-bg:     rgba(200,50,50,.12);
  --focus-ring:    rgba(212,175,55,.50);

  /* ===== GRADIENTS ===== */
  --gradient:        linear-gradient(135deg, #D4AF37 0%, #F0D060 100%);
  --gradient-text:   linear-gradient(135deg, #F0D060 0%, #D4AF37 100%);
  --gradient-border: linear-gradient(135deg, rgba(212,175,55,.25), rgba(212,175,55,.05));
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212,175,55,.08), transparent),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(212,175,55,.05), transparent),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(212,175,55,.04), transparent),
    linear-gradient(180deg, #0A0A0A 0%, #111 100%);

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 4px 16px rgba(0,0,0,.3);
  --shadow-md: 0 12px 40px rgba(0,0,0,.4);
  --shadow-lg: 0 40px 80px rgba(0,0,0,.5);
  --shadow-glow: 0 12px 40px rgba(212,175,55,.30);       /* primary button hover */
  --shadow-glow-sm: 0 0 24px rgba(212,175,55,.10);        /* card hover ring */
  --shadow-glow-lg: 0 24px 80px rgba(212,175,55,.08);     /* featured elevation */
  --shadow-inset: 0 0 0 1px rgba(212,175,55,.08) inset;   /* phone mockup inner */

  /* ===== RADII ===== */
  --radius-xs: 8px;
  --radius-sm: 10px;   /* buttons */
  --radius-md: 12px;   /* sm cards, inputs */
  --radius-lg: 14px;   /* icon wraps */
  --radius-xl: 20px;   /* primary cards */
  --radius-2xl: 24px;  /* large devices */
  --radius-full: 50px; /* pills, badges */

  /* ===== SPACING SCALE ===== */
  --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-28: 112px;
  --space-36: 140px;    /* section padding */

  /* ===== LAYOUT ===== */
  --max-w: 1600px;
  --nav-h: 72px;
  --content-max: 760px;

  /* ===== MOTION ===== */
  --ease:        cubic-bezier(.16,1,.3,1);   /* brand ease — slow-out exponential */
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --dur-fast:   .25s;   /* button hover, border */
  --dur-base:   .35s;   /* card, icon */
  --dur-slow:   .5s;    /* card border hover */
  --dur-reveal: .9s;    /* scroll reveals */

  /* ===== TYPE — FAMILIES ===== */
  --font-heading: 'Bebas Neue', system-ui, sans-serif;   /* display / titles / buttons */
  --font-body:    'Instrument Sans', system-ui, sans-serif; /* body copy, paragraphs */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* eyebrow labels, meta, stats */
  --font-alt:     'Inter', system-ui, sans-serif;        /* alt/utility — available but unused by default */

  /* ===== ALIASES (backward-compat for UI kit JSX) ===== */
  --font-display: var(--font-heading);
  --gold:         var(--accent);
  --gold-light:   var(--accent-light);

  /* ===== TYPE — SIZES ===== */
  --fs-display:   clamp(3rem, 7vw, 5rem);       /* hero H1 */
  --fs-h1:        clamp(2.2rem, 5vw, 3.8rem);   /* section title */
  --fs-h2:        clamp(1.8rem, 3.5vw, 2.4rem); /* sub-section */
  --fs-h3:        1.25rem;                      /* card titles */
  --fs-h4:        1rem;
  --fs-body-lg:   1.1rem;     /* hero sub */
  --fs-body:      1rem;       /* default paragraph */
  --fs-body-sm:   .92rem;     /* card body */
  --fs-small:     .85rem;     /* buttons, lists */
  --fs-xs:        .75rem;     /* meta, role */
  --fs-2xs:       .70rem;     /* eyebrow labels */

  /* ===== TYPE — LINE HEIGHT ===== */
  --lh-tight:   1.05;   /* display */
  --lh-heading: 1.1;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --lh-loose:   1.75;   /* editorial paragraphs */

  /* ===== TYPE — LETTER SPACING ===== */
  --ls-display: -.04em;  /* hero */
  --ls-title:   -.03em;  /* section title */
  --ls-h3:      -.01em;
  --ls-body:    0;
  --ls-eyebrow: .25em;   /* 4px at .7rem */
  --ls-small:   .02em;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.t-display{
  font-family:var(--font-heading);
  font-size:var(--fs-display);
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
  color:var(--text);
}

.t-h1, .t-section-title{
  font-family:var(--font-heading);
  font-size:var(--fs-h1);
  font-weight:700;
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-title);
  color:var(--text);
}

.t-h2{
  font-family:var(--font-heading);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-title);
  color:var(--text);
}

.t-h3, .t-card-title{
  font-family:var(--font-heading);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-snug);
  letter-spacing:var(--ls-h3);
  color:var(--text);
}

.t-eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  font-weight:500;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}

.t-body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-loose);
  color:var(--text-2);
}

.t-body-lg{
  font-family:var(--font-body);
  font-size:var(--fs-body-lg);
  line-height:var(--lh-loose);
  color:var(--text-2);
}

.t-body-sm{
  font-family:var(--font-body);
  font-size:var(--fs-body-sm);
  line-height:var(--lh-loose);
  color:var(--text-2);
}

.t-caption{
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  color:var(--text-3);
  line-height:1.5;
}

.t-mono{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.05em;
  color:var(--text-3);
}

.t-stat-number{
  font-family:var(--font-heading);
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  font-weight:700;
  line-height:var(--lh-heading);
  letter-spacing:-.03em;
  color:var(--accent);
}

.t-gradient{
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Utility: grain overlay for premium film texture */
.grain::after{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:.15;
}