/* =============================================================
JapaForce Academy — Design Tokens
Colors + Type as CSS custom properties.
Load alongside the Google Fonts tags in your :
============================================================= */
:root {
/* ---------- BRAND COLORS ---------- */
--jf-blue-500: #0051FF; /* primary brand blue */
--jf-blue-400: #2A75FF;
--jf-blue-300: #5E97FF;
--jf-cyan-500: #00B7FF; /* gradient end / electric */
--jf-cyan-400: #4ECBFF;
--jf-orange-500: #FF7700; /* gradient end */
--jf-orange-400: #FF9933;
--jf-yellow-500: #FFBF00; /* gradient start */
--jf-yellow-400: #FFD24D;
/* Signature gradients (use as background-image) */
--jf-gradient-blue: linear-gradient(135deg, #0051FF 0%, #00B7FF 100%);
--jf-gradient-orange: linear-gradient(135deg, #FFBF00 0%, #FF7700 100%);
--jf-gradient-hero: radial-gradient(120% 80% at 20% 0%, rgba(0, 81, 255, 0.18) 0%, rgba(10, 18, 48, 0) 60%), #0A1230;
/* ---------- NEUTRALS (blue-tinted slate) ---------- */
--jf-navy-900: #060B22; /* deepest */
--jf-navy-800: #0A1230; /* default dark surface */
--jf-navy-700: #121A3D;
--jf-navy-600: #1B2554;
--jf-navy-500: #293569;
--jf-navy-400: #3F4D85;
--jf-slate-400: #7A85AB;
--jf-slate-300: #A8B0CC;
--jf-slate-200: #D4D9E8;
--jf-slate-100: #EEF1F8;
--jf-slate-50: #F7F8FC;
--jf-white: #FFFFFF;
--jf-black: #04081A;
/* ---------- SEMANTIC ---------- */
--jf-success: #00C66B;
--jf-warning: #FFBF00;
--jf-danger: #FF3D5C;
--jf-info: #00B7FF;
/* ---------- SEMANTIC TOKENS (light) ---------- */
--jf-bg: var(--jf-white);
--jf-bg-subtle: var(--jf-slate-50);
--jf-bg-muted: var(--jf-slate-100);
--jf-surface: var(--jf-white);
--jf-surface-alt: var(--jf-slate-50);
--jf-fg: var(--jf-navy-800);
--jf-fg-muted: var(--jf-navy-400);
--jf-fg-subtle: var(--jf-slate-400);
--jf-fg-inverse: var(--jf-white);
--jf-border: rgba(10, 18, 48, 0.08);
--jf-border-strong:rgba(10, 18, 48, 0.16);
--jf-accent: var(--jf-blue-500);
--jf-accent-fg: var(--jf-white);
--jf-accent-hover: #003BCC;
/* Focus ring */
--jf-focus-ring: 0 0 0 3px rgba(0, 183, 255, 0.45);
/* ---------- SHADOWS ---------- */
--jf-shadow-xs: 0 1px 2px rgba(10, 18, 48, 0.06);
--jf-shadow-sm: 0 1px 2px rgba(10, 18, 48, 0.06), 0 2px 6px rgba(10, 18, 48, 0.05);
--jf-shadow-md: 0 1px 2px rgba(10, 18, 48, 0.06), 0 8px 24px rgba(10, 18, 48, 0.08);
--jf-shadow-lg: 0 12px 48px rgba(10, 18, 48, 0.18);
/* ---------- RADII ---------- */
--jf-radius-xs: 4px;
--jf-radius-sm: 8px;
--jf-radius-md: 12px;
--jf-radius-lg: 20px;
--jf-radius-pill: 999px;
/* ---------- SPACING (4px base) ---------- */
--jf-space-1: 4px;
--jf-space-2: 8px;
--jf-space-3: 12px;
--jf-space-4: 16px;
--jf-space-5: 24px;
--jf-space-6: 32px;
--jf-space-7: 48px;
--jf-space-8: 64px;
--jf-space-9: 96px;
/* ---------- LAYOUT ---------- */
--jf-container: 1200px;
--jf-container-reading: 720px;
/* ---------- MOTION ---------- */
--jf-ease: cubic-bezier(0.22, 1, 0.36, 1);
--jf-duration-fast: 150ms;
--jf-duration: 240ms;
--jf-duration-slow: 480ms;
/* ---------- TYPE FAMILIES ---------- */
--jf-font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--jf-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--jf-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ---------- TYPE SCALE ---------- */
--jf-text-xs: 12px;
--jf-text-sm: 14px;
--jf-text-md: 16px;
--jf-text-lg: 18px;
--jf-text-xl: 22px;
--jf-text-2xl: 28px;
--jf-text-3xl: 36px;
--jf-text-4xl: 48px;
--jf-text-5xl: 64px;
--jf-text-6xl: 84px;
/* ---------- LINE HEIGHTS ---------- */
--jf-lh-tight: 1.1;
--jf-lh-snug: 1.25;
--jf-lh-base: 1.5;
--jf-lh-loose: 1.7;
}
/* ---------- DARK SURFACE TOKENS ---------- */
/* Apply `.jf-dark` to any surface for dark-mode token swap. */
.jf-dark {
--jf-bg: var(--jf-navy-800);
--jf-bg-subtle: var(--jf-navy-700);
--jf-bg-muted: var(--jf-navy-600);
--jf-surface: var(--jf-navy-700);
--jf-surface-alt: var(--jf-navy-600);
--jf-fg: var(--jf-white);
--jf-fg-muted: var(--jf-slate-300);
--jf-fg-subtle: var(--jf-slate-400);
--jf-fg-inverse: var(--jf-navy-800);
--jf-border: rgba(255, 255, 255, 0.08);
--jf-border-strong:rgba(255, 255, 255, 0.16);
--jf-shadow-sm: none;
--jf-shadow-md: none;
--jf-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
}
/* ============================================================
SEMANTIC TYPE STYLES
Use these as utility classes or copy the rules.
============================================================ */
.jf-display-1 {
font-family: var(--jf-font-display);
font-weight: 800;
font-size: clamp(48px, 7vw, 84px);
line-height: var(--jf-lh-tight);
letter-spacing: -0.025em;
}
.jf-display-2 {
font-family: var(--jf-font-display);
font-weight: 800;
font-size: clamp(36px, 5vw, 64px);
line-height: var(--jf-lh-tight);
letter-spacing: -0.02em;
}
.jf-h1 {
font-family: var(--jf-font-display);
font-weight: 800;
font-size: var(--jf-text-4xl);
line-height: var(--jf-lh-tight);
letter-spacing: -0.02em;
}
.jf-h2 {
font-family: var(--jf-font-display);
font-weight: 700;
font-size: var(--jf-text-3xl);
line-height: var(--jf-lh-snug);
letter-spacing: -0.015em;
}
.jf-h3 {
font-family: var(--jf-font-display);
font-weight: 700;
font-size: var(--jf-text-2xl);
line-height: var(--jf-lh-snug);
letter-spacing: -0.01em;
}
.jf-h4 {
font-family: var(--jf-font-display);
font-weight: 700;
font-size: var(--jf-text-xl);
line-height: var(--jf-lh-snug);
}
.jf-eyebrow {
font-family: var(--jf-font-body);
font-weight: 600;
font-size: var(--jf-text-xs);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--jf-blue-500);
}
.jf-body-lg {
font-family: var(--jf-font-body);
font-weight: 400;
font-size: var(--jf-text-lg);
line-height: var(--jf-lh-loose);
}
.jf-body {
font-family: var(--jf-font-body);
font-weight: 400;
font-size: var(--jf-text-md);
line-height: var(--jf-lh-base);
}
.jf-body-sm {
font-family: var(--jf-font-body);
font-weight: 400;
font-size: var(--jf-text-sm);
line-height: var(--jf-lh-base);
}
.jf-caption {
font-family: var(--jf-font-body);
font-weight: 500;
font-size: var(--jf-text-xs);
line-height: var(--jf-lh-base);
color: var(--jf-fg-muted);
}
.jf-code, code, kbd {
font-family: var(--jf-font-mono);
font-weight: 400;
font-size: 0.92em;
background: var(--jf-bg-muted);
padding: 2px 6px;
border-radius: var(--jf-radius-xs);
}
/* ============================================================
SEMANTIC ELEMENT DEFAULTS
Drop this stylesheet in and use raw ,
, etc.
============================================================ */
body {
font-family: var(--jf-font-body);
font-size: var(--jf-text-md);
line-height: var(--jf-lh-base);
color: var(--jf-fg);
background: var(--jf-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 { font: 800 var(--jf-text-4xl)/var(--jf-lh-tight) var(--jf-font-display); letter-spacing: -0.02em; margin: 0 0 var(--jf-space-4); }
h2 { font: 700 var(--jf-text-3xl)/var(--jf-lh-snug) var(--jf-font-display); letter-spacing: -0.015em; margin: 0 0 var(--jf-space-4); }
h3 { font: 700 var(--jf-text-2xl)/var(--jf-lh-snug) var(--jf-font-display); letter-spacing: -0.01em; margin: 0 0 var(--jf-space-3); }
h4 { font: 700 var(--jf-text-xl)/var(--jf-lh-snug) var(--jf-font-display); margin: 0 0 var(--jf-space-3); }
p { margin: 0 0 var(--jf-space-4); }
a { color: var(--jf-blue-500); text-decoration: none; transition: color var(--jf-duration-fast) var(--jf-ease); }
a:hover { color: var(--jf-cyan-500); }
small { font-size: var(--jf-text-sm); color: var(--jf-fg-muted); }
hr { border: 0; border-top: 1px solid var(--jf-border); margin: var(--jf-space-6) 0; }