/* ==========================================================================
   base.css
   ==========================================================================
   Single source of truth for the design system: every custom property
   (color, type, spacing, radius, shadow, z-index, motion) that the rest of
   the CSS (layout.css, components.css, animations.css, responsive.css)
   must reference instead of introducing new raw values.

   Scope of this file, deliberately: CSS reset, design tokens, bare HTML
   element defaults, and a handful of universal utilities. No component,
   section, or layout styling lives here.

   Mobile-first: every token below is set to its smallest/mobile value by
   default. responsive.css overrides the handful of tokens that actually
   change at larger breakpoints (Display/H1/H2 sizes, container padding) —
   see the "Responsive contract" note near the bottom of each relevant
   section for exactly which tokens those are.
   ========================================================================== */


/* ==========================================================================
   1. CSS Reset (modern, not aggressive — keeps sensible browser defaults
   where they help, removes the ones that consistently cause fights with
   real layouts)
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  /* 100% keeps 1rem tied to the user's browser font-size setting rather
     than pinning it — required for the rem-based spacing/type scale below
     to remain genuinely accessible (respects browser zoom/text-size
     preferences instead of overriding them). */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Long unbroken strings (emails, URLs in Contact/Projects) shouldn't be
     able to force horizontal scroll on narrow viewports. */
  overflow-wrap: break-word;
}

/* Responsive media defaults — images/embeds never overflow their container
   and never carry unwanted inline-element gaps. */
img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form controls don't inherit typography by default in most browsers —
   force it so buttons/inputs/textareas always match the surrounding type
   system instead of falling back to the OS UI font. */
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Buttons/inputs are disabled via the `disabled` attribute across this
   project (see Design Foundation Part 6) rather than a class — keep the
   cursor affordance correct wherever that attribute is used. */
button:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* Table reset kept minimal — no tables in the current component inventory,
   but this is cheap, universal, and correct to have in a reset. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ==========================================================================
   2. Design Tokens
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     Colors
     Locked per Design Foundation Part 2. Every color used anywhere in
     this project must reference one of these — no raw hex/rgba values
     in layout.css, components.css, animations.css, or responsive.css.
     ------------------------------------------------------------------ */

  /* Background */
  --color-bg: #0B1120;              /* page background */
  --color-surface: #111827;         /* alternating section background */
  --color-surface-elevated: #1F2937; /* card / elevated surface background */

  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #94A3B8;

  /* Accent */
  --color-accent: #06B6D4;
  --color-accent-secondary: #22D3EE;   /* lighter variant — links, focus ring */
  --color-accent-hover: #0891B2;       /* darkened, for hover on filled accent surfaces */
  --color-accent-hover-subtle: rgba(34, 211, 238, 0.12); /* wash for accent-bordered elements on hover */

  /* Border / Divider */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-divider: rgba(255, 255, 255, 0.06);

  /* Link */
  --color-link: #22D3EE;
  --color-link-hover: #67E8F9;

  /* Status */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-error-bg: rgba(239, 68, 68, 0.10);

  /* Disabled */
  --color-disabled-bg: rgba(31, 41, 55, 0.5);   /* --color-surface-elevated @ 50% */
  --color-disabled-text: rgba(148, 163, 184, 0.4); /* --color-text-secondary @ 40% */

  /* Focus */
  --color-focus-ring: rgba(34, 211, 238, 0.6); /* --color-accent-secondary @ 60% */


  /* ------------------------------------------------------------------
     Typography — families
     ------------------------------------------------------------------ */

  --font-heading: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;


  /* ------------------------------------------------------------------
     Typography — type scale
     Values below are MOBILE defaults (mobile-first). Display, H1, and H2
     are the only levels that change at larger breakpoints — responsive.css
     overrides --text-display, --text-h1, and --text-h2 at the Tablet and
     Laptop breakpoints per Implementation Standards Part 5. H3 and below
     are constant across every breakpoint by design (Design Foundation
     Part 3), so there is nothing for responsive.css to override on them.
     ------------------------------------------------------------------ */

  /* Display — Hero name only */
  --text-display: 2.5rem;      /* 40px mobile → 56px tablet → 64px desktop */
  --weight-display: 600;
  --leading-display: 1.1;
  --tracking-display: -0.02em;

  /* H1 — major section titles */
  --text-h1: 1.875rem;         /* 30px mobile → 36px tablet → 44px desktop */
  --weight-h1: 600;
  --leading-h1: 1.15;
  --tracking-h1: -0.02em;

  /* H2 — subsection titles */
  --text-h2: 1.5rem;           /* 24px mobile → 28px tablet → 32px desktop */
  --weight-h2: 600;
  --leading-h2: 1.2;
  --tracking-h2: -0.015em;

  /* H3 — card titles (constant across all breakpoints) */
  --text-h3: 1.5rem;           /* 24px */
  --weight-h3: 500;
  --leading-h3: 1.25;
  --tracking-h3: -0.01em;

  /* H4 — minor headings inside cards (constant) */
  --text-h4: 1.25rem;          /* 20px */
  --weight-h4: 600;
  --leading-h4: 1.3;
  --tracking-h4: 0;

  /* Subtitle — Hero one-liner, section intros (constant) */
  --text-subtitle: 1.125rem;   /* 18px */
  --weight-subtitle: 500;
  --leading-subtitle: 1.4;
  --tracking-subtitle: 0;

  /* Body Large — About narrative paragraph (constant) */
  --text-body-large: 1.125rem; /* 18px */
  --weight-body-large: 400;
  --leading-body-large: 1.6;
  --tracking-body-large: 0;

  /* Body — default running text (constant, never drops below this) */
  --text-body: 1rem;           /* 16px */
  --weight-body: 400;
  --leading-body: 1.6;
  --tracking-body: 0;

  /* Small — metadata, tags, nav items (constant) */
  --text-small: 0.875rem;      /* 14px */
  --weight-small: 500;
  --leading-small: 1.5;
  --tracking-small: 0.01em;

  /* Caption — timestamps, footer legal text (constant) */
  --text-caption: 0.75rem;     /* 12px */
  --weight-caption: 500;
  --leading-caption: 1.4;
  --tracking-caption: 0.02em;


  /* ------------------------------------------------------------------
     Spacing scale
     rem-based (not px) so spacing scales with the user's root font-size
     the same way type does. 1rem = 16px at the default root size.
     ------------------------------------------------------------------ */

  --space-4: 0.25rem;   /* 4px  — micro-spacing (icon-to-label gap) */
  --space-8: 0.5rem;    /* 8px  — tight grouping */
  --space-12: 0.75rem;  /* 12px — small internal padding (tags/badges) */
  --space-16: 1rem;     /* 16px — standard component padding */
  --space-24: 1.5rem;   /* 24px — card padding, related-element gaps */
  --space-32: 2rem;     /* 32px — gap between cards in a grid */
  --space-48: 3rem;     /* 48px — heading-to-content gap, mobile section padding */
  --space-64: 4rem;     /* 64px — tablet section padding */
  --space-96: 6rem;     /* 96px — desktop section padding */
  --space-128: 8rem;    /* 128px — Hero/Contact section breathing room */


  /* ------------------------------------------------------------------
     Radius
     Scales down as elements nest: cards > interactive controls > tag pills.
     ------------------------------------------------------------------ */

  --radius-sm: 0.375rem;  /* 6px  — nested tag/chip pills */
  --radius-md: 0.5rem;    /* 8px  — buttons, icon buttons, inputs */
  --radius-lg: 0.75rem;   /* 12px — cards */


  /* ------------------------------------------------------------------
     Shadows
     Design philosophy is borders-over-shadows at rest (Design Foundation
     Part 9) — these tokens exist for the few states where elevation is
     earned: Project Card hover, and future overlay components (dropdown,
     modal, tooltip) per the z-index scale below.
     ------------------------------------------------------------------ */

  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55);


  /* ------------------------------------------------------------------
     Z-index scale
     Named, not guessed — every future overlay/fixed-position component
     picks one of these instead of an arbitrary number.
     ------------------------------------------------------------------ */

  --z-header: 100;       /* sticky site header */
  --z-dropdown: 200;      /* mobile nav panel */
  --z-back-to-top: 300;   /* fixed back-to-top button */
  --z-tooltip: 400;       /* future: tooltips */
  --z-modal: 500;         /* future: modal overlays — highest, sits above everything */


  /* ------------------------------------------------------------------
     Animation tokens
     Durations/easings match the locked Motion Design spec
     (Implementation Standards Part 4) exactly — named by where they're
     used so component CSS can pick the right one without guessing.
     ------------------------------------------------------------------ */

  --duration-instant: 100ms;  /* button active/press feedback */
  --duration-fast: 150ms;     /* button hover, focus transitions */
  --duration-base: 200ms;     /* card hover, nav link active-state transitions */
  --duration-moderate: 250ms; /* back-to-top appear/disappear */
  --duration-menu: 280ms;     /* mobile menu open/close */
  --duration-slow: 350ms;     /* fade-in / scroll reveal */

  --ease-standard: ease;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* fade-in / scroll reveal */


  /* ------------------------------------------------------------------
     Layout tokens
     Referenced by the .container utility below and by layout.css.
     Breakpoint pixel values themselves can't live in a custom property
     (CSS custom properties aren't usable inside @media conditions), so
     they're documented here as a comment for reference — responsive.css
     is the single place those literal values are allowed to appear:
       Small Mobile 360–599 · Large Mobile 600–899 · Tablet 900–1199 ·
       Laptop 1200–1439 · Desktop 1440+
     ------------------------------------------------------------------ */

  --container-max-width: 1280px;
  --content-max-width: 1140px;
  --prose-max-width: 45rem; /* ~720px — About paragraph reading-width cap */

  /* Mobile default; responsive.css overrides at Tablet (48px) and
     Laptop/Desktop (80px) per Design Foundation Part 5. */
  --container-padding-inline: var(--space-24);
}


