/* Generated by scripts/sync_grav_tokens.py from
   docs/design-system/project/colors_and_type.css. Do not edit:
   change the design system, then run the script again. */

/* ============================================================
   JC Praud Studio — Design Tokens
   colors, type, spacing, radii, shadows, motion
   ============================================================ */

/* ---------- 1. Webfonts ---------- */

/* Original brand fonts (bundled, in /fonts) */
@font-face {
  font-family: "Conthrax";
  src: url("./fonts/Conthrax-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eurostile";
  src: url("./fonts/Eurostile.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Age";
  src: url("./fonts/SpaceAge.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/* ---------- 2. Color tokens ---------- */

:root {
  /* ——— Brand core ——— */
  --jc-red:           #F42C3F;   /* signature red, sampled from hero */
  --jc-red-hot:       #FF3B4F;   /* hover / energetic state */
  --jc-red-deep:      #C81F30;   /* pressed / deeper accent */
  --jc-red-glow:      rgba(244, 44, 63, 0.45);

  --jc-ink:           #13171F;   /* deep navy-black, the dominant bg */
  --jc-ink-2:         #0B0E14;   /* near-black for layering */
  --jc-ink-3:         #050709;   /* darkest pit */
  --jc-slate:         #2B363E;   /* cool slate panel (left hero) */
  --jc-slate-2:       #1B232B;   /* slate one notch deeper */

  --jc-snow:          #FFFAFA;   /* warm white, primary text on dark */
  --jc-bone:          #F5F1EE;
  --jc-fog:           #C9CFD6;   /* secondary text */
  --jc-grey:          #6E7682;   /* muted / disabled / captions */
  --jc-grey-2:        #3A4350;   /* hairline / divider */

  /* ——— Semantic backgrounds ——— */
  --bg-page:          var(--jc-ink);
  --bg-page-deep:     var(--jc-ink-2);
  --bg-surface:       #181D26;          /* cards on page */
  --bg-surface-raised:#1F2531;          /* elevated cards / modals */
  --bg-overlay:       rgba(5, 7, 9, 0.72);

  /* ——— Semantic text ——— */
  --fg-1:             var(--jc-snow);   /* primary */
  --fg-2:             var(--jc-fog);    /* secondary */
  --fg-3:             var(--jc-grey);   /* tertiary / metadata */
  --fg-accent:        var(--jc-red);
  --fg-on-red:        var(--jc-snow);

  /* ——— Borders & dividers ——— */
  --border-hairline:  rgba(255, 250, 250, 0.08);
  --border-soft:      rgba(255, 250, 250, 0.14);
  --border-strong:    rgba(255, 250, 250, 0.28);
  --border-red:       var(--jc-red);
  --border-red-soft:  rgba(244, 44, 63, 0.32);

  /* ——— Status (kept narrow — brand is two-tone) ——— */
  --status-success:   #2FC48A;
  --status-warning:   #F2B23A;
  --status-danger:    var(--jc-red);
  --status-info:      #4FB8FF;

  /* ——— Gradients ——— */
  --grad-hero:        linear-gradient(135deg, #1A2129 0%, #0B0E14 100%);
  --grad-red-glow:    radial-gradient(60% 60% at 50% 50%, rgba(244,44,63,0.35) 0%, rgba(244,44,63,0) 70%);
  --grad-red-block:   linear-gradient(180deg, #FF3B4F 0%, #C81F30 100%);
  --grad-protect-top: linear-gradient(180deg, rgba(11,14,20,0) 0%, rgba(11,14,20,0.85) 100%);
  --grad-protect-bot: linear-gradient(0deg, rgba(11,14,20,0) 0%, rgba(11,14,20,0.85) 100%);
  --grad-edge-vignette: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);


  /* ---------- 3. Typography scale ---------- */

  /* Families */
  --font-display:     "Space Age", "Conthrax", "Eurostile", sans-serif; /* hero, mega titles */
  --font-headline:    "Conthrax", "Space Age", "Eurostile", sans-serif; /* H1/H2/H3, signage */
  --font-body:        "Eurostile", "Rajdhani", "Barlow", "Inter", system-ui, sans-serif; /* paragraphs, UI */
  --font-mono:        "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-stencil:     "Conthrax", "Space Age", sans-serif;              /* eyebrow / wide-tracked labels */

  /* Tracking presets */
  --track-tight:      -0.01em;
  --track-normal:     0;
  --track-wide:       0.08em;
  --track-wider:      0.18em;     /* matches the wide-spaced "PRESENTATION" labels */
  --track-widest:     0.32em;     /* monogram subline e.g. "M U S I Q U E" */

  /* Line heights */
  --lh-tight:         1.02;
  --lh-snug:          1.15;
  --lh-base:          1.55;
  --lh-loose:         1.8;

  /* Sizes — fluid, clamp-driven */
  --fs-display-xl:    clamp(64px, 8vw, 144px);
  --fs-display-lg:    clamp(48px, 6vw, 96px);
  --fs-display-md:    clamp(36px, 4.5vw, 72px);
  --fs-h1:            clamp(36px, 4vw, 64px);
  --fs-h2:            clamp(28px, 2.8vw, 44px);
  --fs-h3:            clamp(22px, 2vw, 30px);
  --fs-h4:            18px;
  --fs-eyebrow:       13px;        /* the wide-tracked section labels */
  --fs-body-lg:       18px;
  --fs-button:        18.66px;     /* 14pt: bold large text, so red pills pass at 3:1 */
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;


  /* ---------- 4. Spacing (4-pt rhythm) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* Layout */
  --container-max:    1440px;
  --container-pad:    clamp(20px, 4vw, 64px);
  --grid-cols:        12;
  --grid-gap:         24px;


  /* ---------- 5. Radii ---------- */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   14px;
  --r-2xl:  22px;
  --r-pill: 999px;
  /* Brand favors hairline-rounded corners (2–4px) and full pills.
     Reserve 2xl for hero cards & device mockups. */


  /* ---------- 6. Shadows / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.5);
  --shadow-4: 0 28px 80px rgba(0,0,0,0.75), 0 6px 18px rgba(0,0,0,0.55);
  --shadow-red: 0 0 0 1px var(--border-red-soft), 0 16px 48px rgba(244,44,63,0.32);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.06);
  --glow-red: 0 0 32px rgba(244,44,63,0.55);


  /* ---------- 7. Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     400ms;
  --dur-cinema:   900ms;
  --marquee-duration: 40s;   /* one loop of the keyword marquee */
  --stagger-step:     60ms;  /* delay between two portfolio tiles */

  /* Fixed header once scrolled past the hero (README, Transparency & blur) */
  --header-blur: blur(18px);
  --header-bg:   rgba(11,14,20,0.6);
}


/* ---------- 8. Element defaults ---------- */

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

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}

h2, .h2 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-normal);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-stencil);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-1);
}

a {
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--jc-red); }

::selection { background: var(--jc-red); color: var(--jc-snow); }


/* ---------- 9. Utility primitives ---------- */

.surface       { background: var(--bg-surface);        border: 1px solid var(--border-hairline); border-radius: var(--r-lg); }
.surface-raised{ background: var(--bg-surface-raised); border: 1px solid var(--border-soft);     border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.divider       { height: 1px; background: var(--border-hairline); border: 0; width: 100%; }
.hairline-red  { height: 1px; background: var(--jc-red); border: 0; width: 56px; }

.scanline-bg {
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
}
.grain-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}