/* DUNN GAMES — flattened design tokens (from design system export 7). Font @imports hoisted to top for CSS validity. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---- tokens/fonts.css ---- */
/* DUNNGAMES — Fonts
   Display: Fredoka (rounded, chunky, playful) — headings, buttons, stats, labels.
   Body:    Plus Jakarta Sans — paragraphs, UI text, form fields.
   Loaded from Google Fonts (same source the site uses). */


/* ---- tokens/colors.css ---- */
/* DUNNGAMES — Color tokens
   Base palette + semantic aliases. Two themes: light (default) and dark.
   The dark theme reuses the SAME components by flipping surface/text/border
   tokens — modelled on the original site's navy sections (white borders,
   accent-coloured hard shadows). */

:root {
  /* ---- Base palette ---- */
  --dg-ink:        #0B1B30; /* signature near-black navy: borders, text, outlines */
  --dg-ink-2:      #13294A; /* lifted navy panel (dark surfaces) */

  --dg-sky:        #03A8F2; /* primary brand accent */
  --dg-sky-dark:   #0277C4; /* button "underside" / pressed shade */
  --dg-sky-deep:   #0A5AA0;
  --dg-blue:       #1E84D8;
  --dg-cyan:       #2FD0E8;
  --dg-cyan-dark:  #1AA0C4;
  --dg-green:      #58D68D;
  --dg-green-dark: #3FB871;
  --dg-yellow:     #FFC53D;
  --dg-yellow-dark:#FFA300;
  --dg-orange:     #FF8A3D;

  --dg-paper:      #EAF4FC; /* light-blue page background */
  --dg-cream:      #FFF8EF; /* warm field background */
  --dg-white:      #FFFFFF;
  --dg-muted:      #56657A; /* secondary text on light */

  /* ---- Semantic aliases — LIGHT theme ---- */
  --surface-page:   var(--dg-paper);
  --surface-card:   var(--dg-white);
  --surface-ink:    var(--dg-ink);   /* full-bleed dark sections */
  --surface-input:  var(--dg-cream);

  --text-strong:    var(--dg-ink);
  --text-muted:     var(--dg-muted);
  --text-on-ink:    var(--dg-paper); /* text sitting on a dark section */
  --text-on-accent: #FFFFFF;

  --border:        var(--dg-ink);    /* card / surface outline (flips in dark) */
  --border-ink:    var(--dg-ink);    /* constant ink outline for bright chips/buttons */

  --accent:        var(--dg-sky);
  --accent-dark:   var(--dg-sky-dark);
  --shadow-color:  var(--dg-ink);    /* hard offset shadow colour (flips in dark) */
  --ring:          rgba(3,168,242,.32); /* focus ring */
}

/* ---- Semantic aliases — DARK theme ---- */
[data-theme="dark"] {
  --surface-page:   var(--dg-ink);
  --surface-card:   #17314F;
  --surface-ink:    #081320;
  --surface-input:  #0F2236;

  --text-strong:    var(--dg-paper);
  --text-muted:     rgba(234,244,252,.66);
  --text-on-ink:    var(--dg-paper);
  --text-on-accent: #FFFFFF;

  --border:        var(--dg-paper);  /* white outlines on dark, as in the source */
  --border-ink:    var(--dg-ink);

  --accent:        var(--dg-sky);
  --accent-dark:   var(--dg-sky-dark);
  --shadow-color:  #0A2742;          /* deep navy-blue hard shadow — subtle, not loud */
  --ring:          rgba(3,168,242,.45);
}

/* ---- DARK VARIANTS (same blue + white, different background) ---- */

/* Black — true OLED black */
[data-theme="black"] {
  --surface-page:   #000000;
  --surface-card:   #131319;
  --surface-ink:    #000000;
  --surface-input:  #1B1B23;
  --text-strong:    #FFFFFF;
  --text-muted:     rgba(255,255,255,.62);
  --text-on-ink:    #FFFFFF;
  --text-on-accent: #FFFFFF;
  --border:         #FFFFFF;
  --border-ink:     var(--dg-ink);
  --accent:         var(--dg-sky);
  --accent-dark:    var(--dg-sky-dark);
  --shadow-color:   #14141C;
  --ring:           rgba(3,168,242,.5);
}