/* ==========================================================================
   3. Base Element Styles
   ========================================================================== */

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-h2); /* sensible generic default; each heading
    level's actual size/weight/leading/tracking is applied by the type-scale
    classes used in components.css, not by the bare element selector */
  line-height: var(--leading-h2);
}

strong, b {
  font-weight: var(--weight-h4); /* 600 — the semibold step already defined
    above, reused here rather than introducing a new raw weight value */
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  transition: color var(--duration-fast) var(--ease-standard);
}

/* Text selection uses the accent, tuned for legibility against the dark
   background rather than the browser's default blue. */
::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

::placeholder {
  color: var(--color-text-secondary);
  opacity: 1; /* Firefox lowers placeholder opacity by default — normalize it */
}


/* ==========================================================================
   4. Accessibility
   ========================================================================== */

/* Keyboard-only focus indicator — never suppressed, always visible.
   Uses :focus-visible (not :focus) so mouse/touch interaction doesn't
   trigger it, only keyboard navigation. Evergreen-browser support only is
   an accepted target for this project (Implementation Standards Part 7),
   so no legacy :focus fallback is needed. */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reduced motion: every future transition/animation in this project is
   written against the duration/easing tokens above, never a raw ms value
   — so redefining those tokens here is sufficient to neutralize motion
   project-wide without needing !important anywhere. The wildcard rule
   below is a secondary safety net for the rare case a future rule sets
   `animation`/`transition` directly instead of through a token. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --duration-menu: 0ms;
    --duration-slow: 0ms;
  }

  html {
    scroll-behavior: auto;
  }

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


/* ==========================================================================
   5. Utility Foundations
   Universal, content-agnostic utilities only — no component-specific
   classes belong here.
   ========================================================================== */

/* Visually hides content while keeping it available to screen readers —
   used for text that provides context to assistive tech without needing
   a visible label (e.g. supplementary labels beyond an icon + aria-label). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Centered max-width wrapper — the one layout primitive foundational
   enough to belong in base.css rather than layout.css. */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

/* Adds consistent vertical rhythm between an element's direct children,
   without needing margin utilities scattered through component markup.
   Defaults to the 24px step; override --flow-space locally for a tighter
   or looser rhythm in a specific context. */
.flow {
  --flow-space: var(--space-24);
}

.flow > * + * {
  margin-top: var(--flow-space);
}

/* Utility-class alternative to the native `hidden` attribute (already used
   directly in this project's HTML for the mobile nav and back-to-top
   button). Kept distinct and available for cases where toggling a class
   is more convenient than toggling the attribute from JavaScript. */
.hidden {
  display: none;
}