/* Roschin identity tokens
   Font: Onest (SIL Open Font License). Load from Google Fonts or self-host:
   https://fonts.google.com/specimen/Onest  weights 400, 500, 600
   Fluid sizes run from a 390 px to a 1100 px viewport. */

:root {
  color-scheme: light;

  /* Colour: light */
  --color-bg: #FFFFFF;            /* page background */
  --color-surface: #F6F5F2;       /* alternate background, button hover */
  --color-border: #E4E2DD;        /* hairlines, dividers */
  --color-border-strong: #8D8B85; /* control outlines, focus ring (3.4:1), never text */
  --color-text-muted: #5E5C57;    /* secondary text (6.7:1 on bg) */
  --color-text: #161614;          /* text, filled button (18.1:1 on bg) */
  --color-accent: #C65A2E;        /* the mark only, never text or UI */

  /* Type */
  --font-sans: "Onest", "Helvetica Neue", Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-display: clamp(2.25rem, 1.5625rem + 2.817vw, 3.5rem);   /* 36 to 56 */
  --leading-display: 1.1;
  --tracking-display: -0.025em;
  --text-h2: clamp(1.625rem, 1.419rem + 0.845vw, 2rem);          /* 26 to 32 */
  --leading-h2: 1.25;
  --tracking-h2: -0.015em;
  --text-h3: clamp(1.125rem, 1.056rem + 0.282vw, 1.25rem);       /* 18 to 20 */
  --leading-h3: 1.4;
  --text-lead: clamp(1.125rem, 1.022rem + 0.423vw, 1.3125rem);   /* 18 to 21 */
  --leading-lead: 1.5;
  --tracking-lead: -0.005em;
  --text-body: clamp(1rem, 0.966rem + 0.141vw, 1.0625rem);       /* 16 to 17 */
  --leading-body: 1.6;
  --text-small: 0.875rem;                                        /* 14 */
  --leading-small: 1.5;

  /* Spacing: 4 px base */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --space-section: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);    /* 48 to 72 */
  --space-intro: clamp(3.5rem, 2.6rem + 3.5vw, 6rem);  /* 56 to 96 */

  /* Layout */
  --content-max: 60rem;  /* 960, body text stays at --measure */
  --measure: 66ch;       /* body text line length */
  --gutter: clamp(1.25rem, 5vw, 3rem);  /* 20 to 48 */

  /* Shape and controls */
  --radius-none: 0;
  --radius-control: 6px;
  --border-width: 1px;
  --control-height: 3rem;  /* 48 */
  --control-padding-x: 1.375rem;
  --underline-offset: 4px;
  --underline-thickness: 1px;
  --underline-thickness-hover: 2px;
  --focus-ring: 2px solid var(--color-border-strong);
  --focus-offset: 2px;
  --button-hover-bg: #5E5C57;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #131312;
    --color-surface: #1D1C1A;
    --color-border: #34332F;
    --color-border-strong: #6E6C66;
    --color-text-muted: #A5A39C;
    --color-text: #F3F2EE;
    --button-hover-bg: #A5A39C;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #131312;
  --color-surface: #1D1C1A;
  --color-border: #34332F;
  --color-border-strong: #6E6C66;
  --color-text-muted: #A5A39C;
  --color-text: #F3F2EE;
  --button-hover-bg: #A5A39C;
}

/* Base elements */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--weight-regular) var(--text-body) / var(--leading-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}
a:hover { text-decoration-thickness: var(--underline-thickness-hover); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 var(--control-padding-x);
  border: var(--border-width) solid var(--color-text);
  border-radius: var(--radius-control);
  background: var(--color-text);
  color: var(--color-bg);
  font: var(--weight-medium) 1rem / 1 var(--font-sans);
  text-decoration: none;
}
.button:hover { background: var(--button-hover-bg); border-color: var(--button-hover-bg); }

.button--outline {
  background: transparent;
  color: var(--color-text);
}
.button--outline:hover { background: var(--color-surface); border-color: var(--color-text); }

/* Lists: the bar marker is drawn in CSS, no characters in the text */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 28px;
  border-top: var(--border-width) solid var(--color-border);
}
.list li:first-child { border-top: 0; }
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-4) + 0.8em - 1.5px); /* centred on the first line at line-height 1.6 */
  width: 12px;
  height: 3px;
  background: var(--color-text);
}

/* Portrait in About me: 112 px square, supply at 224 x 224 or larger */
.about { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.about p { flex: 1 1 20rem; margin: 0; }
.portrait {
  flex: none;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--radius-none);
  background: var(--color-surface);
}