/* Midnight — deep blue-black */
[data-theme="midnight"] {
  --surface-page:   #0A0E1C;
  --surface-card:   #161E3A;
  --surface-ink:    #06080F;
  --surface-input:  #111733;
  --text-strong:    var(--dg-paper);
  --text-muted:     rgba(234,244,252,.62);
  --text-on-ink:    var(--dg-paper);
  --text-on-accent: #FFFFFF;
  --border:         var(--dg-paper);
  --border-ink:     var(--dg-ink);
  --accent:         var(--dg-sky);
  --accent-dark:    var(--dg-sky-dark);
  --shadow-color:   #071A33;
  --ring:           rgba(3,168,242,.45);
}

/* Slate — cool neutral grey */
[data-theme="slate"] {
  --surface-page:   #1C2530;
  --surface-card:   #2D3947;
  --surface-ink:    #141B24;
  --surface-input:  #232E3A;
  --text-strong:    #F2F6FB;
  --text-muted:     rgba(242,246,251,.6);
  --text-on-ink:    #F2F6FB;
  --text-on-accent: #FFFFFF;
  --border:         #F2F6FB;
  --border-ink:     var(--dg-ink);
  --accent:         var(--dg-sky);
  --accent-dark:    var(--dg-sky-dark);
  --shadow-color:   #121C27;
  --ring:           rgba(3,168,242,.45);
}

/* ---- tokens/typography.css ---- */
/* DUNNGAMES — Typography tokens */

:root {
  --font-display: 'Fredoka', system-ui, sans-serif;       /* headings, buttons, stats */
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif; /* body + UI */

  /* Display scale (Fredoka, weight 700, tight tracking) */
  --fs-display:  clamp(46px, 8.5vw, 128px); /* @kind font */
  --fs-h1:       clamp(36px, 5.5vw, 68px);  /* @kind font */
  --fs-h2:       clamp(34px, 5vw, 60px);    /* @kind font */
  --fs-h3:       clamp(28px, 3.6vw, 46px);  /* @kind font */
  --fs-h4:       24px;                       /* @kind font */

  /* Body scale (Plus Jakarta Sans) */
  --fs-lead:     clamp(17px, 2vw, 21px);    /* @kind font */
  --fs-body:     16px;                       /* @kind font */
  --fs-sm:       14px;                        /* @kind font */
  --fs-xs:       13px;                        /* @kind font */
  --fs-label:    13px; /* uppercase eyebrow / form labels @kind font */

  /* Weights */
  --fw-body:     500; /* @kind font */
  --fw-medium:   600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* Line heights */
  --lh-tight:    .95;  /* @kind font */
  --lh-snug:     1.1;  /* @kind font */
  --lh-body:     1.65; /* @kind font */

  /* Tracking */
  --tracking-display: -2px; /* @kind font */
  --tracking-tight:   -1px; /* @kind font */
  --tracking-label:   1px;  /* uppercase eyebrows @kind font */
}

/* ---- tokens/effects.css ---- */
/* DUNNGAMES — Effects: borders, radii, hard-offset shadows, spacing, motion.
   The signature is a chunky black outline + a HARD (no-blur) offset shadow,
   and press/lift interactions that move the element and resize the shadow. */

