@font-face {
    font-family: "Quicksand";
    src:
        local("Quicksand"),
        url("assets/font/Quicksand-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 700;
    font-style: bold;
    font-display: swap;
    font-optical-sizing: auto;
}

:root {
    /* blue (PRIMARY) – base = #267acc */
    --blue-300: #6fb0e2;
    /* tint for light backgrounds */
    --blue-400: #4e97d6;
    --blue-500: #267acc;
    /* BASE */
    --blue-600: #1f5fa3;
    --blue-700: #18497f;

    /* amber (SECONDARY, warm) – muted golds */
    --amber-300: #f2cf7a;
    --amber-400: #e6b450;
    --amber-500: #c08f2a;
    /* BASE (use black text) */
    --amber-600: #9a6f17;
    --amber-700: #74540f;

    /* violet (ACCENT, premium, cooler/less neon) */
    --violet-300: #bdb4f2;
    --violet-400: #8f83e6;
    --violet-500: #6e5bd6;
    /* BASE */
    --violet-600: #5747b5;
    --violet-700: #423691;

    /* jade (SUPPORT, success – greener teal, less neon) */
    --jade-300: #79dec1;
    --jade-400: #4bcaa8;
    --jade-500: #2fbf90;
    /* BASE */
    --jade-600: #239575;
    --jade-700: #1a7159;

    /* neutrals (balanced for UI; darker range not jet-black) */
    --white: #ffffff;
    --gray-50: #f6f7f9;
    --gray-100: #e9edf3;
    --gray-200: #d5dbe6;
    --gray-300: #bcc3d0;
    --gray-400: #9aa3b2;
    --gray-500: #7b8593;
    --gray-600: #5e6673;
    --gray-700: #444b55;
    --gray-800: #2b2f36;
    /* default dark bg */
    --gray-900: #171a1f;
    /* deepest */
}

:root,
.theme-light {
    color-scheme: light;

    --bg: var(--white);
    --bg-muted: var(--gray-100);
    --surface: var(--gray-200);
    --surface-2: var(--gray-300);
    --surface-3: var(--gray-400);
    --border: var(--gray-400);

    --fg: #3a3a3a;
    --fg-muted: var(--gray-600);

    /* Brand on light: base/darker shades with WHITE or BLACK as needed */
    --primary: var(--blue-500);
    /* #267acc */
    --primary-contrast: #ffffff;
    /* AA on blue-500 */
    --secondary: var(--amber-500);
    /* #c08f2a */
    --secondary-contrast: #3a3a3a;
    /* AA on amber-500 */
    --accent: var(--violet-500);
    --accent-contrast: #ffffff;
    /* AA on violet-500 */
    --support: var(--jade-700);
    --support-contrast: #3a3a3a;
    /* AA on jade-500 */

    /* states */
    --info: var(--blue-400);
    --warn: var(--amber-400);
    --ok: var(--jade-400);
    --error: #cc4545;

    --focus-ring: var(--blue-500);
    --shadow-color: rgba(17, 24, 39, 0.12);

    /* slider */
    --hero-c1: var(--amber-400);
    --hero-c2: var(--violet-400);
    --hero-c3: var(--jade-400);
    --hero-c4: var(--blue-400);
    --hero-c5: var(--violet-700);

    --hero-blob-alpha: 0.7;
    --hero-glow-blur: 72px;
    --hero-vignette: rgba(0, 0, 0, 0.06);

    /* code */
    --code-bg: #edf0f7;
    --code-fg: #343e67;
}

:root,
.theme-light {
  /* Families */
  --font-sans: Quicksand, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Line-height + weights */
  --lh-tight: 1.15;
  --lh-normal: 1.6;  /* bumped for readability */
  --lh-loose: 1.8;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Optional global multiplier (tweak site-wide sizing quickly) */
  --type-scale: 1.0;

  /* Fluid type scale for 10px base (1rem = 10px) */
  /* h1..h6 aim for comfortable ranges on mobile-to-desktop */
  --fs-900: clamp(calc(3.6rem * var(--type-scale)),
                  calc(2.2rem * var(--type-scale)) + 4.2vw,
                  calc(6.4rem * var(--type-scale))); /* h1: 36→64px */

  --fs-800: clamp(calc(3.0rem * var(--type-scale)),
                  calc(1.8rem * var(--type-scale)) + 1vw,
                  calc(5.2rem * var(--type-scale))); /* h2: 30→52px */

  --fs-700: clamp(calc(2.2rem * var(--type-scale)),
                  calc(1.4rem * var(--type-scale)) + 0.8vw,
                  calc(4.0rem * var(--type-scale))); /* h3: 24→40px */

  --fs-600: clamp(calc(2.0rem * var(--type-scale)),
                  calc(1.4rem * var(--type-scale)) + 0.55vw,
                  calc(3.2rem * var(--type-scale))); /* h4: 20→32px */

  --fs-500: clamp(calc(1.8rem * var(--type-scale)),
                  calc(1.2rem * var(--type-scale)) + 1.8vw,
                  calc(2.6rem * var(--type-scale))); /* h5: 18→26px */

  --fs-400: clamp(calc(1.6rem * var(--type-scale)),
                  calc(1.1rem * var(--type-scale)) + 1.2vw,
                  calc(2.0rem * var(--type-scale))); /* h6/lead: 16→20px */

  /* Body & smalls (fixed; readable at 10px base, 1rem) */
  --fs-300: calc(1.6rem * var(--type-scale)); /* body ≈ 16px */
  --fs-200: calc(1.4rem * var(--type-scale)); /* small ≈ 14px */
  --fs-100: calc(1.2rem * var(--type-scale)); /* tiny ≈ 12px */

  /* Radius (buttons etc.) */
  --radius: 12px;
}

/* Box model + margin reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;

    transition-property: background, background-color, text-decoration-color, color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.25s;
}

html {
    /* 10 / 16 = 62.5% → 1rem = 10px */
    font-size: 62.5%;
}

