/**
 * humanistcanco.de — design tokens v0.1
 *
 * Master visual reference: good_1.png
 * Copy reference: humanistcanco-content.md
 *
 * Intent:
 * - warm editorial portfolio, not a generic "tech" UI
 * - Geist is the primary UI/content face
 * - Geist Mono is for metadata, numbering and technical labels
 * - Cormorant Garamond is a sparse brand/display accent:
 *   the H signet/glyph, hero display and occasional large statement only
 * - no card-heavy/dashboard styling
 * - thin rules, generous whitespace, restrained burnt-orange accent
 *
 * Accessibility:
 * - regular text should meet WCAG AA (>= 4.5:1)
 * - #B5621E is the brand accent, but is NOT suitable for normal-size text
 *   on the light canvas; use --color-accent-text there
 * - decorative/subtle borders do not need text-level contrast
 */

/* --------------------------------------------------------------------------
   Primitive colors
   -------------------------------------------------------------------------- */

:root {
  --raw-ivory: #F5EFE4;
  --raw-ivory-raised: #FFF9F0;

  --raw-brown-950: #2C1F0E;
  --raw-brown-800: #4A3520;
  --raw-brown-700: #6B4E2A;
  --raw-brown-500: #9C7A4A;
  --raw-brown-300: #C4A882;

  --raw-orange-600: #B5621E; /* brand accent */
  --raw-orange-700: #A64F15; /* accessible accent text on light */
  --raw-orange-500: #D57834; /* accessible accent text on dark */

  /* ------------------------------------------------------------------------
     Semantic colors — default / light
     ------------------------------------------------------------------------ */

  --color-canvas: var(--raw-ivory);
  --color-surface: var(--raw-ivory-raised);

  --color-text: var(--raw-brown-950);
  --color-text-secondary: var(--raw-brown-800);
  --color-text-muted: var(--raw-brown-700);

  --color-border: var(--raw-brown-500);
  --color-border-subtle: var(--raw-brown-300);

  --color-accent: var(--raw-orange-600);
  --color-accent-text: var(--raw-orange-700);

  /*
   * Accent surface in good_1 uses the brand orange.
   * Deep brown on #B5621E is suitable for large display text (3.61:1),
   * but not normal body copy. Keep this surface primarily typographic/
   * decorative; avoid small copy on it.
   */
  --color-accent-surface: var(--raw-orange-600);
  --color-accent-surface-display: var(--raw-brown-950);

  /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */

  --font-ui: "Geist", sans-serif;
  --font-mono: "Geist Mono", monospace;
  --font-brand: "Cormorant Garamond", serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /*
   * Fluid display scale.
   * Cormorant is not the generic heading font; prefer Geist for ordinary
   * section headings and project titles.
   */
  --text-display-xl: clamp(3.25rem, 7.5vw, 7rem);
  --text-display-lg: clamp(2.75rem, 5.5vw, 5rem);
  --text-display-md: clamp(2.25rem, 4vw, 3.75rem);

  --leading-display-xl: 0.95;
  --leading-display-lg: 1;
  --leading-display-md: 1.05;

  --text-heading-lg: 1.75rem;   /* 28px */
  --text-heading-md: 1.375rem;  /* 22px */
  --text-heading-sm: 1.125rem;  /* 18px */

  --leading-heading-lg: 1.2;
  --leading-heading-md: 1.25;
  --leading-heading-sm: 1.3;

  --text-body-lg: 1.125rem; /* 18px */
  --text-body: 1rem;        /* 16px */
  --text-body-sm: 0.875rem; /* 14px */
  --text-label: 0.8125rem;  /* 13px */
  --text-meta: 0.75rem;     /* 12px */

  --leading-body-lg: 1.6;
  --leading-body: 1.6;
  --leading-body-sm: 1.55;
  --leading-label: 1.3;
  --leading-meta: 1.4;

  --tracking-meta: 0.08em;

  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */

  /*
   * Content width is the content width — gutter is added outside it.
   * With border-box sizing:
   *   max container box = 1200px + 16px + 16px = 1232px.
   */
  --content-max: 75rem;    /* 1200px */
  --page-gutter: 1rem;    /* fixed 16px */
  --container-max: calc(var(--content-max) + 2 * var(--page-gutter));

  --reading-max: 65ch;

  /*
   * Structural grid:
   *   mobile:  4 columns
   *   >=48rem: 8 columns
   *   >=72rem: 12 columns
   *
   * Breakpoints should change structure, not arbitrarily rescale typography.
   */
  --grid-columns-mobile: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;
  --grid-gap: clamp(1rem, 2vw, 2rem);

  /* ------------------------------------------------------------------------
     Vertical rhythm
     ------------------------------------------------------------------------ */

  --space-section: clamp(4.5rem, 10vw, 9rem);
  --space-block: clamp(2rem, 5vw, 4.5rem);
  --space-element: clamp(1rem, 2vw, 2rem);

  /* ------------------------------------------------------------------------
     Lines / surfaces
     ------------------------------------------------------------------------ */

  --border-width: 1px;

  --surface-default-bg: var(--color-canvas);
  --surface-default-fg: var(--color-text);

  --surface-accent-bg: var(--color-accent-surface);
  --surface-accent-fg-display: var(--color-accent-surface-display);

  --surface-inverse-bg: var(--raw-brown-950);
  --surface-inverse-fg: #E8D8BF;

  /* Portfolio uses flat editorial composition rather than elevated cards. */
  --shadow-none: none;
}


/* --------------------------------------------------------------------------
   Optional dark semantic theme
   --------------------------------------------------------------------------
   This preserves the palette explored in the original HTML concept.
   The good_1 reference remains the source of truth for the default light UI.
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --color-canvas: #2C1F0E;
  --color-surface: #3A2812;

  --color-text: #E8D8BF;
  --color-text-secondary: #C4A882;
  --color-text-muted: #9C7A4A;

  --color-border: #6B4E2A;
  --color-border-subtle: #4A3520;

  --color-accent: #B5621E;
  --color-accent-text: #D57834;

  --surface-default-bg: var(--color-canvas);
  --surface-default-fg: var(--color-text);

  --surface-inverse-bg: #F5EFE4;
  --surface-inverse-fg: #2C1F0E;
}


/* --------------------------------------------------------------------------
   Reference implementation primitives
   --------------------------------------------------------------------------
   These are intentionally tiny helpers so an implementation can reproduce
   the agreed geometry without inventing a different container model.
   -------------------------------------------------------------------------- */

.hc-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.hc-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (min-width: 48rem) {
  .hc-grid {
    grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .hc-grid {
    grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
  }
}

/*
 * Implementation guardrails for matching good_1:
 *
 * 1. Do not add a standalone H to the header in addition to the accepted
 *    humanist / can co.de lockup.
 * 2. Hero has no CTA.
 * 3. Selected projects is a flat editorial list, not a set of cards.
 * 4. Project metadata stays on one line: number / year-or-status / category.
 * 5. Project action ("View project →") sits directly below the description.
 * 6. Desktop/tablet may show project preview media; narrow mobile omits it.
 * 7. Accent statement is a solid burnt-orange surface with a large H motif;
 *    do not replace it with photography or a background illustration.
 * 8. About remains a distinct section below the accent statement.
 * 9. Footer keeps brand/identity on the left and Email / GitHub / LinkedIn
 *    on the right on wide layouts; it may stack naturally on narrow screens.
 * 10. Prefer reflow over separate mobile/desktop content structures.
 */