:root {
  /* Border widths (thick, neo-brutalist outline) */
  --bw:        3px;   /* default chunky outline */
  --bw-sm:     2.5px; /* chips, small controls */
  --bw-xs:     2px;   /* avatars, micro tags */

  /* Corner radii */
  --r-pill:    999px;
  --r-xl:      34px;  /* big feature cards */
  --r-lg:      26px;  /* standard cards */
  --r-md:      18px;  /* inputs, list rows */
  --r-sm:      14px;  /* buttons, small cards */
  --r-xs:      9px;   /* icon chips */

  /* Hard offset shadows (no blur) — the brand's depth language */
  --shadow-xs:   0 3px 0 var(--shadow-color);
  --shadow-sm:   0 4px 0 var(--shadow-color);
  --shadow-md:   0 6px 0 var(--shadow-color);
  --shadow-card: 7px 8px 0 var(--shadow-color);  /* diagonal card drop */
  --shadow-lg:   10px 12px 0 var(--shadow-color); /* hero / feature cards */

  /* Button "underside" shadows (use accent-dark or ink) */
  --press-md:    0 4px 0 var(--accent-dark);
  --press-lg:    0 7px 0 var(--accent-dark);

  /* Spacing scale */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 24px;
  --sp-6: 30px;
  --sp-7: 40px;
  --sp-8: 54px;
  --sp-9: 70px;
  --sp-10: 110px; /* section vertical padding */

  /* Motion */
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1); /* @kind other */
  --ease-out:    cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --dur-press:   .12s; /* @kind other */
  --dur-base:    .2s;  /* @kind other */
  --dur-reveal:  .7s;  /* @kind other */

  /* Lift/press transforms */
  --lift:  -2px;  /* hover translateY @kind other */
  --press: 3px;   /* active translateY @kind other */
}