/* Body base */
html:focus-within {
    scroll-behavior: smooth;
}

html,
body,
main {
    height: 100vh;

    background: linear-gradient(135deg,
            #3399ff,
            #ff9933,
            #33ff99);

    background-repeat: no-repeat;

    background-attachment: fixed;
    background-size: cover;

    /* Smooth transitions if toggled dynamically */
    transition: background 0.5s ease-in-out;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-300);
    line-height: var(--lh-normal);
}


/* Media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Form elements inherit fonts */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

/* Safe line-wrapping */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
}

/* Remove default list styles where utility classes control them */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-delay: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Paragraph rhythm */
p {
    font-weight: var(--fw-semibold);
    margin-block: 0.75rem 1rem;
    color: var(--fg);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--fg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--fs-900);
    margin-block: 0 0.75em;
}

h2 {
    font-size: var(--fs-800);
    margin-block: 1.25em 0.5em;
}

h3 {
    font-size: var(--fs-700);
    margin-block: 1.2em 0.5em;
}

h4 {
    font-size: var(--fs-600);
    margin-block: 1.1em 0.4em;
}

h5 {
    font-size: var(--fs-500);
    margin-block: 1em 0.4em;
}

h6 {
    font-size: var(--fs-400);
    margin-block: 1em 0.4em;
}

/* Links */
a {
    color: var(--primary);
    text-decoration-color: color-mix(in oklab, var(--primary) 60%, transparent);
    text-underline-offset: 2px;
}

a:hover {
    text-decoration-color: var(--primary);
}

/* Inline emphasis */
strong {
    font-weight: var(--fw-semibold);
}

em {
    font-style: italic;
}

/* Code */
code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: 1.6rem;
}

pre {
    background: var(--surface-2);
    padding: 1rem;
    border-radius: var(--radius);
}

/* Quotes & HR */
blockquote {
    border-inline-start: 4px solid var(--border);
    padding-inline: 1rem;
    color: var(--fg-muted);
    margin-block: 1rem;
}

hr {
    border: 0;
    height: 1px;
    background: var(--border);
    margin-block: 1.5rem;
}

ul>li {
    font-size: var(--fs-300);
}

/* Helpers */
.lead {
    font-size: var(--fs-300);
    line-height: var(--lh-loose);
    color: var(--fg);
}

.small,
small {
    font-size: var(--fs-200);
    color: var(--fg-muted);
}

.muted {
    color: var(--fg-muted);
}

/* TEXT colors */
.text-primary {
    color: var(--primary) !important;
    font-weight: 700;
}

.text-secondary {
    color: var(--secondary) !important;
    font-weight: bold;
}

.text-support {
    color: var(--support) !important;
    font-weight: bold;
}

.text-bold {
    font-weight: bold;
}

.text-accent {
    color: var(--accent) !important;
    font-weight: bold;
}

.text-info {
    color: var(--info) !important;
}

.text-warn {
    color: var(--warn) !important;
}

.text-ok {
    color: var(--ok) !important;
}

.text-error {
    color: var(--error) !important;
}

/* BACKGROUND helpers (useful for badges/chips) */
.bg-primary {
    background: var(--primary) !important;
    color: var(--primary-contrast) !important;
}

.bg-secondary {
    background: var(--secondary) !important;
    color: var(--secondary-contrast) !important;
}

.bg-support {
    background: var(--support) !important;
    color: var(--support-contrast) !important;
}

.bg-accent {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

.bg-info {
    background: var(--info) !important;
    color: var(--primary-contrast) !important;
}

.bg-warn {
    background: var(--warn) !important;
    color: var(--secondary-contrast) !important;
}

.bg-ok {
    background: var(--ok) !important;
    color: var(--accent-contrast) !important;
}

.bg-error {
    background: var(--error) !important;
    color: #111 !important;
}

/* BORDER helpers */
.border {
    border: 1px solid var(--border);
}

.border-primary {
    border: 1px solid var(--primary);
}

.border-accent {
    border: 1px solid var(--accent);
}

main.landing {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr 6fr 1fr;
  grid-template-areas: "header"
    "content"
    "footer";

  section.content {
    grid-area: content;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    background: rgb(from var(--surface) r g b / 0.5);

    h1, h2, h3 {
      text-align: center;
      flex-grow: 0;
    }

    h1 {
      font-size: 12rem;
      margin: 7rem 0 0 0;
    }

    h2 {
      font-size: 7.2rem;
      margin: 7rem 0;

      .text-bold {
        color: #ffffff;
      }
    }

    h3 {
      font-size: 5.6rem;
      margin: 0;
    }

    article {
      flex-grow: 1;

      ul {
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        li {
          font-size: 5.6rem;
          list-style: none;
          margin-right: 3.2rem;
        }

        li:nth-child(1) {
          color: var(--secondary);
        }

        li:nth-child(2) {
          color: var(--support);
        }

        li:nth-child(3) {
          color: var(--accent);
        }
      }
    }
  }
}