/* ============================================================
   CRANIUMS — Colors & Type tokens
   Brand of YAC Group · Applied AI for growth companies (BR)
   ============================================================ */

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

@font-face {
  font-family: "Titillium Web";
  font-weight: 200;
  font-style: normal;
  src: url("fonts/TitilliumWeb-ExtraLight.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 200;
  font-style: italic;
  src: url("fonts/TitilliumWeb-ExtraLightItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 300;
  font-style: normal;
  src: url("fonts/TitilliumWeb-Light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 300;
  font-style: italic;
  src: url("fonts/TitilliumWeb-LightItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/TitilliumWeb-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/TitilliumWeb-Italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 600;
  font-style: normal;
  src: url("fonts/TitilliumWeb-SemiBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 600;
  font-style: italic;
  src: url("fonts/TitilliumWeb-SemiBoldItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 700;
  font-style: normal;
  src: url("fonts/TitilliumWeb-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 700;
  font-style: italic;
  src: url("fonts/TitilliumWeb-BoldItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  font-weight: 900;
  font-style: normal;
  src: url("fonts/TitilliumWeb-Black.ttf") format("truetype");
  font-display: swap;
}

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

:root {
  /* Ink — the dark base. Use ink-900 as default page bg. */
  --ink-900: #06060b;   /* deepest, almost true black w/ violet undertone */
  --ink-800: #0c0c14;   /* page bg */
  --ink-700: #14141e;   /* raised surface */
  --ink-600: #1c1c28;   /* card */
  --ink-500: #262633;   /* card hover / popover */
  --ink-400: #34333f;   /* hairline borders on dark */
  --ink-300: #4a4955;   /* disabled fg */

  /* Bone — the warm off-whites. Use bone-100 as default fg. */
  --bone-100: #f4f1ea;  /* primary fg */
  --bone-200: #d8d4c9;  /* secondary fg */
  --bone-300: #a8a4b1;  /* tertiary fg / metadata */
  --bone-400: #6e6b7a;  /* placeholder / muted */
  --bone-500: #ffffff;  /* pure white — emphasis only */

  /* Brand — the neon spectrum. Use sparingly. */
  --violet:        #7b5cff;  /* primary brand · CTAs, links */
  --violet-bright: #9c84ff;  /* hover / lit */
  --violet-deep:   #4a2fd9;  /* press / shadow tint */
  --violet-glow:   rgba(123, 92, 255, 0.45);

  --cyan:          #22e1e9;  /* data viz · secondary highlight */
  --cyan-bright:   #6ff0f5;
  --cyan-glow:     rgba(34, 225, 233, 0.40);

  --magenta:       #f23e8f;  /* alerts, sparkle accents */
  --magenta-glow:  rgba(242, 62, 143, 0.40);

  --lime:          #c8ff4d;  /* success · "live" indicators */
  --lime-glow:     rgba(200, 255, 77, 0.40);

  /* Semantic */
  --color-bg:           var(--ink-800);
  --color-bg-raised:    var(--ink-700);
  --color-surface:      var(--ink-600);
  --color-surface-hi:   var(--ink-500);
  --color-border:       var(--ink-400);
  --color-border-strong:#4a4955;
  --color-fg:           var(--bone-100);
  --color-fg-muted:     var(--bone-300);
  --color-fg-subtle:    var(--bone-400);
  --color-fg-on-violet: #ffffff;

  --color-primary:        var(--violet);
  --color-primary-hover:  var(--violet-bright);
  --color-primary-press:  var(--violet-deep);
  --color-link:           var(--violet-bright);

  --color-success: var(--lime);
  --color-info:    var(--cyan);
  --color-warning: #ffb547;
  --color-danger:  var(--magenta);

  /* Signature gradients — used for hero auras + stat numbers */
  --gradient-aurora:
    radial-gradient(60% 80% at 10% 20%,  rgba(123,92,255,0.35) 0%, transparent 60%),
    radial-gradient(50% 70% at 90% 30%,  rgba(34,225,233,0.22) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(242,62,143,0.18) 0%, transparent 60%);

  --gradient-stat:
    linear-gradient(135deg, var(--violet-bright) 0%, var(--cyan) 100%);

  --gradient-stroke:
    linear-gradient(135deg, var(--violet) 0%, var(--magenta) 50%, var(--cyan) 100%);


  /* ---------- 3. Type tokens ---------- */

  --font-sans: "Titillium Web", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code",
               Menlo, Consolas, monospace;

  /* fluid scale — designed against a 1440 grid, clamped for resp. */
  --fs-display:  clamp(56px, 7.2vw, 104px);
  --fs-h1:       clamp(40px, 4.4vw, 64px);
  --fs-h2:       clamp(30px, 3.2vw, 44px);
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-small:    14px;
  --fs-eyebrow:  12px;   /* uppercase, tracked-out labels */
  --fs-mono:     14px;

  --lh-tight:    1.04;
  --lh-snug:     1.18;
  --lh-normal:   1.45;
  --lh-loose:    1.65;

  --tracking-display: -0.02em;   /* tight on big type */
  --tracking-body:    0em;
  --tracking-eyebrow: 0.16em;    /* widely tracked all-caps labels */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;
}

/* ---------- 4. Base element defaults ---------- */

html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic typography classes — apply directly to elements */

.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
}

h1, .t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  font-weight: var(--fw-semibold);
  margin: 0;
}
h2, .t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: var(--fw-semibold);
  margin: 0;
}
h3, .t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0;
}
h4, .t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0;
}

p, .t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  margin: 0;
}
.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
}
.t-small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.t-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-fg-muted);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0;
}
.t-stat {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: var(--fw-light);
  background: var(--gradient-stat);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 120ms ease, opacity 120ms ease;
}
a:hover { color: var(--violet-bright); opacity: 0.92; }

/* ---------- 5. Spacing / radius / shadow / motion ---------- */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* Shadows on dark backgrounds — mostly glows, not drop shadows */
  --shadow-card:   0 1px 0 rgba(255,255,255,0.04) inset,
                   0 8px 24px rgba(0,0,0,0.40);
  --shadow-lift:   0 1px 0 rgba(255,255,255,0.05) inset,
                   0 18px 48px rgba(0,0,0,0.55);
  --shadow-glow-violet: 0 0 0 1px rgba(123,92,255,0.35),
                        0 12px 40px var(--violet-glow);
  --shadow-glow-cyan:   0 0 0 1px rgba(34,225,233,0.30),
                        0 12px 40px var(--cyan-glow);

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);   /* "ease-out-quart" — default */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.30, 1);   /* "ease-out-expo" — entrances */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --dur-scenic:  800ms;   /* hero auras, gradient drift */
}