/* ==============================================================================
   HassleFreBooks — Calm UI Refresh v1
   ==============================================================================
   Chunk 209: Calm baseline visual system applied site-wide.

   Purpose:
   This stylesheet layers calm, readable defaults on top of the existing
   design-tokens.css foundation. It does NOT replace tokens — it consumes them
   and adds a few new ones where gaps exist, then applies improved base rules
   for typography, spacing, layout, forms, and accessibility.

   Why a separate file?
   app.css already has 4000+ lines of component-specific styles. This file
   focuses purely on the calm "feel" — the typographic rhythm, whitespace,
   and interactive defaults that make the whole app feel cohesive and restful.

   Load order:
   design-tokens.css -> ... -> app.css -> calm-refresh.css -> ...
   (Registered in config/assets.php after app.css so it can refine defaults.)
   ============================================================================== */


/* ==============================================================================
   A) SUPPLEMENTAL DESIGN TOKENS
   ==============================================================================
   These tokens fill gaps not covered by design-tokens.css. They reference
   existing tokens where possible so the calm palette stays in sync with
   the broader theme system.
   ============================================================================== */

:root {
  /* -- Calm color aliases --------------------------------------------------- */
  /* Map existing tokens to semantic names this stylesheet uses internally.
     If design-tokens.css already defines these, the duplicate is harmless
     because we use the same values. */
  --color-calm-bg:          var(--color-bg, #faf9f7);
  --color-calm-surface:     var(--color-surface, #ffffff);
  --color-calm-text:        var(--color-text, #37352f);
  --color-calm-text-muted:  var(--color-text-secondary, #787774);
  --color-calm-border:      var(--color-border, #e8e5e1);
  --color-calm-link:        var(--color-primary, #2383e2);
  --color-calm-link-hover:  var(--color-primary-hover, #1b6ec2);

  /* -- Font stacks ---------------------------------------------------------- */
  /* Inter is the project standard. Adding ui-monospace for better mono. */
  --font-calm-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-calm-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                    "Liberation Mono", "Courier New", monospace;

  /* -- Extended spacing scale ----------------------------------------------- */
  /* design-tokens.css goes up to --space-16. Add --space-7 for the gap. */
  --space-7: 1.75rem;

  /* -- Container + layout --------------------------------------------------- */
  --calm-container-max:    var(--container-max, 1200px);
  --calm-container-gutter: var(--space-6, 1.5rem);

  /* -- Focus ring ----------------------------------------------------------- */
  --calm-focus-ring: 0 0 0 2px var(--color-calm-link);
}


/* ==============================================================================
   B) BASE RESET REFINEMENTS
   ==============================================================================
   global.css / the browser already handles box-sizing etc. These rules are
   written defensively — they won't conflict if the reset is already present,
   and they fill in if it isn't loaded.
   ============================================================================== */

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

/* Sensible HTML baseline — 16px root keeps rem calculations predictable */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth anchor scrolling unless user prefers reduced motion */
  scroll-behavior: smooth;
}

/* Body: calm and readable */
body {
  margin: 0;
  font-family: var(--font-calm-sans);
  font-size: var(--font-size-base, 0.9375rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: 1.6;
  color: var(--color-calm-text);
  background-color: var(--color-calm-bg);
  /* Sharper rendering on macOS / iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/* ==============================================================================
   C) TYPOGRAPHY RHYTHM
   ==============================================================================
   Headings, paragraphs, lists, and inline elements get consistent vertical
   rhythm so content "breathes" without manual spacing on every page.
   ============================================================================== */

/* --- Headings ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--space-3, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  color: var(--color-calm-text);
}

/* Scaled heading sizes — calm, not dramatic */
h1 { font-size: var(--font-size-3xl, 1.875rem); font-weight: var(--font-weight-bold, 700); }
h2 { font-size: var(--font-size-2xl, 1.5rem); }
h3 { font-size: var(--font-size-xl, 1.25rem); }
h4 { font-size: var(--font-size-lg, 1.125rem); }
h5 { font-size: var(--font-size-base, 0.9375rem); font-weight: var(--font-weight-semibold, 600); }
h6 { font-size: var(--font-size-sm, 0.8125rem); font-weight: var(--font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.04em; }

/* When a heading follows a paragraph/section, add breathing room above */
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
  margin-top: var(--space-8, 2rem);
}

/* --- Paragraphs & body copy ----------------------------------------------- */
p {
  margin-top: 0;
  margin-bottom: var(--space-4, 1rem);
}

/* --- Lists ---------------------------------------------------------------- */
ul, ol {
  margin-top: 0;
  margin-bottom: var(--space-4, 1rem);
  padding-left: var(--space-6, 1.5rem);
}

li {
  margin-bottom: var(--space-1, 0.25rem);
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/* --- Inline elements ------------------------------------------------------ */
small {
  font-size: var(--font-size-sm, 0.8125rem);
  color: var(--color-calm-text-muted);
}

strong, b {
  font-weight: var(--font-weight-semibold, 600);
}

/* Code / pre — calm mono styling */
code {
  font-family: var(--font-calm-mono);
  font-size: 0.875em; /* slightly smaller than surrounding text */
  padding: 0.15em 0.35em;
  border-radius: var(--radius-sm, 4px);
  background-color: var(--color-surface-alt, #f5f3f0);
  color: var(--color-calm-text);
}

pre {
  font-family: var(--font-calm-mono);
  font-size: var(--font-size-sm, 0.8125rem);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  overflow-x: auto;
  border-radius: var(--radius-md, 8px);
  background-color: var(--color-surface-alt, #f5f3f0);
  border: 1px solid var(--color-calm-border);
}

/* Remove double styling when <code> is inside <pre> */
pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
}

/* Horizontal rule — subtle separator */
hr {
  margin: var(--space-8, 2rem) 0;
  border: none;
  border-top: 1px solid var(--color-calm-border);
}

/* Block quotes — calm left-border treatment */
blockquote {
  margin: 0 0 var(--space-4, 1rem) 0;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-left: 3px solid var(--color-calm-border);
  color: var(--color-calm-text-muted);
}


/* ==============================================================================
   D) LAYOUT HELPERS
   ==============================================================================
   Minimal set of layout primitives. These use the existing --container-max
   token so they stay in sync with the broader design system.
   ============================================================================== */

/* --- Container ------------------------------------------------------------- */
/* Centered max-width wrapper with responsive gutters */
.container {
  width: min(100% - var(--calm-container-gutter) * 2, var(--calm-container-max));
  margin-inline: auto;
}

/* --- Section vertical spacing ---------------------------------------------- */
/* Sections within page content get consistent vertical rhythm */
section {
  padding-block: var(--space-8, 2rem);
}

/* --- Stack utilities ------------------------------------------------------- */
/* Apply vertical spacing between direct children.
   Use sparingly — prefer component-level spacing where possible. */
.stack-sm > * + * { margin-top: var(--space-2, 0.5rem); }
.stack-md > * + * { margin-top: var(--space-4, 1rem); }
.stack-lg > * + * { margin-top: var(--space-8, 2rem); }


/* ==============================================================================
   E) INTERACTIVE & READABILITY DEFAULTS
   ==============================================================================
   Links, buttons, form controls, and images get calm, consistent defaults.
   ============================================================================== */

/* --- Links ----------------------------------------------------------------- */
a {
  color: var(--color-calm-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--transition-fast, 150ms ease);
}

a:hover {
  color: var(--color-calm-link-hover);
}

/* --- Form controls --------------------------------------------------------- */
/* Inherit font so inputs don't look alien next to body text */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Calm default styling for text-type inputs and textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--color-calm-border);
  border-radius: var(--radius-md, 8px);
  background-color: var(--color-calm-surface);
  transition: border-color var(--transition-fast, 150ms ease),
              box-shadow var(--transition-fast, 150ms ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-calm-link);
  box-shadow: var(--calm-focus-ring);
}

/* Textarea: allow vertical resize only */
textarea {
  resize: vertical;
  min-height: 5rem;
}

/* --- Images ---------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Tables (very light defaults) ------------------------------------------ */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}


/* ==============================================================================
   F) ACCESSIBILITY GUARDRAILS
   ==============================================================================
   Visible focus indicators and reduced-motion respect.
   ============================================================================== */

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-calm-link);
  outline-offset: 2px;
}

/* Remove default outline only when focus-visible handles it */
:focus:not(:focus-visible) {
  outline: none;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}