/* Gutterfold design tokens (CSS). Mirrors tokens.json. */
/* Fonts: self-hosted from /fonts (adjust paths to your site). Alternative: Google Fonts
   https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap */
@font-face { font-family: "Syne"; src: url("../fonts/Syne-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Syne"; src: url("../fonts/Syne-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light dark;
  /* brand pairs: face + fold */
  --gf-teal: #0FA3A3;   --gf-teal-fold: #0A6E73;
  --gf-peach: #FFB38A;  --gf-peach-fold: #E8845A;
  --gf-sun: #FFD166;    --gf-sun-fold: #D9A43A;
  --gf-paper: #FBF6EE;  --gf-paper-fold: #E9DDC8;
  --gf-ink: #1E1B2E;    --gf-ink-fold: #3A3554;

  /* semantic, light */
  --bg: #FBF6EE; --surface: #FFFFFF; --surface-sunken: #F3EBDD; --line: #E9DDC8;
  --text: #1E1B2E; --text-secondary: #5E5872; --text-muted: #8A8399;
  --accent: #0FA3A3; --accent-fold: #0A6E73; --on-accent: #06302F; --accent-text: #0A6E73;
  --warm: #FFB38A; --warm-fold: #E8845A; --on-warm: #5C2410;
  --highlight: #FFD166; --highlight-fold: #D9A43A; --on-highlight: #5A3E07;
  --danger: #C8432B; --focus: #0A6E73;
  --panel-ink: #1E1B2E; --on-panel-ink: #FBF6EE; /* ink panels invert in dark mode */

  /* type */
  --font-display: "Syne", "Helvetica Neue", Arial, sans-serif;
  --font-text: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --type-display: 800 clamp(40px, 7vw, 80px)/1.0 var(--font-display);
  --type-title: 700 32px/1.1 var(--font-display);
  --type-heading: 700 22px/1.2 var(--font-display);
  --type-body: 400 17px/1.55 var(--font-text);
  --type-label: 500 15px/1.3 var(--font-text);
  --type-small: 400 14px/1.45 var(--font-text);
  --type-caption: 500 12px/1.3 var(--font-text);
  --tracking-display: -0.02em; --tracking-title: -0.01em;

  /* space, radius, folds */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --r-page: 4px; --r-control: 8px; --r-card: 12px; --r-sheet: 20px;
  --ear-sm: 10px; --ear-control: 12px; --ear-card: 18px; --ear-hero: 32px;
  --gutter-panel: 6px; --gutter-spine: 4px;

  /* motion */
  --ease-fold: cubic-bezier(.65,0,.35,1); --dur-fold: 700ms;
  --ease-crease: cubic-bezier(.2,.8,.2,1); --dur-crease: 220ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E1B2E; --surface: #2A2640; --surface-sunken: #17152A; --line: #3A3554;
    --text: #FBF6EE; --text-secondary: #B4AECB; --text-muted: #857F9E;
    --accent: #2FC4C1; --accent-fold: #0FA3A3; --accent-text: #5DD6D3;
    --danger: #FF7A5C; --focus: #5DD6D3;
    --panel-ink: #FBF6EE; --on-panel-ink: #1E1B2E;
  }
}
:root[data-theme="dark"] {
  --bg: #1E1B2E; --surface: #2A2640; --surface-sunken: #17152A; --line: #3A3554;
  --text: #FBF6EE; --text-secondary: #B4AECB; --text-muted: #857F9E;
  --accent: #2FC4C1; --accent-fold: #0FA3A3; --accent-text: #5DD6D3;
  --danger: #FF7A5C; --focus: #5DD6D3;
  --panel-ink: #FBF6EE; --on-panel-ink: #1E1B2E;
}

/* ---------- Signature primitives ---------- */

/* Dog-ear: one folded corner, top-right. Set --ear and --ear-fold on the element. */
.gf-ear {
  --ear: var(--ear-card); --ear-fold: var(--accent-fold);
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--ear)) 0, 100% var(--ear), 100% 100%, 0 100%);
}
.gf-ear::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: var(--ear); height: var(--ear); background: var(--ear-fold);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}
[dir="rtl"] .gf-ear { clip-path: polygon(var(--ear) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ear)); }
[dir="rtl"] .gf-ear::after { right: auto; left: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); }

/* Buttons */
.gf-btn {
  font: var(--type-label); border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap;
  padding: 13px 22px; border-radius: var(--r-control);
  transition: transform var(--dur-crease) var(--ease-crease);
}
.gf-btn:active { transform: translateY(1px); }
.gf-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.gf-btn--primary { background: var(--accent); color: var(--on-accent); }
.gf-btn--primary.gf-ear { --ear: var(--ear-control); --ear-fold: var(--accent-fold); border-radius: var(--r-control) 0 var(--r-control) var(--r-control); }
.gf-btn--secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
.gf-btn--quiet { background: transparent; color: var(--accent-text); padding-inline: var(--s2); }

/* Tags */
.gf-tag { font: var(--type-caption); letter-spacing: .01em; padding: 4px 10px; border-radius: var(--r-page); display: inline-block; }
.gf-tag--new { background: var(--highlight); color: var(--on-highlight); }
.gf-tag--warm { background: #FFE3D2; color: #7A3519; }
.gf-tag--accent { background: #CFEDEC; color: #0A4B4E; }

/* Panel grid: gutters reveal the background */
.gf-panels { display: grid; gap: var(--gutter-panel); }

/* Fold motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; }
}