/* shared/ui/styling.css
   Global design tokens + reset. Every feature's own .css reads these
   vars rather than redefining colors, spacing, or borders. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
    /* screens */
    --screen-mobile: 375px;
    --screen-tablet: 768px;
    --screen-desktop: 1024px;

    /* grids */


    /* layouts */
    --layout-vertical-display: flex;
    --layout-vertical-flex-direction: column;
    --layout-vertical-flex-wrap: wrap;

    --layout-horizontal-display: flex;
    --layout-horizontal-flex-direction: row;
    --layout-horizontal-flex-wrap: wrap;

    /* colors */
    --app-bg: black;
    --contaienr-bg-a: black;
    --container-bg-b: white;
    --content-a: black;
    --content-b: white;
    --accent-a: gray;
    --accent-b: #00558D;
    --accent-c: #BF00FF;
    --accent-d: #FF5D35;

    /* typography */
    --font-display: "Fraunces", serif;
    --font-body: "Space Grotesk", sans-serif;

    /* type scale */
    --text-xs: 0.8rem;
    --text-sm: 1rem;
    --text-md: 1.25rem;
    --text-lg: 2rem;
    --text-xl: 3rem;

    /* spacing */
    --space: 8px;

    /* border */
    --border-size: 2px;
    --border-shape: solid;
    --border-raduis: 8px;
    --border-color-a: black;
    --border-color-b: white;

    /* shadow (hard-edge, neubrutalist — no blur, no soft grey) */
    --shadow-offset: 6px;
}

html,
body {
  height: 100%;
}

body {
  background: var(--accent-b);
  color: var(--content-b);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
}

h1 { font-size: var(--text-xl); font-weight: 600; }
h2 { font-size: var(--text-lg); font-weight: 600; }
h3 { font-size: var(--text-md); font-weight: 600; }

p, li { max-width: 70ch; }

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

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* layout utilities — read the layout tokens above */
.layout-vertical {
  display: var(--layout-vertical-display);
  flex-direction: var(--layout-vertical-flex-direction);
  flex-wrap: var(--layout-vertical-flex-wrap);
}

.layout-horizontal {
  display: var(--layout-horizontal-display);
  flex-direction: var(--layout-horizontal-flex-direction);
  flex-wrap: var(--layout-horizontal-flex-wrap);
}

/* shared neubrutalist surface — used by cards across Services,
   Portfolio and Content so the hard-border/offset-shadow look is
   defined once, not re-implemented per feature. Color is left to
   the feature using it. */
.surface {
  border: var(--border-size) var(--border-shape) var(--border-color-b);
  border-radius: var(--border-raduis);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color-b);
}

/* app canvas — layer 2, the black "working area" nested inside the
   blue app-environment body (layer 1). --app-bg keeps its original
   black value; only which element reads it has changed. Combine
   with .surface in markup for the bordered-panel treatment that
   exposes the blue body as a frame around it. */
.app-canvas {
  background: var(--app-bg);
  color: var(--content-b);
  margin: clamp(8px, 3vw, 32px);
}

/* section title — sits directly on the black .app-canvas (layer 2),
   so it reads in white against it; shared verbatim by every feature. */
.section-title {
  color: var(--content-b);
  padding: calc(var(--space) * 4) calc(var(--space) * 2) 0;
}

/* responsive type scale — breakpoints match --screen-* above
   (hardcoded: custom properties can't be read inside @media) */
@media (min-width: 768px) {
  :root {
    --text-xl: 4rem;
    --text-lg: 2.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --text-xl: 5rem;
    --text-lg: 3rem;
  }
}

/* accessibility floor */
:focus-visible {
  outline: var(--border-size) var(--border-shape) var(--accent-b);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}