@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Karla:wght@400;500;600;700;800&display=swap");

/* ============================================================
   Sam Deo — portfolio theme
   Loaded AFTER the Organic stylesheet. It keeps Organic's class
   names and variable names and replaces the values, so every page
   picks up the new palette, type and corners from this one file.

   Palette adapted from Rei's Little Corner: cream paper, warm ink,
   leaf and clay in charge, honey/berry/sky rationed.
   Type: Bricolage Grotesque 800 over Karla.
   Corners: 20px.
   ============================================================ */

:root {
  --color-bg: #fffbef;
  --color-surface: #f6efdc;
  --color-text: #2e2a22;
  --color-accent: #6e8f5e;      /* leaf — primary */
  --color-accent-2: #c97a4e;    /* clay — second voice */
  --color-divider: color-mix(in srgb, #2e2a22 14%, transparent);

  /* rationed accents — use sparingly, never as a page ground */
  --color-honey: #f5c84c;       /* focus, highlight */
  --color-berry: #a94a6b;       /* rare emphasis, errors */
  --color-sky: #8fb8d8;         /* quiet information, charts */

  --color-neutral-100: #fffdf6;
  --color-neutral-200: #f5eedc;
  --color-neutral-300: #e8dfc6;
  --color-neutral-400: #cfc4a6;
  --color-neutral-500: #b0a487;
  --color-neutral-600: #8e836a;
  --color-neutral-700: #6b6252;
  --color-neutral-800: #4a4438;
  --color-neutral-900: #2e2a22;

  --color-accent-100: #f1f6ec;
  --color-accent-200: #dfead6;
  --color-accent-300: #c2d6b4;
  --color-accent-400: #9dba8a;
  --color-accent-500: #6e8f5e;
  --color-accent-600: #587749;
  --color-accent-700: #435c37;
  --color-accent-800: #2f4226;
  --color-accent-900: #1e2b18;

  --color-accent-2-100: #fdf1e8;
  --color-accent-2-200: #f9dfcc;
  --color-accent-2-300: #f0c3a2;
  --color-accent-2-400: #e09e70;
  --color-accent-2-500: #c97a4e;
  --color-accent-2-600: #a9603a;
  --color-accent-2-700: #8a4a2a;
  --color-accent-2-800: #64351d;
  --color-accent-2-900: #422213;

  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Karla", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2a22 12%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2a22 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2a22 20%, transparent);
}

/* Headings: Bricolage wants tighter tracking than Caprasimo did. */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.03em;
}
h4, h5, h6 {
  letter-spacing: -0.015em;
}

/* Corners: Organic ran buttons, tags and fields as pills. This system
   squares them off to match the 20px card. */
.btn, .tag, .input, select.input, .seg, .seg-opt {
  border-radius: 10px;
}
.btn-icon {
  border-radius: 10px;
}
.card {
  border-radius: var(--radius-md);
}

/* The one borrowed motion: a primary button sits on a solid cushion and
   sinks when pressed, like a wooden toy. */
.btn-primary {
  background: var(--color-accent-500);
  color: #fffbef;
  box-shadow: 0 3px 0 var(--color-accent-700);
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.btn-primary:hover {
  background: var(--color-accent-600);
}
.btn-primary:active {
  background: var(--color-accent-700);
  box-shadow: 0 1px 0 var(--color-accent-800);
  transform: translateY(2px);
}

.btn-secondary {
  border-color: var(--color-accent-700);
  color: var(--color-accent-700);
}
.btn-secondary:hover {
  background: var(--color-accent-100);
}

/* Focus is honey, so it stays visible on cream and on both accents. */
:focus-visible {
  outline: 2px solid var(--color-honey);
  outline-offset: 2px;
}