/* ============================================================================================
   ORGANIC — the design system, as tokens. (Increment 4, task A.2.)

   The single source of truth for every colour, face, step of spacing, radius and shadow that
   atlas-studio's OWN pages use: the panel today, the storefront next. Ported from the design
   handoff (docs/handoffs/atlas-hero/README.md, "Design Tokens"), value for value.

   Two rules, and they are why this file exists:

     1. NO AD-HOC HEXES. After this, a stylesheet of ours that names a colour instead of a
        token is a bug — and a greppable one. A test asserts the panel contains no hex at all.

     2. NOTHING OFF-BOX. The faces are served from our own origin (/assets/fonts/*), never from
        Google Fonts. A <link> to a font CDN would tell a third party about every visitor to
        every page we serve, and would put a host we do not control on our critical path. The
        rule that already governs the sites we GENERATE (which inline their faces as data: URLs)
        is the same rule here, pointed at our own front door.

   Not to be confused with the ORGANIC SEED STYLE (src/styles.js) — that is a set of reference
   tokens shown to the design model as a place to BEGIN a customer's site. This is the skin of
   the studio itself, and the model never sees it.
   ============================================================================================ */

/* -- The faces. Caprasimo is the only display face and has only weight 400; Figtree carries
      everything else. Vendored in templates/_design/fonts/, served from this origin, and
      `swap` so a visitor reads the page while the face is still arriving. ------------------ */
@font-face {
  font-family: "Caprasimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/caprasimo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/figtree-400.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/figtree-600.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-700.woff2") format("woff2");
}

:root {
  /* ---- Ground ---------------------------------------------------------------------------- */
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-divider: rgba(32, 30, 29, 0.16); /* ink @ 16% */

  /* ---- Accent — terracotta. The full ramp, so a shade is always a step, never a guess. --- */
  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent:     #c67139;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  /* ---- Accent-2 — sage. -------------------------------------------------------------------*/
  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2:     #7a8a5e;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  /* ---- Neutrals — warm, never grey. ------------------------------------------------------ */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  /* ---- Type. A system fallback on every stack: if a woff2 fails to decode, the page is
          still readable rather than still beautiful. ------------------------------------- */
  --font-display: Caprasimo, ui-serif, Georgia, "Times New Roman", serif;
  --font-display-weight: 400;
  --font-body: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body-weight: 400;

  --text-kicker: 12px;   /* 700, uppercase, 0.1em tracking */
  --text-label: 13px;
  --text-body: 15px;
  --text-body-lg: 17px;
  --text-lead: 18px;

  /* ---- Spacing, on the handoff's 1.10x density scale. ------------------------------------- */
  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-5: 26.4px;
  --space-6: 35.2px;
  --space-gutter: 56px;  /* the hero sections' horizontal padding */

  /* ---- Radius. Soft, and softer again for cards. ------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-card: 32px;
  --radius-pill: 999px;

  /* ---- Shadows, cast in ink (#2e2b25) rather than in black — a warm ground casts a warm
          shadow, and a black one would grey it. --------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(46, 43, 37, 0.14);
  --shadow-md: 0 3px 10px rgba(46, 43, 37, 0.16);
  --shadow-lg: 0 12px 32px rgba(46, 43, 37, 0.22);

  /* ---- Motion. One duration, so nothing in the studio moves at its own pace. --------------- */
  --ease: 0.15s ease;
}

/* ============================================================================================
   The primitives every Organic page shares. Type, buttons, chips, fields, focus. Purely
   presentational — no page here owns any behaviour.
   ============================================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0;
}

/* THE focus ring, everywhere, for everyone: 2px of accent, offset — never the browser's default
   blue, which belongs to no design system and least of all to this one. It is on :focus-visible
   so a mouse click does not draw it, and a Tab key always does. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Buttons. A pill, always. Primary is terracotta and there is only ever one of it on a
        screen; secondary is an outline of the same shape. ------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-600);   /* the ramp, one step past base — the system's hover */
  border-color: var(--color-accent-600);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-800);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent-700);
}

/* The ghost pills of the input card's action row ("Screenshot", "Paste a link"). */
.btn-ghost {
  background: transparent;
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-800);
  padding: 8px 14px;
  font-size: var(--text-label);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent-700); }

.btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Industry chips. Pill, 13px/600. Selected fills with the accent. --------------------- */
.chip {
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--ease);
  background: var(--color-bg);
  color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-300);
}
.chip:hover { border-color: var(--color-accent); }
.chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* ---- The kicker: 12px/700, uppercase, wide, with an accent dot before it. ----------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-kicker);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-2-600);
  flex: none;
}

/* ---- Cards and fields. -------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-md);
}

.field {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
}
.field::placeholder { color: var(--color-neutral-500); }

/* Prompt textarea: auto-grows with content (JS sets height to scrollHeight) up to ~40vh;
   beyond that it scrolls with a thin Organic scrollbar — never the default browser bar. */
textarea#prompt.field {
  overflow-y: auto;
  max-height: 40vh;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}
textarea#prompt.field::-webkit-scrollbar { width: 8px; }
textarea#prompt.field::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 999px;
}
textarea#prompt.field::-webkit-scrollbar-track { background: transparent; }

/* ---- Notices. A refusal is a sentence a person reads, not a stack trace — so it gets a
        themed card, not red monospace. Three tones, one shape. ------------------------------ */
.notice {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body);
  line-height: 1.55;
}
.notice-ok {
  border-color: var(--color-accent-2-300);
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-800);
}
.notice-refused {
  border-color: var(--color-accent-300);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}