/* =========================================================================
   Design system foundation
   =========================================================================
   One place for the decisions every surface shares: type scale, spacing
   rhythm, radii, elevation, motion.

   Why this exists: the hand-written CSS had grown 37 distinct font sizes,
   30 padding values and 13 radii — eight different sizes between 0.8 and
   0.9rem alone. No reader can see 0.92rem next to 0.925rem, but the
   accumulated drift is what makes a page read as unstyled rather than
   designed. These scales are deliberately short so a choice has to be made
   from the ladder instead of invented.

   Scope note: this file defines tokens and shared components only. It does
   not restyle existing pages. Page CSS adopts it surface by surface.

   Tailwind here is a pre-built bundle with no build step, so utilities that
   are not already compiled silently do nothing. Anything new belongs in
   hand-written CSS like this file — not in a class name.
   ========================================================================= */

:root {
  /* ---- Type -------------------------------------------------------------
     Outfit (600/700, loaded from Google Fonts) carries headings; Inter sets
     body. Steps tighten as they get smaller because small text needs finer
     gradation than display text does. Nine steps replace thirty-seven. */
  --ds-font-display: "Outfit", var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  --ds-font-body: var(--font-sans), ui-sans-serif, system-ui, sans-serif;

  --ds-text-2xs: 0.75rem;    /* 12px — credits, micro labels */
  --ds-text-xs: 0.8125rem;   /* 13px — captions, meta */
  --ds-text-sm: 0.875rem;    /* 14px — secondary UI, dense tables */
  --ds-text-base: 1rem;      /* 16px — body */
  --ds-text-lg: 1.125rem;    /* 18px — lead paragraphs */
  --ds-text-xl: 1.375rem;    /* 22px — h3 */
  --ds-text-2xl: 1.75rem;    /* 28px — h2 */
  --ds-text-3xl: 2.25rem;    /* 36px — h1 */
  --ds-text-4xl: 3rem;       /* 48px — hero display */

  --ds-leading-tight: 1.15;  /* display sizes */
  --ds-leading-snug: 1.35;   /* headings, UI */
  --ds-leading-normal: 1.65; /* body prose */

  /* Reading measure. A reference site is read, not skimmed, and an
     unbounded line length is the single fastest way to look amateur. */
  --ds-measure: 68ch;
  --ds-measure-narrow: 54ch;

  /* ---- Space ------------------------------------------------------------
     A 4px grid, doubling through the middle. Eight steps replace thirty. */
  --ds-space-1: 0.25rem;  /* 4  */
  --ds-space-2: 0.5rem;   /* 8  */
  --ds-space-3: 0.75rem;  /* 12 */
  --ds-space-4: 1rem;     /* 16 */
  --ds-space-5: 1.5rem;   /* 24 */
  --ds-space-6: 2rem;     /* 32 */
  --ds-space-7: 3rem;     /* 48 */
  --ds-space-8: 4rem;     /* 64 */

  /* ---- Radius -----------------------------------------------------------
     Four steps replace thirteen. --ds-radius-md matches the existing
     --radius so adopting these does not visibly move anything. */
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-full: 999px;

  /* ---- Elevation --------------------------------------------------------
     Shadows are cast in the brand green rather than neutral black. On a
     green-primary palette a grey shadow reads as borrowed; a tinted one
     makes a lifted card look like it belongs to the same world. */
  --ds-shadow-color: 145 25% 12%;
  --ds-elevation-1: 0 1px 2px hsl(var(--ds-shadow-color) / 0.06);
  --ds-elevation-2:
    0 2px 4px hsl(var(--ds-shadow-color) / 0.06),
    0 8px 16px -4px hsl(var(--ds-shadow-color) / 0.08);
  --ds-elevation-3:
    0 4px 8px hsl(var(--ds-shadow-color) / 0.08),
    0 16px 32px -8px hsl(var(--ds-shadow-color) / 0.12);

  /* ---- Motion -----------------------------------------------------------
     Two durations. Interface feedback is fast; anything that moves a large
     surface gets the slower one. Both are removed under reduced motion. */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Focus ------------------------------------------------------------
     One focus treatment everywhere, so keyboard users learn it once. */
  --ds-focus-ring: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
}

/* Arabic sets its own display face; declared once here rather than repeated
   in every page stylesheet. */
html[dir="rtl"] {
  --ds-font-display: var(--font-arabic), "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0ms;
    --ds-duration-base: 0ms;
  }
}

/* =========================================================================
   Button
   =========================================================================
   Replaces home-btn / rest-btn / scan-file-btn, which were the same
   component at three different heights, paddings, weights and radii.

   Padding uses logical properties so RTL mirrors without a second rule. */

.ih-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);

  min-height: 2.75rem;
  padding-block: var(--ds-space-3);
  padding-inline: var(--ds-space-5);

  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);

  font-family: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 600;
  line-height: var(--ds-leading-snug);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition:
    background-color var(--ds-duration-fast) var(--ds-ease),
    border-color var(--ds-duration-fast) var(--ds-ease),
    box-shadow var(--ds-duration-fast) var(--ds-ease);
}

.ih-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.ih-btn[disabled],
.ih-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Variants ---------------------------------------------------------- */

/* Primary: the one action a screen most wants. At most one per view. */
.ih-btn--primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.ih-btn--primary:hover {
  background-color: hsl(var(--primary) / 0.9);
}

/* Secondary: equal-weight alternatives sitting beside a primary. */
.ih-btn--secondary {
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

.ih-btn--secondary:hover {
  background-color: hsl(var(--muted) / 0.4);
  border-color: hsl(var(--primary) / 0.4);
}

/* Ghost: tertiary actions that should not compete for attention. */
.ih-btn--ghost {
  background-color: transparent;
  color: hsl(var(--primary));
}

.ih-btn--ghost:hover {
  background-color: hsl(var(--muted) / 0.45);
}

/* ---- Sizes ------------------------------------------------------------- */

.ih-btn--sm {
  min-height: 2.25rem;
  padding-block: var(--ds-space-2);
  padding-inline: var(--ds-space-4);
  font-size: var(--ds-text-xs);
}

.ih-btn--lg {
  min-height: 3.25rem;
  padding-block: var(--ds-space-4);
  padding-inline: var(--ds-space-6);
  font-size: var(--ds-text-base);
}

/* Full width below the phone breakpoint is the common case for a stacked
   call to action, so it is a modifier rather than a per-page override. */
.ih-btn--block {
  width: 100%;
}

/* =========================================================================
   Field
   =========================================================================
   Pairs with .ih-btn at the same height so the two line up in a row without
   either needing a bespoke height. Replaces a 40-class utility string that
   was repeated at every search box. */

.ih-field {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding-block: var(--ds-space-3);
  padding-inline: var(--ds-space-4);
  border: 1px solid hsl(var(--border));
  border-radius: var(--ds-radius-md);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-snug);
  transition:
    border-color var(--ds-duration-fast) var(--ds-ease),
    box-shadow var(--ds-duration-fast) var(--ds-ease);
}

.ih-field::placeholder {
  color: hsl(var(--muted-foreground));
  font-size: var(--ds-text-sm);
}

.ih-field:focus-visible {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}

/* ---- Groups ------------------------------------------------------------ */

.ih-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  align-items: center;
}

@media (max-width: 30rem) {
  .ih-btn-row--stack .ih-btn {
    width: 100%;
  }
}