/* ==========================================================================
   Yasha Studios — Base Styles
   --------------------------------------------------------------------------
   This file contains the global foundation for the site:
   - Font loading
   - Theme color tokens
   - Basic reset/defaults
   - Accessibility helpers
   - Focus states
   - General typography defaults

   Layout-specific rules belong in layout.css.
   Reusable component rules belong in components.css.
   Homepage-only rules belong in pages/home.css.
   ========================================================================== */


/* ==========================================================================
   Font faces
   --------------------------------------------------------------------------
   Mona Sans is the main site font.
   Mona Sans Italic is reserved for italic text.
   Mona Sans Mono is used for code and project-card text.
   ========================================================================== */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Mona Sans Mono";
  src: url("/assets/fonts/mona-sans-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}


/* ==========================================================================
   Theme tokens
   --------------------------------------------------------------------------
   Light mode is the default.
   Dark mode can be activated either by system preference or by JavaScript
   setting data-theme="dark" on the html element.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Font stacks */
  --font-sans: "Mona Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Mona Sans Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Core brand accent */
  --color-accent: #7851a9;
  --color-accent-hover: #684597;
  --color-accent-active: #583a82;
  --color-accent-soft: #efe8f8;

  /* Light theme surfaces */
  --color-page: #f6f4f0;
  --color-surface: #ffffff;
  --color-surface-raised: #fbfaf8;
  --color-surface-muted: #ece8e2;

  /* Light theme text */
  --color-text: #25232a;
  --color-text-muted: #5f5968;
  --color-text-soft: #7a7482;
  --color-text-on-accent: #ffffff;

  /* Light theme borders and shadows */
  --color-border: #d8d2c8;
  --color-border-strong: #bbb2a4;
  --shadow-soft: 0 18px 45px rgba(39, 34, 46, 0.12);
  --shadow-subtle: 0 8px 24px rgba(39, 34, 46, 0.08);

  /* Interactive/accessibility colors */
  --color-focus: #7851a9;
  --color-link: #5f3f91;
  --color-link-hover: #43296e;

  /* Reusable sizing tokens */
  --radius-small: 0.5rem;
  --radius-medium: 0.9rem;
  --radius-large: 1.35rem;
  --radius-pill: 999px;

  --page-gutter: clamp(1rem, 4vw, 2rem);
  --content-max-width: 72rem;

  /* Motion tokens kept restrained and reusable. */
  --transition-fast: 150ms ease;
  --transition-medium: 220ms ease;
}

/* Respect the user's system dark-mode preference when no manual theme is saved. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;

    --color-accent: #a77add;
    --color-accent-hover: #bb92ec;
    --color-accent-active: #d0adfb;
    --color-accent-soft: #2c2138;

    --color-page: #15141a;
    --color-surface: #201e27;
    --color-surface-raised: #282531;
    --color-surface-muted: #32303a;

    --color-text: #f1edf7;
    --color-text-muted: #c7becf;
    --color-text-soft: #a89fb3;
    --color-text-on-accent: #17121f;

    --color-border: #403a4c;
    --color-border-strong: #5a5268;
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
    --shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.22);

    --color-focus: #caa6f4;
    --color-link: #caa6f4;
    --color-link-hover: #dfc5ff;
  }
}

/* Manual light theme override. */
html[data-theme="light"] {
  color-scheme: light;

  --color-accent: #7851a9;
  --color-accent-hover: #684597;
  --color-accent-active: #583a82;
  --color-accent-soft: #efe8f8;

  --color-page: #f6f4f0;
  --color-surface: #ffffff;
  --color-surface-raised: #fbfaf8;
  --color-surface-muted: #ece8e2;

  --color-text: #25232a;
  --color-text-muted: #5f5968;
  --color-text-soft: #7a7482;
  --color-text-on-accent: #ffffff;

  --color-border: #d8d2c8;
  --color-border-strong: #bbb2a4;
  --shadow-soft: 0 18px 45px rgba(39, 34, 46, 0.12);
  --shadow-subtle: 0 8px 24px rgba(39, 34, 46, 0.08);

  --color-focus: #7851a9;
  --color-link: #5f3f91;
  --color-link-hover: #43296e;
}

/* Manual dark theme override. */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-accent: #a77add;
  --color-accent-hover: #bb92ec;
  --color-accent-active: #d0adfb;
  --color-accent-soft: #2c2138;

  --color-page: #15141a;
  --color-surface: #201e27;
  --color-surface-raised: #282531;
  --color-surface-muted: #32303a;

  --color-text: #f1edf7;
  --color-text-muted: #c7becf;
  --color-text-soft: #a89fb3;
  --color-text-on-accent: #17121f;

  --color-border: #403a4c;
  --color-border-strong: #5a5268;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.28);
  --shadow-subtle: 0 8px 24px rgba(0, 0, 0, 0.22);

  --color-focus: #caa6f4;
  --color-link: #caa6f4;
  --color-link-hover: #dfc5ff;
}


/* ==========================================================================
   Reset and document defaults
   --------------------------------------------------------------------------
   This is intentionally modest. It removes common browser weirdness without
   turning the site into a framework.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-block-size: 100%;
  scroll-behavior: smooth;
}

body {
  min-block-size: 100%;
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: "Mona Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}

img,
picture,
svg,
canvas {
  display: block;
  max-inline-size: 100%;
}

img {
  block-size: auto;
}

button {
  border: 0;
}

ul,
ol {
  margin-block: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: 0;
}

p:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
  margin-block-end: 0;
}


/* ==========================================================================
   Typography defaults
   ========================================================================== */

h1,
h2,
h3 {
  line-height: 1.1;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-link-hover);
}

strong {
  font-weight: 750;
}

em {
  font-style: italic;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}


/* ==========================================================================
   Focus states
   --------------------------------------------------------------------------
   Visible focus is non-negotiable. This supports keyboard navigation and
   keeps links/buttons usable without relying on hover.
   ========================================================================== */

:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}


/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

/*
  Visually hides content while keeping it available to screen readers.
  Useful for accessible names, helper labels, and fallback text.
*/
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
  Skip link is hidden until focused.
  This lets keyboard users jump past repeated header/navigation content.
*/
.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding-inline: 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}


/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   Motion should be useful, not required. Users who prefer reduced motion get
   instant transitions and no smooth scrolling.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}