/* ---- Brand keyframes (shipped to consumers) ---- */
@keyframes dgFloatA { 0%,100%{ transform:translateY(0) rotate(-7deg);} 50%{ transform:translateY(-22px) rotate(7deg);} }
@keyframes dgFloatB { 0%,100%{ transform:translateY(0) rotate(8deg);} 50%{ transform:translateY(-30px) rotate(-7deg);} }
@keyframes dgFloatC { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
@keyframes dgMarquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes dgMarqueeR { from{ transform:translateX(-50%);} to{ transform:translateX(0);} }
@keyframes dgGrad { 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }
@keyframes dgPulse { 0%{ transform:scale(.7); opacity:.75;} 70%{ transform:scale(1.7); opacity:0;} 100%{ opacity:0;} }

/* ---- tokens/corporate.css ---- */
/* DUNNGAMES — Corporate skin tokens.
   A second, restrained visual language for the studio's business-facing site.
   Neutral white/slate/charcoal surfaces + the DUNN blue as the single accent.
   Activated by setting data-skin="corporate" on <html>; pairs with data-theme.
   Comic (default) tokens are untouched — these live in their own namespace (--c-*). */


[data-skin="corporate"] {
  /* type */
  --c-font-head: 'Archivo', system-ui, -apple-system, sans-serif;
  --c-font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* radii — small + crisp */
  --c-r-xs: 4px;
  --c-r-sm: 8px;
  --c-r-md: 12px;
  --c-r-lg: 18px;
  --c-r-pill: 999px;

  /* layout */
  --c-maxw: 1200px;

  /* ---- light (default) ---- */
  --c-page: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-2: #F5F7FA;   /* alternating section bg */
  --c-surface-3: #EDF1F6;   /* insets, inputs */
  --c-text: #14181F;        /* near-black charcoal */
  --c-text-2: #56616E;      /* muted body */
  --c-text-3: #8A93A0;      /* captions, labels */
  --c-border: #E4E8ED;
  --c-border-2: #D2D9E1;    /* stronger hairline */
  --c-ink: #14181F;         /* solid dark surfaces (footer, primary on light) */
  --c-on-ink: #FFFFFF;

  /* accent = DUNN blue, deepened just enough for AA white-on-blue */
  --c-accent: #0C74D4;
  --c-accent-strong: #0A63B8;
  --c-accent-bright: #03A8F2; /* the original bright DUNN blue, for thin highlights */
  --c-accent-soft: #EAF4FD;   /* tint fill */
  --c-on-accent: #FFFFFF;

  --c-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --c-shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --c-shadow-lg: 0 18px 48px rgba(16,24,40,.12);
}

[data-skin="corporate"][data-theme="dark"] {
  --c-page: #0A0C0F;
  --c-surface: #121519;
  --c-surface-2: #0F1216;
  --c-surface-3: #1A1E24;
  --c-text: #F3F6F9;
  --c-text-2: #A0AAB5;
  --c-text-3: #69727D;
  --c-border: #232830;
  --c-border-2: #333A44;
  --c-ink: #FFFFFF;          /* light solid surfaces flip on dark */
  --c-on-ink: #14181F;

  --c-accent: #2E92F6;
  --c-accent-strong: #1C7FE3;
  --c-accent-bright: #4FB6F9;
  --c-accent-soft: #11202E;
  --c-on-accent: #FFFFFF;

  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --c-shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --c-shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

/* ---- tokens/minimal.css ---- */
/* DUNNGAMES — "Minimal" skin tokens.
   Clean white/near-black, single bright-blue accent, soft glow, rounded cards.
   Scoped to [data-skin="minimal"]; does not touch Comic or Corporate. */


[data-skin="minimal"] {
  /* Fonts */
  --m-font-display: 'Sora', system-ui, sans-serif;
  --m-font-body: 'Manrope', system-ui, sans-serif;

  /* Brand accent (single) */
  --m-accent:      #0FA6EE;
  --m-accent-ink:  #ffffff;
  --m-accent-soft: #E7F5FE;

  /* Light theme surfaces + text */
  --m-page:        #ffffff;
  --m-page-2:      #F6F8FA;
  --m-ink:         #0B1522;
  --m-ink-soft:    #5B6875;
  --m-ink-faint:   #9AA6B2;
  --m-card:        #0A0B0D;      /* black cards (consulting) */
  --m-card-ink:    #ffffff;
  --m-card-soft:   #8B9199;      /* inactive gray tiles */
  --m-line:        #E6EAEE;
  --m-pill:        #ffffff;      /* light pill button */
  --m-pill-ink:    #0B1522;
  --m-pill-dark:   #0B0C0E;      /* dark pill button */
  --m-pill-dark-ink:#ffffff;

  /* Glow behind hero characters */
  --m-glow: radial-gradient(120% 90% at 50% 42%, rgba(255,241,214,0.85) 0%, rgba(233,242,255,0.55) 38%, rgba(255,255,255,0) 72%); /* @kind other */
  --m-hero-wash: radial-gradient(58% 52% at 50% 56%, rgba(230,186,146,0.45) 0%, rgba(224,176,134,0.18) 40%, transparent 72%); /* @kind other */

  /* Shadows — soft, low */
  --m-shadow-card: 0 24px 60px -28px rgba(11,21,34,0.30);
  --m-shadow-pill: 0 8px 20px -8px rgba(11,21,34,0.35);

  /* Radii */
  --m-r-card: 26px;
  --m-r-pill: 999px;
  --m-r-tile: 20px;

  --m-maxw: 1440px;
}

/* Dark theme for the Minimal skin */
[data-skin="minimal"][data-theme="dark"] {
  --m-accent:      #17ABF4;
  --m-accent-soft: #0E2233;

  --m-page:        #000000;
  --m-page-2:      #0A0A0A;
  --m-ink:         #F3F6FA;
  --m-ink-soft:    #97A2AE;
  --m-ink-faint:   #5B6672;
  --m-card:        #0E1219;
  --m-card-ink:    #ffffff;
  --m-card-soft:   #262B33;
  --m-line:        #1A212B;
  --m-pill:        #12161E;
  --m-pill-ink:    #F3F6FA;
  --m-pill-dark:   #F3F6FA;
  --m-pill-dark-ink:#0B0C0E;

  --m-glow: radial-gradient(120% 90% at 50% 40%, rgba(24,28,34,0.85) 0%, rgba(8,9,11,0.6) 46%, rgba(0,0,0,0) 74%); /* @kind other */
  --m-hero-wash: radial-gradient(58% 52% at 50% 56%, rgba(190,196,206,0.30) 0%, rgba(140,146,158,0.12) 40%, transparent 72%); /* @kind other */
  --m-shadow-card: 0 30px 70px -30px rgba(0,0,0,0.7);
  --m-shadow-pill: 0 10px 24px -10px rgba(0,0,0,0.6);
}